Unit.ts 32.8 KB
Newer Older
1 2 3 4
import TWEEN from "@tweenjs/tween.js";
import simplexNoise from "../../assets/libs/simplex-noise/simplex-noise.min.js"
import { del } from "selenium-webdriver/http";
import construct = Reflect.construct;
limingzhe's avatar
limingzhe committed
5 6 7 8

class Sprite {
  x = 0;
  y = 0;
9
  color = "";
limingzhe's avatar
limingzhe committed
10 11 12 13 14
  radius = 0;
  alive = false;
  margin = 0;
  angle = 0;
  ctx;
15
  id;
limingzhe's avatar
limingzhe committed
16 17
  constructor(ctx = null) {
    if (!ctx) {
18
      this.ctx = window["curCtx"];
limingzhe's avatar
limingzhe committed
19 20 21 22 23 24 25
    } else {
      this.ctx = ctx;
    }
  }
  update($event) {
    this.draw();
  }
26
  draw() { }
limingzhe's avatar
limingzhe committed
27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51
}

export class MySprite extends Sprite {
  _width = 0;
  _height = 0;
  _anchorX = 0;
  _anchorY = 0;
  _offX = 0;
  _offY = 0;
  scaleX = 1;
  scaleY = 1;
  _alpha = 1;
  rotation = 0;
  visible = true;
  skewX = 0;
  skewY = 0;

  children = [this];

  childDepandVisible = true;
  childDepandAlpha = false;

  img;
  _z = 0;

52
  init(imgObj = null, anchorX: number = 0.5, anchorY: number = 0.5) {
limingzhe's avatar
limingzhe committed
53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70
    if (imgObj) {
      this.img = imgObj;

      this.width = this.img.width;
      this.height = this.img.height;
    }

    this.anchorX = anchorX;
    this.anchorY = anchorY;
  }

  update($event = null) {
    if (!this.visible && this.childDepandVisible) {
      return;
    }
    this.draw();
  }

71
  draw() {
limingzhe's avatar
limingzhe committed
72 73 74 75 76 77 78 79
    this.ctx.save();
    this.drawInit();
    this.updateChildren();
    this.ctx.restore();
  }

  drawInit() {
    this.ctx.translate(this.x, this.y);
80
    this.ctx.rotate((this.rotation * Math.PI) / 180);
limingzhe's avatar
limingzhe committed
81 82 83 84 85 86 87 88 89 90 91 92
    this.ctx.scale(this.scaleX, this.scaleY);
    this.ctx.globalAlpha = this.alpha;
    this.ctx.transform(1, this.skewX, this.skewY, 1, 0, 0);
  }

  drawSelf() {
    if (this.img) {
      this.ctx.drawImage(this.img, this._offX, this._offY);
    }
  }

  updateChildren() {
93 94 95
    if (this.children.length <= 0) {
      return;
    }
limingzhe's avatar
limingzhe committed
96

97 98
    for (let i = 0; i < this.children.length; i++) {
      if (this.children[i] === this) {
limingzhe's avatar
limingzhe committed
99 100 101 102
        if (this.visible) {
          this.drawSelf();
        }
      } else {
103
        this.children[i].update();
limingzhe's avatar
limingzhe committed
104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134
      }
    }
  }

  load(url, anchorX = 0.5, anchorY = 0.5) {
    return new Promise((resolve, reject) => {
      const img = new Image();
      img.onload = () => resolve(img);
      img.onerror = reject;
      img.src = url;
    }).then(img => {
      this.init(img, anchorX, anchorY);
      return img;
    });
  }

  addChild(child, z = 1) {
    if (this.children.indexOf(child) === -1) {
      this.children.push(child);
      child._z = z;
      child.parent = this;
    }

    this.children.sort((a, b) => {
      return a._z - b._z;
    });

    if (this.childDepandAlpha) {
      child.alpha = this.alpha;
    }
  }
135

limingzhe's avatar
limingzhe committed
136 137 138 139 140 141 142 143 144 145
  removeChild(child) {
    const index = this.children.indexOf(child);
    if (index !== -1) {
      this.children.splice(index, 1);
    }
  }

  removeChildren() {
    for (let i = 0; i < this.children.length; i++) {
      if (this.children[i]) {
146
        if (this.children[i] != this) {
limingzhe's avatar
limingzhe committed
147
          this.children.splice(i, 1);
148
          i--;
limingzhe's avatar
limingzhe committed
149 150 151 152 153 154
        }
      }
    }
  }

  _changeChildAlpha(alpha) {
155 156 157
    for (let i = 0; i < this.children.length; i++) {
      if (this.children[i] != this) {
        this.children[i].alpha = alpha;
limingzhe's avatar
limingzhe committed
158 159 160 161
      }
    }
  }

162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201
  refreshAnchorOff() {
    this._offX = -this._width * this.anchorX;
    this._offY = -this._height * this.anchorY;
  }

  setScaleXY(value) {
    this.scaleX = this.scaleY = value;
  }

  getBoundingBox() {
    const getParentData = item => {
      let px = item.x;
      let py = item.y;

      let sx = item.scaleX;
      let sy = item.scaleY;
      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);

    return { x, y, width, height };
  }

limingzhe's avatar
limingzhe committed
202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238
  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;
  }
239
}
limingzhe's avatar
limingzhe committed
240

241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267
export class waterWave extends MySprite {
  bottole_r = 100;
  bottole_x0 = 100;
  bottole_y0 = 100;
  simplex = new simplexNoise()
  amp = 10; //波浪幅度 可以通过函数传递参数更改不同的幅度
  count = 80;
  speedY = 0;
  speedX = 0;
  height = this.bottole_r
  water_color = "red"
  per = 1.5
  _runTimeCtl = new Date().getTime()
  draw_self(color, comp, height) {
    this.ctx.beginPath();
    let r = this.bottole_r
    let a = this.bottole_x0 // this.bottole_r*2
    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
      }
      if (x < (a - r)) {
        x = a - r
limingzhe's avatar
limingzhe committed
268 269
      }

270 271 272 273 274 275 276 277 278 279 280 281 282 283
      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) {
        y = c_y2
      }
      this.ctx[i === 0 ? "moveTo" : "lineTo"](x, y);
    }
    this.ctx.arc(a, b, r, 0, Math.PI);
    this.ctx.closePath();
    this.ctx.fillStyle = color;
    this.ctx.fill();
