Commit 178c8d28 authored by 李维's avatar 李维

dev commit

parent bd59ce3a
......@@ -23,7 +23,7 @@ class Sprite {
update($event) {
this.draw();
}
draw() {}
draw() { }
}
export class MySprite extends Sprite {
......@@ -65,28 +65,21 @@ export class MySprite extends Sprite {
if (!this.visible && this.childDepandVisible) {
return;
}
this.draw();
}
draw() {
this.ctx.save();
this.drawInit();
this.updateChildren();
this.ctx.restore();
}
drawInit() {
this.ctx.translate(this.x, this.y);
this.ctx.rotate((this.rotation * Math.PI) / 180);
this.ctx.scale(this.scaleX, this.scaleY);
this.ctx.globalAlpha = this.alpha;
this.ctx.transform(1, this.skewX, this.skewY, 1, 0, 0);
}
......@@ -139,6 +132,7 @@ export class MySprite extends Sprite {
child.alpha = this.alpha;
}
}
removeChild(child) {
const index = this.children.indexOf(child);
if (index !== -1) {
......@@ -165,43 +159,6 @@ export class MySprite extends Sprite {
}
}
set alpha(v) {
this._alpha = v;
if (this.childDepandAlpha) {
this._changeChildAlpha(v);
}
}
get alpha() {
return this._alpha;
}
set width(v) {
this._width = v;
this.refreshAnchorOff();
}
get width() {
return this._width;
}
set height(v) {
this._height = v;
this.refreshAnchorOff();
}
get height() {
return this._height;
}
set anchorX(value) {
this._anchorX = value;
this.refreshAnchorOff();
}
get anchorX() {
return this._anchorX;
}
set anchorY(value) {
this._anchorY = value;
this.refreshAnchorOff();
}
get anchorY() {
return this._anchorY;
}
refreshAnchorOff() {
this._offX = -this._width * this.anchorX;
this._offY = -this._height * this.anchorY;
......@@ -221,36 +178,65 @@ export class MySprite extends Sprite {
const parent = item.parent;
if (parent) {
const obj = getParentData(parent);
const _x = obj.px;
const _y = obj.py;
const _sx = obj.sx;
const _sy = obj.sy;
px = _x + item.x * _sx;
py = _y + item.y * _sy;
sx *= _sx;
sy *= _sy;
}
return { px, py, sx, sy };
};
const data = getParentData(this);
const x = data.px + this._offX * Math.abs(data.sx);
const y = data.py + this._offY * Math.abs(data.sy);
const width = this.width * Math.abs(data.sx);
const height = this.height * Math.abs(data.sy);
// const x = this.x + this._offX * Math.abs(this.scaleX);
// const y = this.y + this._offY * Math.abs(this.scaleY);
// const width = this.width * Math.abs(this.scaleX);
// const height = this.height * Math.abs(this.scaleY);
return { x, y, width, height };
}
set alpha(v) {
this._alpha = v;
if (this.childDepandAlpha) {
this._changeChildAlpha(v);
}
}
get alpha() {
return this._alpha;
}
set width(v) {
this._width = v;
this.refreshAnchorOff();
}
get width() {
return this._width;
}
set height(v) {
this._height = v;
this.refreshAnchorOff();
}
get height() {
return this._height;
}
set anchorX(value) {
this._anchorX = value;
this.refreshAnchorOff();
}
get anchorX() {
return this._anchorX;
}
set anchorY(value) {
this._anchorY = value;
this.refreshAnchorOff();
}
get anchorY() {
return this._anchorY;
}
}
export class waterWave extends MySprite {
......@@ -273,26 +259,26 @@ export class waterWave extends MySprite {
let b = this.bottole_y0 // this.bottole_r*2
for (var i = 0; i <= this.count; i++) {
this.speedX += 0.05;
var x = a - r + i * (r*2 / this.count);
var y = b + r -height + this.simplex.noise2D(this.speedX, this.speedY) * this.amp;
if(x>(a+r)){
x = a+r
var x = a - r + i * (r * 2 / this.count);
var y = b + r - height + this.simplex.noise2D(this.speedX, this.speedY) * this.amp;
if (x > (a + r)) {
x = a + r
}
if(x<(a-r)){
x = a-r
if (x < (a - r)) {
x = a - r
}
let c_y1 = Math.sqrt(r*r - (x-a)*(x-a)) + b
let c_y2 = -Math.sqrt(r*r - (x-a)*(x-a)) + b
if(y>c_y1){
let c_y1 = Math.sqrt(r * r - (x - a) * (x - a)) + b
let c_y2 = -Math.sqrt(r * r - (x - a) * (x - a)) + b
if (y > c_y1) {
y = c_y1
}
if(y<c_y2){
if (y < c_y2) {
y = c_y2
}
this.ctx[i === 0 ? "moveTo" : "lineTo"](x, y);
}
this.ctx.arc(a,b,r,0,Math.PI);
this.ctx.arc(a, b, r, 0, Math.PI);
this.ctx.closePath();
this.ctx.fillStyle = color;
this.ctx.fill();
......@@ -301,7 +287,7 @@ export class waterWave extends MySprite {
drawSelf() {
super.drawSelf();
this.speedX = 0;
if(new Date().getTime() - this._runTimeCtl > 10){
if (new Date().getTime() - this._runTimeCtl > 10) {
this.speedY += 0.02; //每次渲染需要更新波峰波谷值
}
this._runTimeCtl = new Date().getTime()
......@@ -336,8 +322,6 @@ export class ColorSpr extends MySprite {
c.data[x + 1] = this.g;
c.data[x + 2] = this.b;
// c.data[x] = c.data[x + 1] = c.data[x + 2] = (r + g + b) / 3 ;
// // c.data[x + 3] = 255;
}
}
......@@ -359,7 +343,6 @@ export class GrayscaleSpr extends MySprite {
}
const rect = this.getBoundingBox();
const c = this.ctx.getImageData(rect.x, rect.y, rect.width, rect.height);
for (let i = 0; i < c.height; i++) {
for (let j = 0; j < c.width; j++) {
......@@ -367,10 +350,7 @@ export class GrayscaleSpr extends MySprite {
const r = c.data[x];
const g = c.data[x + 1];
const b = c.data[x + 2];
// const a = c.data[x + 3];
c.data[x] = c.data[x + 1] = c.data[x + 2] = this.grayScale; // (r + g + b) / 3;
// c.data[x + 3] = 255;
}
}
......@@ -478,7 +458,7 @@ export class Label extends MySprite {
const tween = new TWEEN.Tween(this)
.to({ alpha: 1 }, 800)
// .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
.onComplete(function() {
.onComplete(function () {
if (callBack) {
callBack();
}
......@@ -539,11 +519,11 @@ export class Label extends MySprite {
// 当maxSingalLineWidth不为0时,对数据进行换行处理
if(this.maxSingalLineWidth !== 0 ){
if (this.maxSingalLineWidth !== 0) {
var words = this.text.split(' ');
var line = '';
this._warpLineY = 0;
for(var n = 0; n < words.length; n++) {
for (var n = 0; n < words.length; n++) {
var testLine = line + words[n] + ' ';
var metrics = this.ctx.measureText(testLine);
var testWidth = metrics.width;
......@@ -556,9 +536,9 @@ export class Label extends MySprite {
line = testLine;
}
}
this.y = -this._warpLineY /2
this.y = -this._warpLineY / 2
this.ctx.fillText(line, 0, this._warpLineY);
}else{
} else {
this.ctx.fillText(this.text, 0, 0);
}
}
......@@ -695,7 +675,7 @@ export class RichTextOld extends Label {
const tween = new TWEEN.Tween(this)
.to({ alpha: 1 }, 800)
// .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
.onComplete(function() {
.onComplete(function () {
if (callBack) {
callBack();
}
......@@ -840,7 +820,7 @@ export class ShapeCircle extends MySprite {
shadowColor = "rgba(0,0,0,0)"
shadowOffsetX = 0;
shadowOffsetY = 0;
setRadius(r) {
this.anchorX = this.anchorY = 0.5;
this.radius = r;
......@@ -849,7 +829,7 @@ export class ShapeCircle extends MySprite {
}
drawShape() {
switch(this.drawType){
switch (this.drawType) {
case "stroke":
this.ctx.beginPath();
this.ctx.strokeStyle = this.strokeColor;
......@@ -867,7 +847,7 @@ export class ShapeCircle extends MySprite {
this.ctx.fill();
break;
}
}
drawSelf() {
......@@ -1126,7 +1106,7 @@ export function endShow(item, s = 1) {
const tween = new TWEEN.Tween(item)
.to({ alpha: 1, scaleX: s, scaleY: s }, 800)
.easing(TWEEN.Easing.Elastic.Out) // Use an easing function to make the animation smooth.
.onComplete(function() {})
.onComplete(function () { })
.start();
}
......@@ -1138,7 +1118,7 @@ export function hideItem(item, time = 0.8, callBack = null, easing = null) {
const tween = new TWEEN.Tween(item)
.to({ alpha: 0 }, time * 1000)
// .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
.onComplete(function() {
.onComplete(function () {
if (callBack) {
callBack();
}
......@@ -1163,7 +1143,7 @@ export function showItem(item, time = 0.8, callBack = null, easing = null) {
const tween = new TWEEN.Tween(item)
.to({ alpha: 1 }, time * 1000)
// .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
.onComplete(function() {
.onComplete(function () {
if (callBack) {
callBack();
}
......@@ -1186,7 +1166,7 @@ export function alphaItem(
const tween = new TWEEN.Tween(item)
.to({ alpha: alpha }, time * 1000)
// .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
.onComplete(function() {
.onComplete(function () {
if (callBack) {
callBack();
}
......@@ -1203,7 +1183,7 @@ export function showStar(item, time = 0.8, callBack = null, easing = null) {
const tween = new TWEEN.Tween(item)
.to({ alpha: 1, scale: 1 }, time * 1000)
// .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
.onComplete(function() {
.onComplete(function () {
if (callBack) {
callBack();
}
......@@ -1443,11 +1423,11 @@ export function showPopParticle(img, pos, parent) {
particle.x + randomT.x,
particle.y + randomT.y,
0.4,
() => {},
() => { },
TWEEN.Easing.Exponential.Out
);
scaleItem(particle, 0, 0.6, () => {});
scaleItem(particle, 0, 0.6, () => { });
}
}
......@@ -1533,13 +1513,13 @@ export function showBlingBling(starImg, rectArea, parent, mapScale = 1, num = 30
}
function showBlingStar(starImg, num, rectArea, parent, mapScale) {
for (let i = 0; i < num; i++) {
const star = new MySprite();
star.init(starImg);
const px = -parent.width/2 + Math.random() * parent.width;
const py = -parent.height/2 + Math.random() * parent.height;
const px = -parent.width / 2 + Math.random() * parent.width;
const py = -parent.height / 2 + Math.random() * parent.height;
star.x = px;
star.y = py;
......
......@@ -313,7 +313,7 @@ export class PlayComponent implements OnInit, OnDestroy {
this.m_questionCard_All.push(this.createQuestionCardText(index, element))
});
this.m_questionCard_All = this.randomArray_shuffle(this.m_questionCard_All)
this.alignCenter(this.m_questionCard_All, 20*this.g_mapScale, true)
this.alignCenter(this.m_questionCard_All, 40*this.g_mapScale, true)
}
createQuestionCardText(index, text){
......@@ -324,16 +324,25 @@ export class PlayComponent implements OnInit, OnDestroy {
element.index = index;
// 高亮边框 新
let borderWidth = imageBD.width + 30 * this.g_mapScale
let borderHeight = cardHeight * this.g_mapScale
let border_new = this.g_cartoon.createRectangula({
x: -borderWidth / 2, y: -borderHeight / 2, width: borderWidth, height: borderHeight, fillColor: "#66e4ff", radius: 10
})
border_new.visible = false;
element.ref.addChild(border_new)
// 边框
let borderLeft = this.g_cartoon.createCartoonElementImageFunc("questioncard-text-border-left-"+index, "image_border_left", (w, h)=>{
return{
sx: (22 / element.ref.scaleX) / w,
sy: (((cardHeight - 8) * this.g_mapScale) / element.ref.scaleY) / h
sy: (cardHeight - 8) * this.g_mapScale / h
}
}, (w, h)=>{
return{
x: -(imageBD.width / element.ref.scaleX) / 2,
y: 13
x: -imageBD.width / 2,
y: 0
}
})
element.ref.addChild(borderLeft.ref)
......@@ -341,12 +350,12 @@ export class PlayComponent implements OnInit, OnDestroy {
let borderRight = this.g_cartoon.createCartoonElementImageFunc("questioncard-text-border-right-"+index, "image_border_right", (w, h)=>{
return{
sx: (22 / element.ref.scaleX) / w,
sy: (((cardHeight - 8) * this.g_mapScale) / element.ref.scaleY) / h
sy: ((cardHeight - 8) * this.g_mapScale) / h
}
}, (w, h)=>{
return{
x: (imageBD.width / element.ref.scaleX) / 2,
y: 13
y: 0
}
})
element.ref.addChild(borderRight.ref)
......@@ -354,65 +363,21 @@ export class PlayComponent implements OnInit, OnDestroy {
let border = this.g_cartoon.createCartoonElementImageFunc("questioncard-text-border-"+index, "text_center", (w, h)=>{
return{
sx: (imageBD.width / element.ref.scaleX) / w,
sy: ((cardHeight * this.g_mapScale) / element.ref.scaleY) / h
sy: (cardHeight * this.g_mapScale) / h
}
}, (w, h)=>{
return{
x: 0,
y: 13
y: 0
}
})
element.ref.addChild(border.ref)
// 高亮边框
let border_H = this.g_cartoon.createCartoonElementImageFunc("questioncard-text-border-h-"+index, "border_center", (w, h)=>{
return{
sx: (imageBD.width / element.ref.scaleX) / w,
sy: ((cardHeight * this.g_mapScale) / element.ref.scaleY) / h
}
}, (w, h)=>{
return{
x: 0,
y: 8
}
})
element.ref.addChild(border_H.ref)
let borderLeft_H = this.g_cartoon.createCartoonElementImageFunc("questioncard-text-border-h-left-"+index, "border_left", (w, h)=>{
return{
sx: (22 / element.ref.scaleX) / w,
sy: ((cardHeight * this.g_mapScale) / element.ref.scaleY) / h
}
}, (w, h)=>{
return{
x: -(imageBD.width / element.ref.scaleX) / 2 - 5,
y: 9
}
})
element.ref.addChild(borderLeft_H.ref)
let borderRight_H = this.g_cartoon.createCartoonElementImageFunc("questioncard-text-border-h-right-"+index, "border_right", (w, h)=>{
return{
sx: (22 / element.ref.scaleX) / w,
sy: ((cardHeight * this.g_mapScale) / element.ref.scaleY) / h
}
}, (w, h)=>{
return{
x: (imageBD.width / element.ref.scaleX) / 2 + 5,
y: 9
}
})
element.ref.addChild(borderRight_H.ref)
element.text_copy = this.g_cartoon.createCartoonElementLabel("questioncard-text-"+index+"-copy", text,"BRLNSDB", "#d94158", 65 * this.g_mapScale, 0, 0)
element.text_copy_shadow = this.g_cartoon.createCartoonElementLabel("questioncard-text-"+index+"-copy", text,"BRLNSDB", "#fdf0cd", 65 * this.g_mapScale, 0, 5)
element.ref.addChild(element.text_copy_shadow.ref)
element.ref.addChild(element.text_copy.ref)
border_H.ref.visible = false;
borderRight_H.ref.visible = false;
borderLeft_H.ref.visible = false;
element.startPos = { x:element.initX, y:element.initY }
element.backTo = (pos?, callback?)=>{
if(pos){
......@@ -430,9 +395,7 @@ export class PlayComponent implements OnInit, OnDestroy {
element.release = (pos, callback?)=>{
this.m_enableCardMove = false;
this.m_currentSelectedCardID = null;
border_H.ref.visible = false;
borderRight_H.ref.visible = false;
borderLeft_H.ref.visible = false;
border_new.visible = false;
this.disableMoveAsstant()
element.backTo(pos, callback)
}
......@@ -445,9 +408,7 @@ export class PlayComponent implements OnInit, OnDestroy {
this.g_cartoon.playAudio("tuozhuai")
this.m_enableCardMove = true;
this.m_currentSelectedCardID = element.id
border_H.ref.visible = true;
borderRight_H.ref.visible = true;
borderLeft_H.ref.visible = true;
border_new.visible = true;
this.topOfRenderArray(element.ref)
element.startPos = {
x: this.g_clickX,
......@@ -700,12 +661,12 @@ export class PlayComponent implements OnInit, OnDestroy {
if(selectedCard.index == element.index){
selectedCard.ref.x = element.ref.x
selectedCard.ref.y = element.ref.y
selectedCard.release({x:element.ref.x, y:element.ref.y - 10 * this.g_mapScale}, ()=>{
selectedCard.release({x:element.ref.x, y:element.ref.y}, ()=>{
let spacing = 0
if(this.g_formData.answerType=="Image"){
spacing = 20*this.g_mapScale
}else{
spacing = 20*this.g_mapScale
spacing = 30*this.g_mapScale
}
this.alignCenter(this.m_answerCard_All, spacing, true, ()=>{
element.star(()=>{
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment