From eadcabdc0ab3d9994b30f29a0bcfbb1a90eb78dc Mon Sep 17 00:00:00 2001 From: ljx0517 <ljx0517@gmail.com> Date: Wed, 26 Feb 2020 13:52:49 +0800 Subject: [PATCH] fix ts error, upgrade lastest unit.ts --- src/app/play/Unit.ts | 232 +++++++++++++++++++++++++++++-------------- 1 file changed, 155 insertions(+), 77 deletions(-) diff --git a/src/app/play/Unit.ts b/src/app/play/Unit.ts index 0903803..4a84782 100644 --- a/src/app/play/Unit.ts +++ b/src/app/play/Unit.ts @@ -1,7 +1,11 @@ import TWEEN from '@tweenjs/tween.js'; - +interface AirWindow extends Window { + air: any; + curCtx: any; +} +declare let window: AirWindow; class Sprite { x = 0; @@ -15,7 +19,7 @@ class Sprite { constructor(ctx = null) { if (!ctx) { - this.ctx = (window as any).curCtx; + this.ctx = window.curCtx; } else { this.ctx = ctx; } @@ -66,7 +70,7 @@ export class MySprite extends Sprite { _z = 0; - init(imgObj = null, anchorX:number = 0.5, anchorY:number = 0.5) { + init(imgObj = null, anchorX: number = 0.5, anchorY: number = 0.5) { if (imgObj) { @@ -184,16 +188,13 @@ export class MySprite extends Sprite { if (this.children.length <= 0) { return; } - for (let i = 0; i < this.children.length; i++) { - - if (this.children[i] === this) { - + for (const child of this.children) { + if (child === this) { if (this.visible) { this.drawSelf(); } } else { - - this.children[i].update(); + child.update(); } } } @@ -240,7 +241,7 @@ export class MySprite extends Sprite { removeChildren() { for (let i = 0; i < this.children.length; i++) { if (this.children[i]) { - if (this.children[i] != this) { + if (this.children[i] !== this) { this.children.splice(i, 1); i --; } @@ -249,9 +250,9 @@ export class MySprite extends Sprite { } _changeChildAlpha(alpha) { - for (let i = 0; i < this.children.length; i++) { - if (this.children[i] != this) { - this.children[i].alpha = alpha; + for (const child of this.children) { + if (child !== this) { + child.alpha = alpha; } } } @@ -362,7 +363,7 @@ export class ColorSpr extends MySprite { g = 0; b = 0; - createGSCanvas(){ + createGSCanvas() { if (!this.img) { return; @@ -377,8 +378,8 @@ export class ColorSpr extends MySprite { 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++){ + for ( let i = 0; i < c.height; i++) { + for ( let j = 0; j < c.width; j++) { const x = (i * 4) * c.width + ( j * 4 ); const r = c.data[x]; @@ -412,7 +413,7 @@ export class GrayscaleSpr extends MySprite { grayScale = 120; - createGSCanvas(){ + createGSCanvas() { if (!this.img) { return; @@ -423,8 +424,8 @@ 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++){ + for ( let i = 0; i < c.height; i++) { + for ( let j = 0; j < c.width; j++) { const x = (i * 4) * c.width + ( j * 4 ); const r = c.data[x]; @@ -467,10 +468,10 @@ export class BitMapLabel extends MySprite { const tmpArr = text.split(''); let totalW = 0; let h = 0; - for (let i = 0; i < tmpArr.length; i++) { + for (const tmp of tmpArr) { const label = new MySprite(this.ctx); - label.init(data[tmpArr[i]], 0); + label.init(data[tmp], 0); this.addChild(label); labelArr.push(label); @@ -483,9 +484,9 @@ export class BitMapLabel extends MySprite { this.height = h; let offX = -totalW / 2; - for (let i = 0; i < labelArr.length; i++) { - labelArr[i].x = offX; - offX += labelArr[i].width; + for (const label of labelArr) { + label.x = offX; + offX += label.width; } this.labelArr = labelArr; @@ -498,10 +499,10 @@ export class BitMapLabel extends MySprite { export class Label extends MySprite { - text: String; + text: string; // fontSize:String = '40px'; - fontName: String = 'Verdana'; - textAlign: String = 'left'; + fontName = 'Verdana'; + textAlign = 'left'; fontSize = 40; fontColor = '#000000'; fontWeight = 900; @@ -563,7 +564,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(() => { if (callBack) { callBack(); } @@ -649,11 +650,10 @@ export class RichTextOld extends Label { textArr = []; fontSize = 40; - setText(text:string, words) { + setText(text: string, words) { let newText = text; - for (let i = 0; i < words.length; i++) { - const word = words[i]; + for (const word of words) { const re = new RegExp(word, 'g'); newText = newText.replace( re, `#${word}#`); @@ -676,8 +676,8 @@ export class RichTextOld extends Label { this.ctx.fontWeight = this.fontWeight; let curX = 0; - for (let i = 0; i < this.textArr.length; i++) { - const w = this.ctx.measureText(this.textArr[i]).width; + for (const text of this.textArr) { + const w = this.ctx.measureText(text).width; curX += w; } @@ -699,7 +699,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(() => { if (callBack) { callBack(); } @@ -735,7 +735,7 @@ export class RichTextOld extends Label { const w = this.ctx.measureText(this.textArr[i]).width; - if ((i + 1) % 2 == 0) { + if ((i + 1) % 2 === 0) { this.ctx.fillStyle = '#c8171e'; } else { this.ctx.fillStyle = '#000000'; @@ -760,7 +760,7 @@ export class RichText extends Label { disH = 30; - constructor(ctx) { + constructor(ctx?: any) { super(ctx); // this.dataArr = dataArr; @@ -794,12 +794,12 @@ export class RichText extends Label { - 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]; + for (const c of chr) { + if (this.ctx.measureText(temp).width < w && this.ctx.measureText(temp + (c)).width <= w) { + temp += ' ' + c; } else { row.push(temp); - temp = ' ' + chr[a]; + temp = ' ' + c; } } row.push(temp); @@ -841,7 +841,7 @@ export class RichText extends Label { export class LineRect extends MySprite { - lineColor = "#ffffff"; + lineColor = '#ffffff'; lineWidth = 10; setSize(w, h) { @@ -931,7 +931,83 @@ export class ShapeCircle extends MySprite { } } +export class ShapeRectNew extends MySprite { + + + 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(); + + } + + + drawSelf() { + super.drawSelf(); + this.drawShape(); + } + +} export class MyAnimation extends MySprite { @@ -978,13 +1054,13 @@ export class MyAnimation extends MySprite { this.frameArr[this.frameIndex].visible = true; } - _refreshSize(img) { + _refreshSize(img: any) { - if (this.width < img['width']) { - this.width = img['width']; + if (this.width < img.width) { + this.width = img.width; } - if (this.height < img['height']) { - this.height = img['height']; + if (this.height < img.height) { + this.height = img.height; } } @@ -1013,14 +1089,14 @@ export class MyAnimation extends MySprite { } showAllFrame() { - for (let i = 0; i < this.frameArr.length; i++) { - this.frameArr[i].alpha = 1; + for (const frame of this.frameArr ) { + frame.alpha = 1; } } hideAllFrame() { - for (let i = 0; i < this.frameArr.length; i++) { - this.frameArr[i].alpha = 0; + for (const frame of this.frameArr) { + frame.alpha = 0; } } @@ -1192,7 +1268,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(() => { }) .start(); @@ -1200,14 +1276,14 @@ export function endShow(item, s = 1) { export function hideItem(item, time = 0.8, callBack = null, easing = null) { - if (item.alpha == 0) { + if (item.alpha === 0) { return; } 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(() => { if (callBack) { callBack(); } @@ -1223,7 +1299,7 @@ export function hideItem(item, time = 0.8, callBack = null, easing = null) { export function showItem(item, time = 0.8, callBack = null, easing = null) { - if (item.alpha == 1) { + if (item.alpha === 1) { if (callBack) { callBack(); } @@ -1234,7 +1310,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(() => { if (callBack) { callBack(); } @@ -1252,9 +1328,9 @@ export function alphaItem(item, alpha, time = 0.8, callBack = null, easing = nul const tween = new TWEEN.Tween(item) - .to({alpha: alpha}, time * 1000) + .to({alpha}, time * 1000) // .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth. - .onComplete(function () { + .onComplete(() => { if (callBack) { callBack(); } @@ -1274,7 +1350,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(() => { if (callBack) { callBack(); } @@ -1330,22 +1406,22 @@ export function getAngleByPos(px, py, mx, my) { const radina = Math.acos(cos); // 用å三角函数求弧度 let angle = Math.floor(180 / (Math.PI / radina) * 100) / 100; // å°†å¼§åº¦è½¬æ¢æˆè§’度 - if(mx > px && my > py) {// é¼ æ ‡åœ¨ç¬¬å››è±¡é™ + if (mx > px && my > py) {// é¼ æ ‡åœ¨ç¬¬å››è±¡é™ angle = 180 - angle; } - if(mx === px && my > py) {// é¼ æ ‡åœ¨yè½´è´Ÿæ–¹å‘上 + if (mx === px && my > py) {// é¼ æ ‡åœ¨yè½´è´Ÿæ–¹å‘上 angle = 180; } - if(mx > px && my === py) {// é¼ æ ‡åœ¨xè½´æ£æ–¹å‘上 + if (mx > px && my === py) {// é¼ æ ‡åœ¨xè½´æ£æ–¹å‘上 angle = 90; } - if(mx < px && my > py) {// é¼ æ ‡åœ¨ç¬¬ä¸‰è±¡é™ + if (mx < px && my > py) {// é¼ æ ‡åœ¨ç¬¬ä¸‰è±¡é™ angle = 180 + angle; } - if(mx < px && my === py) {// é¼ æ ‡åœ¨xè½´è´Ÿæ–¹å‘ + if (mx < px && my === py) {// é¼ æ ‡åœ¨xè½´è´Ÿæ–¹å‘ angle = 270; } - if(mx < px && my < py) {// é¼ æ ‡åœ¨ç¬¬äºŒè±¡é™ + if (mx < px && my < py) {// é¼ æ ‡åœ¨ç¬¬äºŒè±¡é™ angle = 360 - angle; } @@ -1357,7 +1433,7 @@ export function getAngleByPos(px, py, mx, my) { export function removeItemFromArr(arr, item) { const index = arr.indexOf(item); - if (index != -1) { + if (index !== -1) { arr.splice(index, 1); } } @@ -1367,7 +1443,7 @@ export function removeItemFromArr(arr, item) { -export function circleMove(item, x0, y0, time = 2, addR = 360, xPer = 1, yPer = 1, callBack = null, easing = null){ +export function circleMove(item, x0, y0, time = 2, addR = 360, xPer = 1, yPer = 1, callBack = null, easing = null) { const r = getPosDistance(item.x, item.y, x0, y0); let a = getAngleByPos(item.x, item.y, x0, y0); @@ -1432,18 +1508,20 @@ export function formatTime(fmt, date) { // "yyyy-MM-dd HH:mm:ss"; const o = { - "M+": date.getMonth() + 1, // 月份 - "d+": date.getDate(), // æ—¥ - "h+": date.getHours(), // å°æ—¶ - "m+": date.getMinutes(), // 分 - "s+": date.getSeconds(), // ç§’ - "q+": Math.floor((date.getMonth() + 3) / 3), // å£åº¦ - "S": date.getMilliseconds() // 毫秒 + 'M+': date.getMonth() + 1, // 月份 + 'd+': date.getDate(), // æ—¥ + 'h+': date.getHours(), // å°æ—¶ + 'm+': date.getMinutes(), // 分 + 's+': date.getSeconds(), // ç§’ + 'q+': Math.floor((date.getMonth() + 3) / 3), // å£åº¦ + S: date.getMilliseconds() // 毫秒 }; - if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length)); - for (var k in o) - if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) - ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length))); + if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length)); } + for (const k in o) { + if (new RegExp('(' + k + ')').test(fmt)) { fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) + ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length))); + } + } return fmt; } -- 2.21.0