limingzhe's avatar
limingzhe committed
284 285
  }

286 287 288 289 290 291 292 293 294
  drawSelf() {
    super.drawSelf();
    this.speedX = 0;
    if (new Date().getTime() - this._runTimeCtl > 10) {
      this.speedY += 0.02; //每次渲染需要更新波峰波谷值
    }
    this._runTimeCtl = new Date().getTime()
    this.draw_self(this.water_color, "screen", this.height);
  }
limingzhe's avatar
limingzhe committed
295 296 297 298 299 300 301
}

export class ColorSpr extends MySprite {
  r = 0;
  g = 0;
  b = 0;

302
  createGSCanvas() {
limingzhe's avatar
limingzhe committed
303 304 305 306 307 308 309 310 311 312
    if (!this.img) {
      return;
    }

    const rect = this.getBoundingBox();
    if (rect.width <= 1 || rect.height <= 1) {
      return;
    }

    const c = this.ctx.getImageData(rect.x, rect.y, rect.width, rect.height);
313 314 315
    for (let i = 0; i < c.height; i++) {
      for (let j = 0; j < c.width; j++) {
        const x = i * 4 * c.width + j * 4;
limingzhe's avatar
limingzhe committed
316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338
        const r = c.data[x];
        const g = c.data[x + 1];
        const b = c.data[x + 2];

        c.data[x] = this.r;
        c.data[x + 1] = this.g;
        c.data[x + 2] = this.b;

      }
    }

    this.ctx.putImageData(c, rect.x, rect.y, 0, 0, rect.width, rect.height);
  }

  drawSelf() {
    super.drawSelf();
    this.createGSCanvas();
  }
}

export class GrayscaleSpr extends MySprite {
  grayScale = 120;

339
  createGSCanvas() {
limingzhe's avatar
limingzhe committed
340 341 342 343 344 345
    if (!this.img) {
      return;
    }

    const rect = this.getBoundingBox();
    const c = this.ctx.getImageData(rect.x, rect.y, rect.width, rect.height);
346 347 348
    for (let i = 0; i < c.height; i++) {
      for (let j = 0; j < c.width; j++) {
        const x = i * 4 * c.width + j * 4;
limingzhe's avatar
limingzhe committed
349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372
        const r = c.data[x];
        const g = c.data[x + 1];
        const b = c.data[x + 2];
        c.data[x] = c.data[x + 1] = c.data[x + 2] = this.grayScale; // (r + g + b) / 3;
      }
    }

    this.ctx.putImageData(c, rect.x, rect.y, 0, 0, rect.width, rect.height);
  }

  drawSelf() {
    super.drawSelf();
    this.createGSCanvas();
  }
}

export class BitMapLabel extends MySprite {
  labelArr;
  baseUrl;

  setText(data, text) {
    this.labelArr = [];

    const labelArr = [];
373
    const tmpArr = text.split("");
limingzhe's avatar
limingzhe committed
374 375
    let totalW = 0;
    let h = 0;
376
    for (let i = 0; i < tmpArr.length; i++) {
limingzhe's avatar
limingzhe committed
377
      const label = new MySprite(this.ctx);
378
      label.init(data[tmpArr[i]], 0);
limingzhe's avatar
limingzhe committed
379 380 381 382 383 384 385 386 387 388 389
      this.addChild(label);
      labelArr.push(label);

      totalW += label.width;
      h = label.height;
    }

    this.width = totalW;
    this.height = h;

    let offX = -totalW / 2;
390 391 392
    for (let i = 0; i < labelArr.length; i++) {
      labelArr[i].x = offX;
      offX += labelArr[i].width;
limingzhe's avatar
limingzhe committed
393 394 395 396 397 398 399
    }

    this.labelArr = labelArr;
  }
}

export class Label extends MySprite {
400
  text: String;
limingzhe's avatar
limingzhe committed
401
  // fontSize:String = '40px';
402 403
  fontName: String = "Verdana";
  textAlign: String = "left";
limingzhe's avatar
limingzhe committed
404
  fontSize = 40;
405
  fontColor = "#000000";
limingzhe's avatar
limingzhe committed
406
  fontWeight = 900;
407
  maxWidth;
limingzhe's avatar
limingzhe committed
408
  outline = 0;
409
  outlineColor = "#ffffff";
limingzhe's avatar
limingzhe committed
410

411 412 413 414 415 416 417 418
  maxSingalLineWidth = 0;
  baseY = 0
  warpLineHeight = 0;
  _shadowFlag = false;
  _shadowColor;
  _shadowOffsetX;
  _shadowOffsetY;
  _shadowBlur;
limingzhe's avatar
limingzhe committed
419 420 421 422

  _outlineFlag = false;
  _outLineWidth;
  _outLineColor;
423
  _warpLineY = 0;
limingzhe's avatar
limingzhe committed
424 425 426 427 428 429 430 431 432 433 434

  constructor(ctx = null) {
    super(ctx);
    this.init();
  }

  refreshSize() {
    this.ctx.save();

    this.ctx.font = `${this.fontSize}px ${this.fontName}`;
    this.ctx.textAlign = this.textAlign;
435
    this.ctx.textBaseline = "middle";
limingzhe's avatar
limingzhe committed
436 437 438 439
    this.ctx.fontWeight = this.fontWeight;

    this._width = this.ctx.measureText(this.text).width;

440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461
    let height = this.fontSize
    if (this.maxSingalLineWidth !== 0) {
      var words = this.text.split(' ');
      var line = '';
      let index = 0;
      for (var n = 0; n < words.length; n++) {
        var testLine = line + words[n] + ' ';
        var metrics = this.ctx.measureText(testLine);
        var testWidth = metrics.width;
        if (testWidth > this.maxSingalLineWidth && n > 0) {
          // this.ctx.fillText(line, 0, this._warpLineY);
          line = words[n] + ' ';
          // this._warpLineY += this.fontSize;
          index++
          console.log(index)
          height += this.fontSize;
        }else {
          line = testLine;
        }
      }
      this._height = height;
    }
limingzhe's avatar
limingzhe committed
462

463 464 465
    this.refreshAnchorOff();
    
    this.ctx.restore();
limingzhe's avatar
limingzhe committed
466 467 468
  }

  setMaxSize(w) {
469
    this.maxWidth = w;
limingzhe's avatar
limingzhe committed
470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486
    this.refreshSize();
    if (this.width >= w) {
      this.scaleX *= w / this.width;
      this.scaleY *= w / this.width;
    }
  }

  show(callBack = null) {
    this.visible = true;

    if (this.alpha >= 1) {
      return;
    }

    const tween = new TWEEN.Tween(this)
      .to({ alpha: 1 }, 800)
      // .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
487
      .onComplete(function () {
limingzhe's avatar
limingzhe committed
488 489 490 491 492 493 494
        if (callBack) {
          callBack();
        }
      })
      .start(); // Start the tween immediately.
  }

495 496 497 498 499 500 501 502 503
  setShadow(offX = 2, offY = 2, blur = 2, color = "rgba(0, 0, 0, 0.2)") {
    this._shadowFlag = true;
    this._shadowColor = color;
    // 将阴影向右移动15px,向上移动10px
    this._shadowOffsetX = offX;
    this._shadowOffsetY = offY;
    // 轻微模糊阴影
    this._shadowBlur = blur;
  }
limingzhe's avatar
limingzhe committed
504

505
  setOutline(width = 5, color = "#ffffff") {
limingzhe's avatar
limingzhe committed
506 507 508 509 510 511 512 513
    this._outlineFlag = true;
    this._outLineWidth = width;
    this._outLineColor = color;
  }

  drawText() {
    // console.log('in drawText', this.text);

514 515 516
    if (!this.text) {
      return;
    }
limingzhe's avatar
limingzhe committed
517

518 519 520 521 522 523 524 525
    if (this._shadowFlag) {
      this.ctx.shadowColor = this._shadowColor;
      // 将阴影向右移动15px,向上移动10px
      this.ctx.shadowOffsetX = this._shadowOffsetX;
      this.ctx.shadowOffsetY = this._shadowOffsetY;
      // 轻微模糊阴影
      this.ctx.shadowBlur = this._shadowBlur;
    }
limingzhe's avatar
limingzhe committed
526 527 528

    this.ctx.font = `${this.fontSize}px ${this.fontName}`;
    this.ctx.textAlign = this.textAlign;
529
    this.ctx.textBaseline = "middle";
limingzhe's avatar
limingzhe committed
530 531 532 533 534 535 536 537 538 539 540 541 542 543
    this.ctx.fontWeight = this.fontWeight;

    if (this._outlineFlag) {
      this.ctx.lineWidth = this._outLineWidth;
      this.ctx.strokeStyle = this._outLineColor;
      this.ctx.strokeText(this.text, 0, 0);
    }

    this.ctx.fillStyle = this.fontColor;

    if (this.outline > 0) {
      this.ctx.lineWidth = this.outline;
      this.ctx.strokeStyle = this.outlineColor;
      this.ctx.strokeText(this.text, 0, 0);
544 545
    }

limingzhe's avatar
limingzhe committed
546

547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568
    // 当maxSingalLineWidth不为0时,对数据进行换行处理
    if (this.maxSingalLineWidth !== 0) {
      var words = this.text.split(' ');
      var line = '';
      this._warpLineY = 0;
      for (var n = 0; n < words.length; n++) {
        var testLine = line + words[n] + ' ';
        var metrics = this.ctx.measureText(testLine);
        var testWidth = metrics.width;
        if (testWidth > this.maxSingalLineWidth && n > 0) {
          this.ctx.fillText(line, 0, this._warpLineY);
          line = words[n] + ' ';
          this._warpLineY += this.fontSize;
        }
        else {
          line = testLine;
        }
      }
      this.y = this.baseY // + this._warpLineY
      this.ctx.fillText(line, 0, this._warpLineY);
    } else {
      this.ctx.fillText(this.text, 0, 0);
limingzhe's avatar
limingzhe committed
569
    }
570
  }
limingzhe's avatar
limingzhe committed
571

572 573 574 575 576 577
  drawSelf() {
    super.drawSelf();
    this.drawText();
  }
}
export class ShapeRectNew extends MySprite {
limingzhe's avatar
limingzhe committed
578 579


580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625 626 627 628 629 630 631 632 633 634 635 636 637 638 639 640 641 642 643 644
  radius = 0;
  fillColor = '#ffffff';
  strokeColor = '#000000';
  fill = true;
  stroke = false;
  lineWidth = 1;

  setSize(w, h, r) {
    this.width = w;
    this.height = h;
    this.radius = r;
  }

  setOutLine(color, lineWidth) {
    this.stroke = true;
    this.strokeColor = color;
    this.lineWidth = lineWidth;
  }


  drawShape() {

    const ctx = this.ctx;
    const width = this.width;
    const height = this.height;
    const radius = this.radius;

    ctx.save();
    ctx.beginPath(0);
    // 从右下角顺时针绘制,弧度从0到1/2PI
    ctx.arc(width - radius, height - radius, radius, 0, Math.PI / 2);

    // 矩形下边线
    ctx.lineTo(radius, height);

    // 左下角圆弧,弧度从1/2PI到PI
    ctx.arc(radius, height - radius, radius, Math.PI / 2, Math.PI);

    // 矩形左边线
    ctx.lineTo(0, radius);

    // 左上角圆弧,弧度从PI到3/2PI
    ctx.arc(radius, radius, radius, Math.PI, Math.PI * 3 / 2);

    // 上边线
    ctx.lineTo(width - radius, 0);

    // 右上角圆弧
    ctx.arc(width - radius, radius, radius, Math.PI * 3 / 2, Math.PI * 2);

    // 右边线
    ctx.lineTo(width, height - radius);
    ctx.closePath();

    if (this.fill) {
      ctx.fillStyle = this.fillColor;
      ctx.fill();
    }
    if (this.stroke) {
      ctx.lineWidth = this.lineWidth;
      ctx.strokeStyle = this.strokeColor;
      ctx.stroke();
    }
    ctx.restore();

limingzhe's avatar
limingzhe committed
645 646 647 648 649
  }


  drawSelf() {
    super.drawSelf();
650
    this.drawShape();
limingzhe's avatar
limingzhe committed
651 652 653 654 655 656 657 658
  }

}

export class RichTextOld extends Label {
  textArr = [];
  fontSize = 40;

659
  setText(text: string, words) {
limingzhe's avatar
limingzhe committed
660
    let newText = text;
661 662
    for (let i = 0; i < words.length; i++) {
      const word = words[i];
limingzhe's avatar
limingzhe committed
663

664 665
      const re = new RegExp(word, "g");
      newText = newText.replace(re, `#${word}#`);
limingzhe's avatar
limingzhe committed
666 667 668
      // newText = newText.replace(word, `#${word}#`);
    }

669
    this.textArr = newText.split("#");
limingzhe's avatar
limingzhe committed
670 671 672 673 674 675 676 677 678 679
    this.text = newText;

    // this.setSize();
  }

  refreshSize() {
    this.ctx.save();

    this.ctx.font = `${this.fontSize}px ${this.fontName}`;
    this.ctx.textAlign = this.textAlign;
680
    this.ctx.textBaseline = "middle";
limingzhe's avatar
limingzhe committed
681 682 683
    this.ctx.fontWeight = this.fontWeight;

    let curX = 0;
684 685
    for (let i = 0; i < this.textArr.length; i++) {
      const w = this.ctx.measureText(this.textArr[i]).width;
limingzhe's avatar
limingzhe committed
686 687 688 689 690 691 692 693 694 695 696 697 698 699 700 701 702 703
      curX += w;
    }

    this.width = curX;
    this.height = this.fontSize;
    this.refreshAnchorOff();

    this.ctx.restore();
  }

  show(callBack = null) {
    // console.log(' in show ');
    this.visible = true;
    // this.alpha = 0;

    const tween = new TWEEN.Tween(this)
      .to({ alpha: 1 }, 800)
      // .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
704
      .onComplete(function () {
limingzhe's avatar
limingzhe committed
705 706 707 708 709 710 711 712 713 714
        if (callBack) {
          callBack();
        }
      })
      .start(); // Start the tween immediately.
  }

  drawText() {
    // console.log('in drawText', this.text);

715 716 717
    if (!this.text) {
      return;
    }
limingzhe's avatar
limingzhe committed
718 719 720

    this.ctx.font = `${this.fontSize}px ${this.fontName}`;
    this.ctx.textAlign = this.textAlign;
721
    this.ctx.textBaseline = "middle";
limingzhe's avatar
limingzhe committed
722 723 724
    this.ctx.fontWeight = 900;

    this.ctx.lineWidth = 5;
725
    this.ctx.strokeStyle = "#ffffff";
limingzhe's avatar
limingzhe committed
726 727
    // this.ctx.strokeText(this.text, 0, 0);

728
    this.ctx.fillStyle = "#000000";
limingzhe's avatar
limingzhe committed
729 730 731 732 733 734
    // this.ctx.fillText(this.text, 0, 0);

    let curX = 0;
    for (let i = 0; i < this.textArr.length; i++) {
      const w = this.ctx.measureText(this.textArr[i]).width;

735 736
      if ((i + 1) % 2 == 0) {
        this.ctx.fillStyle = "#c8171e";
limingzhe's avatar
limingzhe committed
737
      } else {
738
        this.ctx.fillStyle = "#000000";
limingzhe's avatar
limingzhe committed
739 740 741 742 743 744 745 746 747
      }

      this.ctx.fillText(this.textArr[i], curX, 0);
      curX += w;
    }
  }
}

export class RichText extends Label {
748
  disH = 30;
limingzhe's avatar
limingzhe committed
749

750
  constructor(ctx = null) {
limingzhe's avatar
limingzhe committed
751 752 753 754 755 756 757 758 759 760 761 762
    super(ctx);

    // this.dataArr = dataArr;
  }

  drawText() {
    if (!this.text) {
      return;
    }

    this.ctx.font = `${this.fontSize}px ${this.fontName}`;
    this.ctx.textAlign = this.textAlign;
763
    this.ctx.textBaseline = "middle";
limingzhe's avatar
limingzhe committed
764 765 766 767 768
    this.ctx.fontWeight = this.fontWeight;
    this.ctx.fillStyle = this.fontColor;

    const selfW = this.width * this.scaleX;

769 770
    const chr = this.text.split(" ");
    let temp = "";
limingzhe's avatar
limingzhe committed
771 772 773 774
    const row = [];
    const w = selfW - 80;
    const disH = (this.fontSize + this.disH) * this.scaleY;

775 776 777 778 779 780
    for (let a = 0; a < chr.length; a++) {
      if (
        this.ctx.measureText(temp).width < w &&
        this.ctx.measureText(temp + chr[a]).width <= w
      ) {
        temp += " " + chr[a];
limingzhe's avatar
limingzhe committed
781 782
      } else {
        row.push(temp);
783
        temp = " " + chr[a];
limingzhe's avatar
limingzhe committed
784 785 786 787 788
      }
    }
    row.push(temp);

    const x = 0;
789
    const y = (-row.length * disH) / 2;
limingzhe's avatar
limingzhe committed
790 791 792 793 794 795 796
    // for (let b = 0 ; b < row.length; b++) {
    //   this.ctx.strokeText(row[b], x, y + ( b + 1 ) * disH ); // 每行字体y坐标间隔20
    // }

    if (this._outlineFlag) {
      this.ctx.lineWidth = this._outLineWidth;
      this.ctx.strokeStyle = this._outLineColor;
797 798
      for (let b = 0; b < row.length; b++) {
        this.ctx.strokeText(row[b], x, y + (b + 1) * disH); // 每行字体y坐标间隔20
limingzhe's avatar
limingzhe committed
799 800 801 802 803
      }
      // this.ctx.strokeText(this.text, 0, 0);
    }

    // this.ctx.fillStyle = '#ff7600';
804 805
    for (let b = 0; b < row.length; b++) {
      this.ctx.fillText(row[b], x, y + (b + 1) * disH); // 每行字体y坐标间隔20
limingzhe's avatar
limingzhe committed
806 807 808 809 810 811 812
    }
  }

  drawSelf() {
    super.drawSelf();
    this.drawText();
  }
liujiaxin's avatar
liujiaxin committed
813
}
limingzhe's avatar
limingzhe committed
814 815

export class ShapeRect extends MySprite {
816
  fillColor = "#FF0000";
limingzhe's avatar
limingzhe committed
817 818 819 820 821 822 823 824 825 826 827 828 829 830 831 832 833 834 835 836 837

  setSize(w, h) {
    this.width = w;
    this.height = h;

    // console.log('w:', w);
    // console.log('h:', h);
  }

  drawShape() {
    this.ctx.fillStyle = this.fillColor;
    this.ctx.fillRect(this._offX, this._offY, this.width, this.height);
  }

  drawSelf() {
    super.drawSelf();
    this.drawShape();
  }
}

export class ShapeCircle extends MySprite {
838
  fillColor = "#FFFF00";
limingzhe's avatar
limingzhe committed
839
  radius = 0;
840 841 842 843 844 845 846 847 848
  startRadian = 0;
  endRadian = 180;
  strokeLineWidth = 5;
  strokeColor = "#702dee";
  drawType = "fill"
  counterclockwise = false; // false 逆时针 true 顺时针
  shadowColor = "rgba(0,0,0,0)"
  shadowOffsetX = 0;
  shadowOffsetY = 0;
limingzhe's avatar
limingzhe committed
849 850 851 852 853 854 855 856 857

  setRadius(r) {
    this.anchorX = this.anchorY = 0.5;
    this.radius = r;
    this.width = r * 2;
    this.height = r * 2;
  }

  drawShape() {
858 859 860 861 862 863 864 865 866 867 868 869 870 871 872 873 874
    switch (this.drawType) {
      case "stroke":
        this.ctx.beginPath();
        this.ctx.strokeStyle = this.strokeColor;
        this.ctx.lineWidth = this.strokeLineWidth
        this.ctx.arc(0, 0, this.radius, this.startRadian, this.endRadian, this.counterclockwise);
        this.ctx.stroke()
        break;
      default:
        this.ctx.beginPath();
        this.ctx.fillStyle = this.fillColor;
        this.ctx.arc(0, 0, this.radius, this.startRadian, this.endRadian);
        this.ctx.shadowColor = this.shadowColor
        this.ctx.shadowOffsetX = this.shadowOffsetX
        this.ctx.shadowOffsetY = this.shadowOffsetY
        this.ctx.fill();
        break;
875 876 877 878 879 880 881 882 883
    }

  }

  drawSelf() {
    super.drawSelf();
    this.drawShape();
  }
}
limingzhe's avatar
limingzhe committed
884

885
export class MyAnimation extends MySprite {
limingzhe's avatar
limingzhe committed
886 887 888 889 890 891 892 893 894 895 896 897 898 899 900 901 902 903 904 905 906 907 908 909 910 911 912 913 914 915 916 917 918 919 920 921 922 923 924
  frameArr = [];
  frameIndex = 0;
  playFlag = false;
  lastDateTime;
  curDelay = 0;

  loop = false;
  playEndFunc;
  delayPerUnit = 1;

  restartFlag = false;
  reverseFlag = false;

  addFrameByImg(img) {
    const spr = new MySprite(this.ctx);
    spr.init(img);
    this._refreshSize(img);

    spr.visible = false;

    this.addChild(spr);
    this.frameArr.push(spr);

    this.frameArr[this.frameIndex].visible = true;
  }

  addFrameByUrl(url) {
    const spr = new MySprite(this.ctx);
    spr.load(url).then(img => {
      this._refreshSize(img);
    });
    spr.visible = false;

    this.addChild(spr);
    this.frameArr.push(spr);

    this.frameArr[this.frameIndex].visible = true;
  }

925 926 927
  _refreshSize(img) {
    if (this.width < img["width"]) {
      this.width = img["width"];
limingzhe's avatar
limingzhe committed
928
    }
929 930
    if (this.height < img["height"]) {
      this.height = img["height"];
limingzhe's avatar
limingzhe committed
931 932 933 934 935 936 937 938 939 940 941 942 943 944 945 946 947 948 949 950 951 952 953 954
    }
  }

  play() {
    this.playFlag = true;
    this.lastDateTime = new Date().getTime();
  }

  stop() {
    this.playFlag = false;
  }

  replay() {
    this.restartFlag = true;
    this.play();
  }

  reverse() {
    this.reverseFlag = !this.reverseFlag;
    this.frameArr.reverse();
    this.frameIndex = 0;
  }

  showAllFrame() {
955 956
    for (let i = 0; i < this.frameArr.length; i++) {
      this.frameArr[i].alpha = 1;
limingzhe's avatar
limingzhe committed
957 958 959 960
    }
  }

  hideAllFrame() {
961 962
    for (let i = 0; i < this.frameArr.length; i++) {
      this.frameArr[i].alpha = 0;
limingzhe's avatar
limingzhe committed
963 964 965 966 967 968 969 970 971 972 973 974 975 976 977 978 979 980 981 982
    }
  }

  playEnd() {
    this.playFlag = false;
    this.curDelay = 0;

    this.frameArr[this.frameIndex].visible = true;

    if (this.playEndFunc) {
      this.playEndFunc();
      this.playEndFunc = null;
    }
  }

  updateFrame() {
    if (this.frameArr[this.frameIndex]) {
      this.frameArr[this.frameIndex].visible = false;
    }

983
    this.frameIndex++;
limingzhe's avatar
limingzhe committed
984 985 986 987 988 989 990
    if (this.frameIndex >= this.frameArr.length) {
      if (this.loop) {
        this.frameIndex = 0;
      } else if (this.restartFlag) {
        this.restartFlag = false;
        this.frameIndex = 0;
      } else {
991
        this.frameIndex--;
limingzhe's avatar
limingzhe committed
992 993 994 995 996 997 998 999 1000 1001 1002 1003 1004 1005 1006 1007 1008 1009
        this.playEnd();
        return;
      }
    }

    this.frameArr[this.frameIndex].visible = true;
  }

  _updateDelay(delay) {
    this.curDelay += delay;
    if (this.curDelay < this.delayPerUnit) {
      return;
    }
    this.curDelay -= this.delayPerUnit;
    this.updateFrame();
  }

  _updateLastDate() {
1010 1011 1012
    if (!this.playFlag) {
      return;
    }
limingzhe's avatar
limingzhe committed
1013 1014 1015 1016 1017 1018 1019 1020 1021 1022 1023 1024 1025 1026 1027 1028 1029

    let delay = 0;
    if (this.lastDateTime) {
      delay = (new Date().getTime() - this.lastDateTime) / 1000;
    }
    this.lastDateTime = new Date().getTime();
    this._updateDelay(delay);
  }

  update($event: any = null) {
    super.update($event);
    this._updateLastDate();
  }
}

// --------===========  util func  =============-------------

1030 1031 1032 1033 1034 1035 1036 1037
export function tweenChange(
  item,
  obj,
  time = 0.8,
  callBack = null,
  easing = null,
  update = null
) {
limingzhe's avatar
limingzhe committed
1038 1039 1040 1041 1042 1043 1044 1045 1046 1047 1048
  const tween = new TWEEN.Tween(item).to(obj, time * 1000);

  if (callBack) {
    tween.onComplete(() => {
      callBack();
    });
  }
  if (easing) {
    tween.easing(easing);
  }
  if (update) {
1049
    tween.onUpdate((a, b) => {
liujiaxin's avatar
liujiaxin committed
1050
      update(a, b);
limingzhe's avatar
limingzhe committed
1051 1052 1053 1054 1055 1056 1057
    });
  }

  tween.start();
  return tween;
}

1058 1059 1060 1061 1062 1063 1064
export function rotateItem(
  item,
  rotation,
  time = 0.8,
  callBack = null,
  easing = null
) {
limingzhe's avatar
limingzhe committed
1065 1066 1067 1068 1069 1070 1071 1072 1073 1074 1075 1076 1077 1078
  const tween = new TWEEN.Tween(item).to({ rotation }, time * 1000);

  if (callBack) {
    tween.onComplete(() => {
      callBack();
    });
  }
  if (easing) {
    tween.easing(easing);
  }

  tween.start();
}

1079 1080 1081 1082 1083 1084 1085 1086 1087 1088 1089
export function scaleItem(
  item,
  scale,
  time = 0.8,
  callBack = null,
  easing = null
) {
  const tween = new TWEEN.Tween(item).to(
    { scaleX: scale, scaleY: scale },
    time * 1000
  );
limingzhe's avatar
limingzhe committed
1090 1091 1092 1093 1094 1095 1096 1097 1098 1099 1100 1101 1102 1103

  if (callBack) {
    tween.onComplete(() => {
      callBack();
    });
  }
  if (easing) {
    tween.easing(easing);
  }

  tween.start();
  return tween;
}

1104 1105 1106 1107 1108 1109 1110 1111 1112
export function moveItem(
  item,
  x,
  y,
  time = 0.8,
  callBack = null,
  easing = null
) {
  const tween = new TWEEN.Tween(item).to({ x, y }, time * 1000);
limingzhe's avatar
limingzhe committed
1113 1114 1115

  if (callBack) {
    tween.onComplete(() => {
liujiaxin's avatar
liujiaxin committed
1116
      callBack();
limingzhe's avatar
limingzhe committed
1117 1118 1119 1120 1121 1122 1123 1124 1125 1126 1127 1128 1129 1130 1131 1132 1133 1134
    });
  }
  if (easing) {
    tween.easing(easing);
  }

  tween.start();

  return tween;
}

export function endShow(item, s = 1) {
  item.scaleX = item.scaleY = 0;
  item.alpha = 0;

  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.
1135
    .onComplete(function () { })
limingzhe's avatar
limingzhe committed
1136 1137 1138 1139
    .start();
}

export function hideItem(item, time = 0.8, callBack = null, easing = null) {
1140
  if (item.alpha == 0) {
limingzhe's avatar
limingzhe committed
1141 1142 1143 1144
    return;
  }

  const tween = new TWEEN.Tween(item)
1145
    .to({ alpha: 0 }, time * 1000)
limingzhe's avatar
limingzhe committed
1146
    // .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
1147
    .onComplete(function () {
limingzhe's avatar
limingzhe committed
1148 1149 1150 1151 1152 1153 1154 1155 1156 1157 1158 1159 1160
      if (callBack) {
        callBack();
      }
    });

  if (easing) {
    tween.easing(easing);
  }

  tween.start();
}

export function showItem(item, time = 0.8, callBack = null, easing = null) {
1161
  if (item.alpha == 1) {
limingzhe's avatar
limingzhe committed
1162 1163 1164 1165 1166 1167 1168 1169
    if (callBack) {
      callBack();
    }
    return;
  }

  item.visible = true;
  const tween = new TWEEN.Tween(item)
1170
    .to({ alpha: 1 }, time * 1000)
limingzhe's avatar
limingzhe committed
1171
    // .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
1172
    .onComplete(function () {
limingzhe's avatar
limingzhe committed
1173 1174 1175 1176 1177 1178 1179 1180 1181 1182 1183 1184
      if (callBack) {
        callBack();
      }
    });

  if (easing) {
    tween.easing(easing);
  }

  tween.start();
}

1185 1186 1187 1188 1189 1190 1191
export function alphaItem(
  item,
  alpha,
  time = 0.8,
  callBack = null,
  easing = null
) {
limingzhe's avatar
limingzhe committed
1192
  const tween = new TWEEN.Tween(item)
1193
    .to({ alpha: alpha }, time * 1000)
limingzhe's avatar
limingzhe committed
1194
    // .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
1195
    .onComplete(function () {
limingzhe's avatar
limingzhe committed
1196 1197 1198 1199 1200 1201 1202 1203 1204 1205 1206 1207 1208 1209
      if (callBack) {
        callBack();
      }
    });

  if (easing) {
    tween.easing(easing);
  }

  tween.start();
}

export function showStar(item, time = 0.8, callBack = null, easing = null) {
  const tween = new TWEEN.Tween(item)
1210
    .to({ alpha: 1, scale: 1 }, time * 1000)
limingzhe's avatar
limingzhe committed
1211
    // .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
1212
    .onComplete(function () {
limingzhe's avatar
limingzhe committed
1213 1214 1215 1216 1217 1218 1219 1220 1221 1222 1223 1224 1225 1226 1227 1228
      if (callBack) {
        callBack();
      }
    });

  if (easing) {
    tween.easing(easing);
  }

  tween.start();
}

export function randomSortByArr(arr) {
  const newArr = [];
  const tmpArr = arr.concat();
  while (tmpArr.length > 0) {
1229
    const randomIndex = Math.floor(tmpArr.length * Math.random());
limingzhe's avatar
limingzhe committed
1230 1231 1232 1233 1234 1235 1236
    newArr.push(tmpArr[randomIndex]);
    tmpArr.splice(randomIndex, 1);
  }
  return newArr;
}

export function radianToAngle(radian) {
1237
  return (radian * 180) / Math.PI;
limingzhe's avatar
limingzhe committed
1238 1239 1240 1241
  // 角度 = 弧度 * 180 / Math.PI;
}

export function angleToRadian(angle) {
1242
  return (angle * Math.PI) / 180;
limingzhe's avatar
limingzhe committed
1243 1244 1245 1246
  // 弧度= 角度 * Math.PI / 180;
}

export function getPosByAngle(angle, len) {
1247
  const radian = (angle * Math.PI) / 180;
limingzhe's avatar
limingzhe committed
1248 1249 1250
  const x = Math.sin(radian) * len;
  const y = Math.cos(radian) * len;

1251
  return { x, y };
limingzhe's avatar
limingzhe committed
1252 1253 1254 1255 1256 1257 1258 1259 1260
}

export function getAngleByPos(px, py, mx, my) {
  const x = Math.abs(px - mx);
  const y = Math.abs(py - my);

  const z = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
  const cos = y / z;
  const radina = Math.acos(cos); // 用反三角函数求弧度
1261
  let angle = Math.floor((180 / (Math.PI / radina)) * 100) / 100; // 将弧度转换成角度
limingzhe's avatar
limingzhe committed
1262

1263 1264
  if (mx > px && my > py) {
    // 鼠标在第四象限
limingzhe's avatar
limingzhe committed
1265 1266
    angle = 180 - angle;
  }
1267 1268
  if (mx === px && my > py) {
    // 鼠标在y轴负方向上
limingzhe's avatar
limingzhe committed
1269 1270
    angle = 180;
  }
1271 1272
  if (mx > px && my === py) {
    // 鼠标在x轴正方向上
limingzhe's avatar
limingzhe committed
1273 1274
    angle = 90;
  }
1275 1276
  if (mx < px && my > py) {
    // 鼠标在第三象限
limingzhe's avatar
limingzhe committed
1277 1278
    angle = 180 + angle;
  }
1279 1280
  if (mx < px && my === py) {
    // 鼠标在x轴负方向
limingzhe's avatar
limingzhe committed
1281 1282
    angle = 270;
  }
1283 1284
  if (mx < px && my < py) {
    // 鼠标在第二象限
limingzhe's avatar
limingzhe committed
1285 1286 1287 1288 1289 1290 1291 1292 1293
    angle = 360 - angle;
  }

  // console.log('angle: ', angle);
  return angle;
}

export function removeItemFromArr(arr, item) {
  const index = arr.indexOf(item);
1294
  if (index != -1) {
limingzhe's avatar
limingzhe committed
1295 1296 1297 1298
    arr.splice(index, 1);
  }
}

1299 1300 1301 1302 1303 1304 1305 1306 1307 1308 1309
export function circleMove(
  item,
  x0,
  y0,
  time = 2,
  addR = 360,
  xPer = 1,
  yPer = 1,
  callBack = null,
  easing = null
) {
limingzhe's avatar
limingzhe committed
1310 1311 1312
  const r = getPosDistance(item.x, item.y, x0, y0);
  let a = getAngleByPos(item.x, item.y, x0, y0);
  a += 90;
1313
  const obj = { r, a };
limingzhe's avatar
limingzhe committed
1314 1315 1316 1317

  item._circleAngle = a;
  const targetA = a + addR;

1318 1319 1320 1321
  const tween = new TWEEN.Tween(item).to(
    { _circleAngle: targetA },
    time * 1000
  );
limingzhe's avatar
limingzhe committed
1322 1323 1324 1325 1326 1327 1328 1329 1330 1331

  if (callBack) {
    tween.onComplete(() => {
      callBack();
    });
  }
  if (easing) {
    tween.easing(easing);
  }

1332
  tween.onUpdate((item, progress) => {
limingzhe's avatar
limingzhe committed
1333 1334 1335 1336
    // console.log(item._circleAngle);
    const r = obj.r;
    const a = item._circleAngle;

1337 1338
    const x = x0 + r * xPer * Math.cos((a * Math.PI) / 180);
    const y = y0 + r * yPer * Math.sin((a * Math.PI) / 180);
limingzhe's avatar
limingzhe committed
1339 1340 1341 1342 1343 1344 1345 1346 1347 1348

    item.x = x;
    item.y = y;

    // obj.a ++;
  });

  tween.start();
}

liujiaxin's avatar
liujiaxin committed
1349 1350 1351
export function getPosDistance(sx, sy, ex, ey) {
  const _x = ex - sx;
  const _y = ey - sy;
1352
  const len = Math.sqrt(Math.pow(_x, 2) + Math.pow(_y, 2));
liujiaxin's avatar
liujiaxin committed
1353 1354
  return len;
}
limingzhe's avatar
limingzhe committed
1355 1356 1357 1358 1359 1360 1361 1362 1363 1364 1365 1366 1367 1368 1369 1370 1371 1372 1373 1374 1375 1376 1377 1378 1379 1380 1381 1382 1383 1384 1385 1386 1387 1388 1389

export function delayCall(callback, second) {
  const tween = new TWEEN.Tween(this)
    .delay(second * 1000)
    .onComplete(() => {
      if (callback) {
        callback();
      }
    })
    .start();
}

export function getMinScale(item, maxLen) {
  const sx = maxLen / item.width;
  const sy = maxLen / item.height;
  const minS = Math.min(sx, sy);
  return minS;
}

export function jelly(item, time = 0.7) {
  if (item.jellyTween) {
    TWEEN.remove(item.jellyTween);
  }

  const t = time / 9;
  const baseSX = item.scaleX;
  const baseSY = item.scaleY;
  let index = 0;

  const run = () => {
    if (index >= arr.length) {
      item.jellyTween = null;
      return;
    }
    const data = arr[index];
1390 1391 1392 1393 1394 1395 1396 1397 1398 1399
    const t = tweenChange(
      item,
      { scaleX: data[0], scaleY: data[1] },
      data[2],
      () => {
        index++;
        run();
      },
      TWEEN.Easing.Sinusoidal.InOut
    );
limingzhe's avatar
limingzhe committed
1400 1401 1402 1403 1404 1405 1406 1407
    item.jellyTween = t;
  };

  const arr = [
    [baseSX * 1.1, baseSY * 0.9, t],
    [baseSX * 0.98, baseSY * 1.02, t * 2],
    [baseSX * 1.02, baseSY * 0.98, t * 2],
    [baseSX * 0.99, baseSY * 1.01, t * 2],
1408
    [baseSX * 1.0, baseSY * 1.0, t * 2]
limingzhe's avatar
limingzhe committed
1409 1410 1411 1412 1413
  ];

  run();
}

1414 1415 1416 1417 1418 1419 1420 1421 1422 1423 1424 1425
/**
 * 烟花爆炸效果动画
 * @param img 颗粒的图片
 * @param pos 爆点的坐标
 * @param parent 必须传一个父类
 */
export function showPopParticle(img, pos, parent) {
  const num = 20;
  const maxLen = 100;
  const minLen = 40;

  for (let i = 0; i < num; i++) {
limingzhe's avatar
limingzhe committed
1426 1427 1428 1429 1430 1431 1432 1433 1434
    const particle = new MySprite();
    particle.init(img);
    particle.x = pos.x;
    particle.y = pos.y;
    parent.addChild(particle);

    const randomR = 360 * Math.random();
    particle.rotation = randomR;

1435 1436
    const randomS = 0.5 + Math.random() * 0.5;
    particle.setScaleXY(randomS);
limingzhe's avatar
limingzhe committed
1437 1438 1439 1440 1441 1442 1443

    const randomX = Math.random() * 20 - 10;
    particle.x += randomX;

    const randomY = Math.random() * 20 - 10;
    particle.y += randomY;

1444
    const randomL = minLen + Math.random() * maxLen;
limingzhe's avatar
limingzhe committed
1445 1446
    const randomA = 360 * Math.random();
    const randomT = getPosByAngle(randomA, randomL);
1447 1448 1449 1450 1451 1452 1453 1454
    moveItem(
      particle,
      particle.x + randomT.x,
      particle.y + randomT.y,
      0.4,
      () => { },
      TWEEN.Easing.Exponential.Out
    );
limingzhe's avatar
limingzhe committed
1455

1456
    scaleItem(particle, 0, 0.6, () => { });
limingzhe's avatar
limingzhe committed
1457 1458 1459 1460 1461 1462 1463 1464 1465 1466 1467 1468 1469 1470 1471 1472
  }
}

export function shake(item, time = 0.5, callback = null, rate = 1) {
  if (item.shakeTween) {
    return;
  }

  item.shakeTween = true;
  const offX = 15 * item.scaleX * rate;
  const offY = 15 * item.scaleX * rate;
  const baseX = item.x;
  const baseY = item.y;
  const easing = TWEEN.Easing.Sinusoidal.InOut;

  const move4 = () => {
1473 1474 1475 1476 1477 1478 1479 1480 1481 1482 1483 1484 1485
    moveItem(
      item,
      baseX,
      baseY,
      time / 4,
      () => {
        item.shakeTween = false;
        if (callback) {
          callback();
        }
      },
      easing
    );
limingzhe's avatar
limingzhe committed
1486 1487 1488
  };

  const move3 = () => {
1489 1490 1491 1492 1493 1494 1495 1496 1497 1498
    moveItem(
      item,
      baseX + offX / 4,
      baseY + offY / 4,
      time / 4,
      () => {
        move4();
      },
      easing
    );
limingzhe's avatar
limingzhe committed
1499 1500 1501
  };

  const move2 = () => {
1502 1503 1504 1505 1506 1507 1508 1509 1510 1511
    moveItem(
      item,
      baseX - (offX / 4) * 3,
      baseY - (offY / 4) * 3,
      time / 4,
      () => {
        move3();
      },
      easing
    );
limingzhe's avatar
limingzhe committed
1512 1513 1514
  };

  const move1 = () => {
1515 1516 1517 1518 1519 1520 1521 1522 1523 1524
    moveItem(
      item,
      baseX + offX,
      baseY + offY,
      time / 8,
      () => {
        move2();
      },
      easing
    );
limingzhe's avatar
limingzhe committed
1525 1526 1527 1528 1529 1530
  };

  move1();
}

// --------------- custom class --------------------
1531 1532 1533 1534 1535 1536 1537 1538 1539 1540 1541 1542 1543 1544 1545 1546 1547 1548 1549 1550 1551 1552 1553 1554 1555 1556 1557 1558 1559 1560 1561 1562 1563 1564 1565 1566 1567 1568 1569 1570
export function showBlingBling(starImg, rectArea, parent, mapScale = 1, num = 30, disTime = 0.1, showTime = 3) {
  const timeId = setInterval(() => {
    showBlingStar(starImg, num, rectArea, parent, mapScale);
  }, disTime * 1000);
  setTimeout(() => {
    clearInterval(timeId);
  }, showTime * 1000);

}

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;
    star.x = px;
    star.y = py;

    const randomS = (0.1 + Math.random() * 0.8) * mapScale;
    star.setScaleXY(1);

    parent.addChild(star);


    scaleItem(star, randomS, 0.3, () => {

      setTimeout(() => {

        scaleItem(star, 0, 0.3, () => {
          parent.removeChild(star);
        });

      }, 100 + Math.random() * 200);
    });

  }

limingzhe's avatar
limingzhe committed
1571

1572
}