Commit 825a121d authored by limingzhe's avatar limingzhe

feat: 首次提交

parent 3695f7ce
import TWEEN from '@tweenjs/tween.js'; import TWEEN from '@tweenjs/tween.js';
interface AirWindow extends Window {
air: any;
curCtx: any;
}
declare let window: AirWindow;
class Sprite { class Sprite {
x = 0; x = 0;
...@@ -12,9 +17,13 @@ class Sprite { ...@@ -12,9 +17,13 @@ class Sprite {
angle = 0; angle = 0;
ctx; ctx;
constructor(ctx) { constructor(ctx = null) {
if (!ctx) {
this.ctx = window.curCtx;
} else {
this.ctx = ctx; this.ctx = ctx;
} }
}
update($event) { update($event) {
this.draw(); this.draw();
} }
...@@ -30,25 +39,45 @@ class Sprite { ...@@ -30,25 +39,45 @@ class Sprite {
export class MySprite extends Sprite { export class MySprite extends Sprite {
width = 0; _width = 0;
height = 0; _height = 0;
_anchorX = 0; _anchorX = 0;
_anchorY = 0; _anchorY = 0;
_offX = 0; _offX = 0;
_offY = 0; _offY = 0;
scaleX = 1; scaleX = 1;
scaleY = 1; scaleY = 1;
alpha = 1; _alpha = 1;
rotation = 0; rotation = 0;
visible = true; visible = true;
skewX = 0;
skewY = 0;
_shadowFlag = false;
_shadowColor;
_shadowOffsetX = 0;
_shadowOffsetY = 0;
_shadowBlur = 5;
_radius = 0;
children = [this]; children = [this];
childDepandVisible = true;
childDepandAlpha = false;
img; img;
_z = 0; _z = 0;
_showRect;
_bitmapFlag = false;
_offCanvas;
_offCtx;
init(imgObj = null, anchorX:number = 0.5, anchorY:number = 0.5) {
init(imgObj = null, anchorX: number = 0.5, anchorY: number = 0.5) {
if (imgObj) { if (imgObj) {
...@@ -56,6 +85,8 @@ export class MySprite extends Sprite { ...@@ -56,6 +85,8 @@ export class MySprite extends Sprite {
this.width = this.img.width; this.width = this.img.width;
this.height = this.img.height; this.height = this.img.height;
} }
this.anchorX = anchorX; this.anchorX = anchorX;
...@@ -63,11 +94,35 @@ export class MySprite extends Sprite { ...@@ -63,11 +94,35 @@ export class MySprite extends Sprite {
} }
setShowRect(rect) {
this._showRect = rect;
}
setShadow(offX, offY, blur, color = 'rgba(0, 0, 0, 0.3)') {
this._shadowFlag = true;
this._shadowColor = color;
this._shadowOffsetX = offX;
this._shadowOffsetY = offY;
this._shadowBlur = blur;
}
setRadius(r) {
this._radius = r;
}
update($event = null) { update($event = null) {
if (this.visible) { if (!this.visible && this.childDepandVisible) {
this.draw(); return;
} }
this.draw();
} }
draw() { draw() {
...@@ -78,6 +133,8 @@ export class MySprite extends Sprite { ...@@ -78,6 +133,8 @@ export class MySprite extends Sprite {
this.updateChildren(); this.updateChildren();
this.ctx.restore(); this.ctx.restore();
} }
drawInit() { drawInit() {
...@@ -90,26 +147,73 @@ export class MySprite extends Sprite { ...@@ -90,26 +147,73 @@ export class MySprite extends Sprite {
this.ctx.globalAlpha = this.alpha; this.ctx.globalAlpha = this.alpha;
this.ctx.transform(1, this.skewX, this.skewY, 1, 0, 0);
//
// if (this._radius) {
//
// const r = this._radius;
// const w = this.width;
// const h = this.height;
//
// this.ctx.lineTo(-w / 2, h / 2); // 创建水平线
// this.ctx.arcTo(-w / 2, -h / 2, -w / 2 + r, -h / 2, r);
// this.ctx.arcTo(w / 2, -h / 2, w / 2, -h / 2 + r, r);
// this.ctx.arcTo(w / 2, h / 2, w / 2 - r, h / 2, r);
// this.ctx.arcTo(-w / 2, h / 2, -w / 2, h / 2 - r, r);
//
// this.ctx.clip();
// }
} }
drawSelf() { drawSelf() {
if (this._shadowFlag) {
this.ctx.shadowOffsetX = this._shadowOffsetX;
this.ctx.shadowOffsetY = this._shadowOffsetY;
this.ctx.shadowBlur = this._shadowBlur;
this.ctx.shadowColor = this._shadowColor;
} else {
this.ctx.shadowOffsetX = 0;
this.ctx.shadowOffsetY = 0;
this.ctx.shadowBlur = null;
this.ctx.shadowColor = null;
}
if (this.img) { if (this.img) {
if (this._showRect) {
const rect = this._showRect;
this.ctx.drawImage(this.img, rect.x, rect.y, rect.width, rect.height, this._offX, this._offY + rect.y, this.width, rect.height);
} else {
this.ctx.drawImage(this.img, this._offX, this._offY); this.ctx.drawImage(this.img, this._offX, this._offY);
} }
} }
updateChildren() {
if (this.children.length <= 0) { return; }
for (let i = 0; i < this.children.length; i++) {
if (this.children[i] === this) { }
updateChildren() {
if (this.children.length <= 0) { return; }
for (const child of this.children) {
if (child === this) {
if (this.visible) {
this.drawSelf(); this.drawSelf();
}
} else { } else {
child.update();
this.children[i].update();
} }
} }
} }
...@@ -140,6 +244,11 @@ export class MySprite extends Sprite { ...@@ -140,6 +244,11 @@ export class MySprite extends Sprite {
return a._z - b._z; return a._z - b._z;
}); });
if (this.childDepandAlpha) {
child.alpha = this.alpha;
}
} }
removeChild(child) { removeChild(child) {
const index = this.children.indexOf(child); const index = this.children.indexOf(child);
...@@ -148,6 +257,55 @@ export class MySprite extends Sprite { ...@@ -148,6 +257,55 @@ export class MySprite extends Sprite {
} }
} }
removeChildren() {
for (let i = 0; i < this.children.length; i++) {
if (this.children[i]) {
if (this.children[i] !== this) {
this.children.splice(i, 1);
i --;
}
}
}
}
_changeChildAlpha(alpha) {
for (const child of this.children) {
if (child !== this) {
child.alpha = alpha;
}
}
}
set btimapFlag(v) {
this._bitmapFlag = v;
}
get btimapFlag() {
return this._bitmapFlag;
}
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) { set anchorX(value) {
this._anchorX = value; this._anchorX = value;
this.refreshAnchorOff(); this.refreshAnchorOff();
...@@ -163,214 +321,1651 @@ export class MySprite extends Sprite { ...@@ -163,214 +321,1651 @@ export class MySprite extends Sprite {
return this._anchorY; return this._anchorY;
} }
refreshAnchorOff() { refreshAnchorOff() {
this._offX = -this.width * this.anchorX; this._offX = -this._width * this.anchorX;
this._offY = -this.height * this.anchorY; 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};
}
}
export class RoundSprite extends MySprite {
_newCtx;
init(imgObj = null, anchorX: number = 0.5, anchorY: number = 0.5) {
if (imgObj) {
this.img = imgObj;
this.width = this.img.width;
this.height = this.img.height;
}
this.anchorX = anchorX;
this.anchorY = anchorY;
const canvas = window['curCanvas'];
const w = canvas.nativeElement.width;
const h = canvas.nativeElement.height;
this._offCanvas = document.createElement('canvas');
this._offCanvas.width = w;
this._offCanvas.height = h;
this._offCtx = this._offCanvas.getContext('2d');
// this._newCtx = this.ctx;
// this.ctx = this._offCtx;
}
drawSelf() {
//
// if (this._shadowFlag) {
//
// this.ctx.shadowOffsetX = this._shadowOffsetX;
// this.ctx.shadowOffsetY = this._shadowOffsetY;
// this.ctx.shadowBlur = this._shadowBlur;
// this.ctx.shadowColor = this._shadowColor;
// } else {
// this.ctx.shadowOffsetX = 0;
// this.ctx.shadowOffsetY = 0;
// this.ctx.shadowBlur = null;
// this.ctx.shadowColor = null;
// }
if (this._radius) {
const r = this._radius;
const w = this.width;
const h = this.height;
const x = -this._offX;
const y = -this._offY;
this._offCtx.lineTo(x - w / 2, y + h / 2); // 创建水平线
this._offCtx.arcTo(x - w / 2, y - h / 2, x - w / 2 + r, y - h / 2, r);
this._offCtx.arcTo(x + w / 2, y - h / 2, x + w / 2, y - h / 2 + r, r);
this._offCtx.arcTo(x + w / 2, y + h / 2, x + w / 2 - r, y + h / 2, r);
this._offCtx.arcTo(x - w / 2, y + h / 2, x - w / 2, y + h / 2 - r, r);
this._offCtx.clip();
}
if (this.img) {
this._offCtx.drawImage(this.img, 0, 0);
this.ctx.drawImage(this._offCanvas,this._offX, this._offX);
}
}
}
export class ColorSpr extends MySprite {
r = 0;
g = 0;
b = 0;
createGSCanvas() {
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);
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];
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;
// c.data[x] = c.data[x + 1] = c.data[x + 2] = (r + g + b) / 3 ;
// // c.data[x + 3] = 255;
}
}
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;
createGSCanvas() {
if (!this.img) {
return;
}
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++) {
const x = (i * 4) * c.width + ( j * 4 );
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;
}
}
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 = [];
const tmpArr = text.split('');
let totalW = 0;
let h = 0;
for (const tmp of tmpArr) {
const label = new MySprite(this.ctx);
label.init(data[tmp], 0);
this.addChild(label);
labelArr.push(label);
totalW += label.width;
h = label.height;
}
this.width = totalW;
this.height = h;
let offX = -totalW / 2;
for (const label of labelArr) {
label.x = offX;
offX += label.width;
}
this.labelArr = labelArr;
}
}
export class Label extends MySprite {
private _text: string;
// fontSize:String = '40px';
fontName = 'Verdana';
textAlign = 'left';
fontSize = 40;
fontColor = '#000000';
fontWeight = 900;
_maxWidth;
outline = 0;
outlineColor = '#ffffff';
// _shadowFlag = false;
// _shadowColor;
// _shadowOffsetX;
// _shadowOffsetY;
// _shadowBlur;
_outlineFlag = false;
_outLineWidth;
_outLineColor;
constructor(ctx = null) {
super(ctx);
this.init();
}
get text(): string {
return this._text;
}
set text(value: string) {
this._text = value;
this.refreshSize();
}
refreshSize() {
this.ctx.save();
this.ctx.font = `${this.fontSize * this.scaleX}px ${this.fontName}`;
this.ctx.textAlign = this.textAlign;
this.ctx.textBaseline = 'middle';
this.ctx.fontWeight = this.fontWeight;
this._width = this.ctx.measureText(this.text).width;
this._height = this.fontSize;
this.refreshAnchorOff();
this.ctx.restore();
}
setMaxSize(w) {
this._maxWidth = w;
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.
.onComplete(() => {
if (callBack) {
callBack();
}
})
.start(); // Start the tween immediately.
}
setOutline(width = 5, color = '#ffffff') {
this._outlineFlag = true;
this._outLineWidth = width;
this._outLineColor = color;
}
drawText() {
if (!this.text) { return; }
this.ctx.font = `${this.fontSize}px ${this.fontName}`;
this.ctx.textAlign = this.textAlign;
this.ctx.textBaseline = 'middle';
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);
}
this.ctx.fillText(this.text, 0, 0);
}
drawSelf() {
super.drawSelf();
this.drawText();
}
}
export class RichTextOld extends Label {
textArr = [];
fontSize = 40;
setText(text: string, words) {
let newText = text;
for (const word of words) {
const re = new RegExp(word, 'g');
newText = newText.replace( re, `#${word}#`);
// newText = newText.replace(word, `#${word}#`);
}
this.textArr = newText.split('#');
this.text = newText;
// this.setSize();
}
refreshSize() {
this.ctx.save();
this.ctx.font = `${this.fontSize}px ${this.fontName}`;
this.ctx.textAlign = this.textAlign;
this.ctx.textBaseline = 'middle';
this.ctx.fontWeight = this.fontWeight;
let curX = 0;
for (const text of this.textArr) {
const w = this.ctx.measureText(text).width;
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.
.onComplete(() => {
if (callBack) {
callBack();
}
})
.start(); // Start the tween immediately.
}
drawText() {
// console.log('in drawText', this.text);
if (!this.text) { return; }
this.ctx.font = `${this.fontSize}px ${this.fontName}`;
this.ctx.textAlign = this.textAlign;
this.ctx.textBaseline = 'middle';
this.ctx.fontWeight = 900;
this.ctx.lineWidth = 5;
this.ctx.strokeStyle = '#ffffff';
// this.ctx.strokeText(this.text, 0, 0);
this.ctx.fillStyle = '#000000';
// 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;
if ((i + 1) % 2 === 0) {
this.ctx.fillStyle = '#c8171e';
} else {
this.ctx.fillStyle = '#000000';
}
this.ctx.fillText(this.textArr[i], curX, 0);
curX += w;
}
}
}
export class RichText extends Label {
disH = 30;
constructor(ctx?: any) {
super(ctx);
// this.dataArr = dataArr;
}
drawText() {
if (!this.text) {
return;
}
this.ctx.font = `${this.fontSize}px ${this.fontName}`;
this.ctx.textAlign = this.textAlign;
this.ctx.textBaseline = 'middle';
this.ctx.fontWeight = this.fontWeight;
this.ctx.fillStyle = this.fontColor;
const selfW = this.width * this.scaleX;
const chr = this.text.split(' ');
let temp = '';
const row = [];
const w = selfW - 80;
const disH = (this.fontSize + this.disH) * this.scaleY;
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 = ' ' + c;
}
}
row.push(temp);
const x = 0;
const y = -row.length * disH / 2;
// 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;
for (let b = 0 ; b < row.length; b++) {
this.ctx.strokeText(row[b], x, y + ( b + 1 ) * disH ); // 每行字体y坐标间隔20
}
// this.ctx.strokeText(this.text, 0, 0);
}
// this.ctx.fillStyle = '#ff7600';
for (let b = 0 ; b < row.length; b++) {
this.ctx.fillText(row[b], x, y + ( b + 1 ) * disH ); // 每行字体y坐标间隔20
}
}
drawSelf() {
super.drawSelf();
this.drawText();
}
}
export class LineRect extends MySprite {
lineColor = '#ffffff';
lineWidth = 10;
setSize(w, h) {
this.width = w;
this.height = h;
}
drawLine() {
this.ctx.beginPath();
this.ctx.moveTo(this._offX, this._offY);
this.ctx.lineTo(this._offX + this.width, this._offY);
this.ctx.lineTo(this._offX + this.width, this._offY + this.height);
this.ctx.lineTo(this._offX, this._offY + this.height);
this.ctx.closePath();
this.ctx.lineWidth = this.lineWidth;
// this.ctx.fillStyle = "rgb(2,33,42)"; //指定填充颜色
// this.ctx.fill(); //对多边形进行填充
this.ctx.strokeStyle = this.lineColor; // "#ffffff";
this.ctx.stroke();
}
drawSelf() {
super.drawSelf();
this.drawLine();
}
}
export class ShapeRect extends MySprite {
fillColor = '#FF0000';
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 Line extends MySprite {
lineWidth = 5;
lineColor = '#000000';
_pointArr = [];
roundFlag = true;
_pointS = 1;
imgObj;
bitMap;
_offCtx;
_offCanvas;
lastPointIndex = 0;
init() {
const canvas = window['curCanvas'];
const w = canvas.nativeElement.width;
const h = canvas.nativeElement.height;
console.log('w: ', w);
console.log('h: ', h);
this._offCanvas = document.createElement('canvas');
this._offCanvas.width = w;
this._offCanvas.height = h;
// this._offCanvas = _offCanvas;
// this._offCtx = this._offCanvas.getContext('2d');
// this._offCanvas = new OffscreenCanvas(w, h);
this._offCtx = this._offCanvas.getContext('2d');
}
addPoint(x, y) {
this._pointArr.push([x, y]);
if (this._pointArr.length < 2) {
return;
}
//
// const lastP = this._pointArr[this._pointArr.length - 1];
//
//
// const context = this._offCtx;
// context.moveTo (lastP[0], lastP[1]); // 设置起点状态
// context.lineTo (x, y); // 设置末端状态
//
// context.lineWidth = this.lineWidth; //设置线宽状态
// context.strokeStyle = this.lineColor;
// context.stroke();
//
//
// this.bitMap = this._offCanvas.transferToImageBitmap();
// const tmpLine = new MySprite(this._offCtx);
// tmpLine.init(this.imgObj);
// tmpLine.anchorY = 1;
// tmpLine.anchorX = 0.5;
// tmpLine.x = lastP[0];
// tmpLine.y = lastP[1];
//
// const disH = getPosDistance(lastP[0], lastP[1], x, y);
// tmpLine.scaleX = this.lineWidth / tmpLine.width;
// tmpLine.scaleY = disH / tmpLine.height * 1.1;
//
// const angle = getAngleByPos(lastP[0], lastP[1], x, y);
// tmpLine.rotation = angle;
//
// this.addChild(tmpLine);
}
setPointArr(arr, imgObj) {
this.removeChildren();
if (arr.length < 2) {
return;
}
let p1 = arr[0];
let p2;
for (let i = 1; i < arr.length; i++) {
p2 = arr[i];
const tmpLine = new MySprite();
tmpLine.init(imgObj);
tmpLine.anchorY = 1;
tmpLine.anchorX = 0.5;
tmpLine.x = p1[0];
tmpLine.y = p1[1];
const disH = getPosDistance(p1[0], p1[1], p2[0], p2[1]);
tmpLine.scaleX = this.lineWidth / tmpLine.width;
tmpLine.scaleY = disH / tmpLine.height * 1.1;
const angle = getAngleByPos(p1[0], p1[1], p2[0], p2[1]);
tmpLine.rotation = angle;
this.addChild(tmpLine);
p1 = p2;
}
}
drawLine() {
if (this._pointArr.length < 2) {
return;
}
const curMaxPointIndex = this._pointArr.length - 1;
if (curMaxPointIndex > this.lastPointIndex) {
const arr = this._pointArr;
const context = this._offCtx;
context.moveTo (arr[this.lastPointIndex][0] * this._pointS, arr[this.lastPointIndex][1] * this._pointS); // 设置起点状态
for (let i = this.lastPointIndex + 1; i < arr.length; i++) {
context.lineTo (arr[i][0] * this._pointS, arr[i][1] * this._pointS); // 设置末端状态
}
if (this.roundFlag) {
context.lineCap = "round";
}
context.lineWidth = this.lineWidth; //设置线宽状态
context.strokeStyle = this.lineColor;
context.stroke();
this.lastPointIndex = curMaxPointIndex;
// this.bitMap = this._offCanvas.transferToImageBitmap();
}
// this.ctx.drawImage(this.bitMap, this._offX, this._offY);
this.ctx.drawImage(this._offCanvas, this._offX, this._offY);
}
drawSelf() {
super.drawSelf();
this.drawLine();
// if (this.img) {
// this.ctx.drawImage(this._offCanvas, 0, 0, this.width, this.height);
// }
// if (this.bitMap) {
// this.bitMap = this._offCanvas.transferToImageBitmap();
// this.ctx.drawImage(this.bitMap, 0, 0, this.width, this.height);
// }
}
}
export class ShapeCircle extends MySprite {
fillColor = '#FF0000';
radius = 0;
setRadius(r) {
this.anchorX = this.anchorY = 0.5;
this.radius = r;
this.width = r * 2;
this.height = r * 2;
}
drawShape() {
this.ctx.beginPath();
this.ctx.fillStyle = this.fillColor;
this.ctx.arc(0, 0, this.radius, 0, angleToRadian(360));
this.ctx.fill();
}
drawSelf() {
super.drawSelf();
this.drawShape();
}
}
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 {
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;
}
_refreshSize(img: any) {
if (this.width < img.width) {
this.width = img.width;
}
if (this.height < img.height) {
this.height = img.height;
}
}
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() {
for (const frame of this.frameArr ) {
frame.alpha = 1;
}
}
hideAllFrame() {
for (const frame of this.frameArr) {
frame.alpha = 0;
}
}
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;
}
this.frameIndex ++;
if (this.frameIndex >= this.frameArr.length) {
if (this.loop) {
this.frameIndex = 0;
} else if (this.restartFlag) {
this.restartFlag = false;
this.frameIndex = 0;
} else {
this.frameIndex -- ;
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() {
if (!this.playFlag) { return; }
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 =============-------------
export function tweenChange(item, obj, time = 0.8, callBack = null, easing = null, update = null) {
const tween = new TWEEN.Tween(item).to(obj, time * 1000);
if (callBack) {
tween.onComplete(() => {
callBack();
});
}
if (easing) {
tween.easing(easing);
}
if (update) {
tween.onUpdate( (a, b) => {
update(a, b);
});
}
tween.start();
return tween;
}
export function rotateItem(item, rotation, time = 0.8, callBack = null, easing = null) {
const tween = new TWEEN.Tween(item).to({ rotation }, time * 1000);
if (callBack) {
tween.onComplete(() => {
callBack();
});
}
if (easing) {
tween.easing(easing);
}
tween.start();
}
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);
if (callBack) {
tween.onComplete(() => {
callBack();
});
}
if (easing) {
tween.easing(easing);
}
tween.start();
return tween;
}
export function moveItem(item, x, y, time = 0.8, callBack = null, easing = null) {
const tween = new TWEEN.Tween(item).to({ x, y}, time * 1000);
if (callBack) {
tween.onComplete(() => {
callBack();
});
}
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.
.onComplete(() => {
})
.start();
}
export function hideItem(item, time = 0.8, callBack = null, easing = null) {
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(() => {
if (callBack) {
callBack();
}
});
if (easing) {
tween.easing(easing);
}
tween.start();
}
export function showItem(item, time = 0.8, callBack = null, easing = null) {
if (item.alpha === 1) {
if (callBack) {
callBack();
}
return;
}
item.visible = true;
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(() => {
if (callBack) {
callBack();
}
});
if (easing) {
tween.easing(easing);
}
tween.start();
}
export function alphaItem(item, alpha, time = 0.8, callBack = null, easing = null) {
const tween = new TWEEN.Tween(item)
.to({alpha}, time * 1000)
// .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
.onComplete(() => {
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)
.to({alpha: 1, scale: 1}, time * 1000)
// .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
.onComplete(() => {
if (callBack) {
callBack();
}
});
if (easing) {
tween.easing(easing);
}
tween.start();
}
export function randomSortByArr(arr) {
if (!arr) {
return;
}
const newArr = [];
const tmpArr = arr.concat();
while (tmpArr.length > 0) {
const randomIndex = Math.floor( tmpArr.length * Math.random() );
newArr.push(tmpArr[randomIndex]);
tmpArr.splice(randomIndex, 1);
}
return newArr;
}
export function radianToAngle(radian) {
return radian * 180 / Math.PI;
// 角度 = 弧度 * 180 / Math.PI;
}
export function angleToRadian(angle) {
return angle * Math.PI / 180;
// 弧度= 角度 * Math.PI / 180;
}
export function getPosByAngle(angle, len) {
const radian = angle * Math.PI / 180;
const x = Math.sin(radian) * len;
const y = Math.cos(radian) * len;
return {x, y};
}
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); // 用反三角函数求弧度
let angle = Math.floor(180 / (Math.PI / radina) * 100) / 100; // 将弧度转换成角度
if (mx > px && my > py) {// 鼠标在第四象限
angle = 180 - angle;
}
if (mx === px && my > py) {// 鼠标在y轴负方向上
angle = 180;
}
if (mx > px && my === py) {// 鼠标在x轴正方向上
angle = 90;
}
if (mx < px && my > py) {// 鼠标在第三象限
angle = 180 + angle;
}
if (mx < px && my === py) {// 鼠标在x轴负方向
angle = 270;
}
if (mx < px && my < py) {// 鼠标在第二象限
angle = 360 - angle;
} }
setScaleXY(value) { // console.log('angle: ', angle);
this.scaleX = this.scaleY = value; return angle;
}
getBoundingBox() { }
const x = this.x + this._offX * this.scaleX;
const y = this.y + this._offY * this.scaleY;
const width = this.width * this.scaleX;
const height = this.height * this.scaleY;
return {x, y, width, height}; export function removeItemFromArr(arr, item) {
const index = arr.indexOf(item);
if (index !== -1) {
arr.splice(index, 1);
} }
} }
export class Item extends MySprite {
baseX;
move(targetY, callBack) { export function circleMove(item, x0, y0, time = 2, addR = 360, xPer = 1, yPer = 1, callBack = null, easing = null) {
const self = this; const r = getPosDistance(item.x, item.y, x0, y0);
let a = getAngleByPos(item.x, item.y, x0, y0);
const tween = new TWEEN.Tween(this) a += 90;
.to({ y: targetY }, 2500) const obj = {r, a};
.easing(TWEEN.Easing.Quintic.Out)
.onComplete(function() {
self.hide(callBack);
// if (callBack) {
// callBack();
// }
})
.start();
} item._circleAngle = a;
const targetA = a + addR;
show(callBack = null) { const tween = new TWEEN.Tween(item).to({_circleAngle: targetA}, time * 1000);
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() {
if (callBack) { if (callBack) {
tween.onComplete(() => {
callBack(); callBack();
});
} }
}) if (easing) {
.start(); // Start the tween immediately. tween.easing(easing);
} }
hide(callBack = null) { tween.onUpdate( (item, progress) => {
// console.log(item._circleAngle);
const r = obj.r;
const a = item._circleAngle;
const x = x0 + r * xPer * Math.cos(a * Math.PI / 180);
const y = y0 + r * yPer * Math.sin(a * Math.PI / 180);
item.x = x;
item.y = y;
// obj.a ++;
});
tween.start();
}
export function getPosDistance(sx, sy, ex, ey) {
const _x = ex - sx;
const _y = ey - sy;
const len = Math.sqrt( Math.pow(_x, 2) + Math.pow(_y, 2) );
return len;
}
export function delayCall(callback, second) {
const tween = new TWEEN.Tween(this) const tween = new TWEEN.Tween(this)
.to({ alpha: 0 }, 800) .delay(second * 1000)
// .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth. .onComplete(() => {
.onComplete(function() { if (callback) {
if (callBack) { callback();
callBack();
} }
}) })
.start(); // Start the tween immediately. .start();
} }
shake(id) { export function formatTime(fmt, date) {
// "yyyy-MM-dd HH:mm:ss";
if (!this.baseX) { const o = {
this.baseX = this.x; '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 (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;
}
const baseX = this.baseX; export function getMinScale(item, maxLen) {
const baseTime = 50; const sx = maxLen / item.width;
const sequence = [ const sy = maxLen / item.height;
{target: {x: baseX + 40 * id}, time: baseTime - 25}, const minS = Math.min(sx, sy);
{target: {x: baseX - 20 * id}, time: baseTime}, return minS;
{target: {x: baseX + 10 * id}, time: baseTime}, }
{target: {x: baseX - 5 * id}, time: baseTime},
{target: {x: baseX + 2 * id}, time: baseTime},
{target: {x: baseX - 1 * id}, time: baseTime},
{target: {x: baseX}, time: baseTime},
];
const self = this; export function jelly(item, time = 0.7) {
function runSequence() {
if (self['shakeTween']) { if (item.jellyTween) {
self['shakeTween'].stop(); TWEEN.remove(item.jellyTween);
} }
const tween = new TWEEN.Tween(self); const t = time / 9;
const baseSX = item.scaleX;
if (sequence.length > 0) { const baseSY = item.scaleY;
// console.log('sequence.length: ', sequence.length); let index = 0;
const action = sequence.shift();
tween.to(action['target'], action['time']);
tween.onComplete( () => {
runSequence();
});
tween.start();
self['shakeTween'] = tween; const run = () => {
} if (index >= arr.length) {
item.jellyTween = null;
return;
} }
const data = arr[index];
const t = tweenChange(item, {scaleX: data[0], scaleY: data[1]}, data[2], () => {
index ++;
run();
}, TWEEN.Easing.Sinusoidal.InOut);
item.jellyTween = t;
};
runSequence(); 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],
[baseSX * 1.0, baseSY * 1.0, t * 2],
];
}
run();
}
drop(targetY, callBack = null) {
const self = this; export function showPopParticle(img, pos, parent, num = 20, minLen = 40, maxLen = 80, showTime = 0.4) {
const time = Math.abs(targetY - this.y) * 2.4;
this.alpha = 1; for (let i = 0; i < num; i ++) {
const tween = new TWEEN.Tween(this) const particle = new MySprite();
.to({ y: targetY }, time) particle.init(img);
.easing(TWEEN.Easing.Cubic.In) particle.x = pos.x;
.onComplete(function() { particle.y = pos.y;
parent.addChild(particle);
// self.hideItem(callBack); const randomR = 360 * Math.random();
if (callBack) { particle.rotation = randomR;
callBack();
}
})
.start();
const randomS = 0.3 + Math.random() * 0.7;
particle.setScaleXY(randomS * 0.3);
} const randomX = Math.random() * 20 - 10;
particle.x += randomX;
const randomY = Math.random() * 20 - 10;
particle.y += randomY;
} const randomL = minLen + Math.random() * (maxLen - minLen);
const randomA = 360 * Math.random();
const randomT = getPosByAngle(randomA, randomL);
moveItem(particle, particle.x + randomT.x, particle.y + randomT.y, showTime, () => {
export class EndSpr extends MySprite {
show(s) { }, TWEEN.Easing.Exponential.Out);
this.scaleX = this.scaleY = 0; // scaleItem(particle, 0, 0.6, () => {
this.alpha = 0; //
// });
const tween = new TWEEN.Tween(this) scaleItem(particle, randomS, 0.6, () => {
.to({ alpha: 1, scaleX: s, scaleY: s }, 800)
.easing(TWEEN.Easing.Elastic.Out) // Use an easing function to make the animation smooth. }, TWEEN.Easing.Exponential.Out);
.onComplete(function() {
setTimeout(() => {
hideItem(particle, 0.4, () => {
}, TWEEN.Easing.Cubic.In);
}, showTime * 0.5 * 1000);
})
.start(); // Start the tween immediately.
} }
} }
export class ShapeRect extends MySprite { export function shake(item, time = 0.5, callback = null, rate = 1) {
fillColor = '#FF0000'; if (item.shakeTween) {
return;
}
setSize(w, h) { item.shakeTween = true;
this.width = w; const offX = 15 * item.scaleX * rate;
this.height = h; const offY = 15 * item.scaleX * rate;
const baseX = item.x;
const baseY = item.y;
const easing = TWEEN.Easing.Sinusoidal.InOut;
console.log('w:', w);
console.log('h:', h); const move4 = () => {
moveItem(item, baseX, baseY, time / 4, () => {
item.shakeTween = false;
if (callback) {
callback();
} }
}, easing);
};
drawShape() { const move3 = () => {
moveItem(item, baseX + offX / 4, baseY + offY / 4, time / 4, () => {
move4();
}, easing);
};
this.ctx.fillStyle = this.fillColor; const move2 = () => {
this.ctx.fillRect(this._offX, this._offY, this.width, this.height); moveItem(item, baseX - offX / 4 * 3, baseY - offY / 4 * 3, time / 4, () => {
move3();
}, easing);
};
} const move1 = () => {
moveItem(item, baseX + offX, baseY + offY, time / 7.5, () => {
move2();
}, easing);
};
move1();
drawSelf() {
super.drawSelf();
this.drawShape();
}
} }
// --------------- custom class --------------------
export class HotZoneItem extends MySprite { export class HotZoneItem extends MySprite {
lineDashFlag = false; lineDashFlag = false;
arrow: MySprite; arrow: MySprite;
label: Label; label: Label;
text; title;
arrowTop; arrowTop;
arrowRight; arrowRight;
audio_url;
pic_url;
text;
private _itemType;
private shapeRect: ShapeRect;
get itemType() {
return this._itemType;
}
set itemType(value) {
this._itemType = value;
}
setSize(w, h) { setSize(w, h) {
this.width = w; this.width = w;
this.height = h; this.height = h;
...@@ -391,7 +1986,7 @@ export class HotZoneItem extends MySprite { ...@@ -391,7 +1986,7 @@ export class HotZoneItem extends MySprite {
if (!this.label) { if (!this.label) {
this.label = new Label(this.ctx); this.label = new Label(this.ctx);
this.label.anchorY = 0; this.label.anchorY = 0;
this.label.fontSize = '40px'; this.label.fontSize = 40;
this.label.textAlign = 'center'; this.label.textAlign = 'center';
this.addChild(this.label); this.addChild(this.label);
// this.label.scaleX = 1 / this.scaleX; // this.label.scaleX = 1 / this.scaleX;
...@@ -403,8 +1998,8 @@ export class HotZoneItem extends MySprite { ...@@ -403,8 +1998,8 @@ export class HotZoneItem extends MySprite {
if (text) { if (text) {
this.label.text = text; this.label.text = text;
} else if (this.text) { } else if (this.title) {
this.label.text = this.text; this.label.text = this.title;
} }
this.label.visible = true; this.label.visible = true;
...@@ -532,12 +2127,86 @@ export class HotZoneItem extends MySprite { ...@@ -532,12 +2127,86 @@ export class HotZoneItem extends MySprite {
} }
} }
export class HotZoneImg extends MySprite {
drawFrame() {
this.ctx.save();
const rect = this.getBoundingBox();
const w = rect.width;
const h = rect.height;
const x = rect.x + w / 2;
const y = rect.y + h / 2;
this.ctx.setLineDash([5, 5]);
this.ctx.lineWidth = 2;
this.ctx.strokeStyle = '#1bfff7';
this.ctx.beginPath();
this.ctx.moveTo( x - w / 2, y - h / 2);
this.ctx.lineTo(x + w / 2, y - h / 2);
this.ctx.lineTo(x + w / 2, y + h / 2);
this.ctx.lineTo(x - w / 2, y + h / 2);
this.ctx.lineTo(x - w / 2, y - h / 2);
// this.ctx.fill();
this.ctx.stroke();
this.ctx.restore();
}
draw() {
super.draw();
this.drawFrame();
}
}
export class HotZoneLabel extends Label {
drawFrame() {
this.ctx.save();
const rect = this.getBoundingBox();
const w = rect.width / this.scaleX;
const h = this.height * this.scaleY;
const x = this.x;
const y = this.y;
this.ctx.setLineDash([5, 5]);
this.ctx.lineWidth = 2;
this.ctx.strokeStyle = '#1bfff7';
this.ctx.beginPath();
this.ctx.moveTo( x - w / 2, y - h / 2);
this.ctx.lineTo(x + w / 2, y - h / 2);
this.ctx.lineTo(x + w / 2, y + h / 2);
this.ctx.lineTo(x - w / 2, y + h / 2);
this.ctx.lineTo(x - w / 2, y - h / 2);
// this.ctx.fill();
this.ctx.stroke();
this.ctx.restore();
}
draw() {
super.draw();
this.drawFrame();
}
}
export class EditorItem extends MySprite { export class EditorItem extends MySprite {
lineDashFlag = false; lineDashFlag = false;
arrow: MySprite; arrow: MySprite;
label:Label; label: Label;
text; text;
showLabel(text = null) { showLabel(text = null) {
...@@ -546,7 +2215,7 @@ export class EditorItem extends MySprite { ...@@ -546,7 +2215,7 @@ export class EditorItem extends MySprite {
if (!this.label) { if (!this.label) {
this.label = new Label(this.ctx); this.label = new Label(this.ctx);
this.label.anchorY = 0; this.label.anchorY = 0;
this.label.fontSize = '50px'; this.label.fontSize = 50;
this.label.textAlign = 'center'; this.label.textAlign = 'center';
this.addChild(this.label); this.addChild(this.label);
this.label.setScaleXY(1 / this.scaleX); this.label.setScaleXY(1 / this.scaleX);
...@@ -657,109 +2326,783 @@ export class EditorItem extends MySprite { ...@@ -657,109 +2326,783 @@ export class EditorItem extends MySprite {
export class Label extends MySprite { //
//
text:String; // import TWEEN from '@tweenjs/tween.js';
fontSize:String = '40px'; //
fontName:String = 'Verdana'; //
textAlign:String = 'left'; // class Sprite {
// x = 0;
// y = 0;
constructor(ctx) { // color = '';
super(ctx); // radius = 0;
this.init(); // alive = false;
} // margin = 0;
// angle = 0;
drawText() { // ctx;
//
// console.log('in drawText', this.text); // constructor(ctx) {
// this.ctx = ctx;
if (!this.text) { return; } // }
// update($event) {
this.ctx.font = `${this.fontSize} ${this.fontName}`; // this.draw();
this.ctx.textAlign = this.textAlign; // }
this.ctx.textBaseline = 'middle'; // draw() {
this.ctx.fontWeight = 900; //
// }
this.ctx.lineWidth = 5; //
this.ctx.strokeStyle = '#ffffff'; // }
this.ctx.strokeText(this.text, 0, 0); //
//
this.ctx.fillStyle = '#000000'; //
this.ctx.fillText(this.text, 0, 0); //
//
// export class MySprite extends Sprite {
} //
// width = 0;
// height = 0;
drawSelf() { // _anchorX = 0;
super.drawSelf(); // _anchorY = 0;
this.drawText(); // _offX = 0;
} // _offY = 0;
// scaleX = 1;
} // scaleY = 1;
// alpha = 1;
// rotation = 0;
// visible = true;
export function getPosByAngle(angle, len) { //
// children = [this];
const radian = angle * Math.PI / 180; //
const x = Math.sin(radian) * len; // img;
const y = Math.cos(radian) * len; // _z = 0;
//
return {x, y}; //
// init(imgObj = null, anchorX:number = 0.5, anchorY:number = 0.5) {
} //
// if (imgObj) {
export function getAngleByPos(px, py, mx, my) { //
// this.img = imgObj;
// const _x = p2x - p1x; //
// const _y = p2y - p1y; // this.width = this.img.width;
// const tan = _y / _x; // this.height = this.img.height;
// // }
// const radina = Math.atan(tan); // 用反三角函数求弧度 //
// const angle = Math.floor(180 / (Math.PI / radina)); // // this.anchorX = anchorX;
// // this.anchorY = anchorY;
// console.log('r: ' , angle); // }
// return angle; //
// //
//
// update($event = null) {
// if (this.visible) {
const x = Math.abs(px - mx); // this.draw();
const y = Math.abs(py - my); // }
// const x = Math.abs(mx - px); // }
// const y = Math.abs(my - py); // draw() {
const z = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2)); //
const cos = y / z; // this.ctx.save();
const radina = Math.acos(cos); // 用反三角函数求弧度 //
let angle = Math.floor(180 / (Math.PI / radina) * 100) / 100; // 将弧度转换成角度 // this.drawInit();
//
if(mx > px && my > py) {// 鼠标在第四象限 // this.updateChildren();
angle = 180 - angle; //
} // this.ctx.restore();
// }
if(mx === px && my > py) {// 鼠标在y轴负方向上 //
angle = 180; // drawInit() {
} //
// this.ctx.translate(this.x, this.y);
if(mx > px && my === py) {// 鼠标在x轴正方向上 //
angle = 90; // this.ctx.rotate(this.rotation * Math.PI / 180);
} //
// this.ctx.scale(this.scaleX, this.scaleY);
if(mx < px && my > py) {// 鼠标在第三象限 //
angle = 180 + angle; // this.ctx.globalAlpha = this.alpha;
} //
// }
if(mx < px && my === py) {// 鼠标在x轴负方向 //
angle = 270; // drawSelf() {
} // if (this.img) {
// this.ctx.drawImage(this.img, this._offX, this._offY);
if(mx < px && my < py) {// 鼠标在第二象限 // }
angle = 360 - angle; // }
} //
// updateChildren() {
// console.log('angle: ', angle); //
return angle; // if (this.children.length <= 0) { return; }
//
} // for (let i = 0; i < this.children.length; i++) {
//
// if (this.children[i] === this) {
//
// this.drawSelf();
// } else {
//
// this.children[i].update();
// }
// }
// }
//
//
// 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;
// });
//
// }
// removeChild(child) {
// const index = this.children.indexOf(child);
// if (index !== -1) {
// this.children.splice(index, 1);
// }
// }
//
// 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;
// }
//
// setScaleXY(value) {
// this.scaleX = this.scaleY = value;
// }
//
// getBoundingBox() {
//
// const x = this.x + this._offX * this.scaleX;
// const y = this.y + this._offY * this.scaleY;
// const width = this.width * this.scaleX;
// const height = this.height * this.scaleY;
//
// return {x, y, width, height};
// }
//
// }
//
//
//
//
//
// export class Item extends MySprite {
//
// baseX;
//
// move(targetY, callBack) {
//
// const self = this;
//
// const tween = new TWEEN.Tween(this)
// .to({ y: targetY }, 2500)
// .easing(TWEEN.Easing.Quintic.Out)
// .onComplete(function() {
//
// self.hide(callBack);
// // if (callBack) {
// // callBack();
// // }
// })
// .start();
//
// }
//
// show(callBack = null) {
//
// 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() {
// if (callBack) {
// callBack();
// }
// })
// .start(); // Start the tween immediately.
//
// }
//
// hide(callBack = null) {
//
// const tween = new TWEEN.Tween(this)
// .to({ alpha: 0 }, 800)
// // .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
// .onComplete(function() {
// if (callBack) {
// callBack();
// }
// })
// .start(); // Start the tween immediately.
// }
//
//
// shake(id) {
//
//
// if (!this.baseX) {
// this.baseX = this.x;
// }
//
// const baseX = this.baseX;
// const baseTime = 50;
// const sequence = [
// {target: {x: baseX + 40 * id}, time: baseTime - 25},
// {target: {x: baseX - 20 * id}, time: baseTime},
// {target: {x: baseX + 10 * id}, time: baseTime},
// {target: {x: baseX - 5 * id}, time: baseTime},
// {target: {x: baseX + 2 * id}, time: baseTime},
// {target: {x: baseX - 1 * id}, time: baseTime},
// {target: {x: baseX}, time: baseTime},
//
// ];
//
//
// const self = this;
//
// function runSequence() {
//
// if (self['shakeTween']) {
// self['shakeTween'].stop();
// }
//
// const tween = new TWEEN.Tween(self);
//
// if (sequence.length > 0) {
// // console.log('sequence.length: ', sequence.length);
// const action = sequence.shift();
// tween.to(action['target'], action['time']);
// tween.onComplete( () => {
// runSequence();
// });
// tween.start();
//
// self['shakeTween'] = tween;
// }
// }
//
// runSequence();
//
// }
//
//
//
// drop(targetY, callBack = null) {
//
// const self = this;
//
// const time = Math.abs(targetY - this.y) * 2.4;
//
// this.alpha = 1;
//
// const tween = new TWEEN.Tween(this)
// .to({ y: targetY }, time)
// .easing(TWEEN.Easing.Cubic.In)
// .onComplete(function() {
//
// // self.hideItem(callBack);
// if (callBack) {
// callBack();
// }
// })
// .start();
//
//
// }
//
//
// }
//
//
// export class EndSpr extends MySprite {
//
// show(s) {
//
// this.scaleX = this.scaleY = 0;
// this.alpha = 0;
//
// const tween = new TWEEN.Tween(this)
// .to({ alpha: 1, scaleX: s, scaleY: s }, 800)
// .easing(TWEEN.Easing.Elastic.Out) // Use an easing function to make the animation smooth.
// .onComplete(function() {
//
// })
// .start(); // Start the tween immediately.
//
// }
// }
//
//
//
// export class ShapeRect extends MySprite {
//
// fillColor = '#FF0000';
//
// 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 HotZoneItem extends MySprite {
//
//
// lineDashFlag = false;
// arrow: MySprite;
// label: Label;
// title;
//
// arrowTop;
// arrowRight;
//
// audio_url;
// pic_url;
// text;
// private _itemType;
// private shapeRect: ShapeRect;
//
// get itemType() {
// return this._itemType;
// }
// set itemType(value) {
// this._itemType = value;
// }
//
// setSize(w, h) {
// this.width = w;
// this.height = h;
//
//
// const rect = new ShapeRect(this.ctx);
// rect.x = -w / 2;
// rect.y = -h / 2;
// rect.setSize(w, h);
// rect.fillColor = '#ffffff';
// rect.alpha = 0.2;
// this.addChild(rect);
// }
//
// showLabel(text = null) {
//
//
// if (!this.label) {
// this.label = new Label(this.ctx);
// this.label.anchorY = 0;
// this.label.fontSize = '40px';
// this.label.textAlign = 'center';
// this.addChild(this.label);
// // this.label.scaleX = 1 / this.scaleX;
// // this.label.scaleY = 1 / this.scaleY;
//
// this.refreshLabelScale();
//
// }
//
// if (text) {
// this.label.text = text;
// } else if (this.title) {
// this.label.text = this.title;
// }
// this.label.visible = true;
//
// }
//
// hideLabel() {
// if (!this.label) { return; }
//
// this.label.visible = false;
// }
//
// refreshLabelScale() {
// if (this.scaleX == this.scaleY) {
// this.label.setScaleXY(1);
// }
//
// if (this.scaleX > this.scaleY) {
// this.label.scaleX = this.scaleY / this.scaleX;
// } else {
// this.label.scaleY = this.scaleX / this.scaleY;
// }
// }
//
// showLineDash() {
// this.lineDashFlag = true;
//
// if (this.arrow) {
// this.arrow.visible = true;
// } else {
// this.arrow = new MySprite(this.ctx);
// this.arrow.load('assets/common/arrow.png', 1, 0);
// this.arrow.setScaleXY(0.06);
//
// this.arrowTop = new MySprite(this.ctx);
// this.arrowTop.load('assets/common/arrow_top.png', 0.5, 0);
// this.arrowTop.setScaleXY(0.06);
//
// this.arrowRight = new MySprite(this.ctx);
// this.arrowRight.load('assets/common/arrow_right.png', 1, 0.5);
// this.arrowRight.setScaleXY(0.06);
// }
//
// this.showLabel();
// }
//
// hideLineDash() {
//
// this.lineDashFlag = false;
//
// if (this.arrow) {
// this.arrow.visible = false;
// }
//
// this.hideLabel();
// }
//
//
//
// drawArrow() {
// if (!this.arrow) { return; }
//
// const rect = this.getBoundingBox();
// this.arrow.x = rect.x + rect.width;
// this.arrow.y = rect.y;
//
// this.arrow.update();
//
//
// this.arrowTop.x = rect.x + rect.width / 2;
// this.arrowTop.y = rect.y;
// this.arrowTop.update();
//
// this.arrowRight.x = rect.x + rect.width;
// this.arrowRight.y = rect.y + rect.height / 2;
// this.arrowRight.update();
// }
//
// drawFrame() {
//
//
// this.ctx.save();
//
//
// const rect = this.getBoundingBox();
//
// const w = rect.width;
// const h = rect.height;
// const x = rect.x + w / 2;
// const y = rect.y + h / 2;
//
// this.ctx.setLineDash([5, 5]);
// this.ctx.lineWidth = 2;
// this.ctx.strokeStyle = '#1bfff7';
// // this.ctx.fillStyle = '#ffffff';
//
// this.ctx.beginPath();
//
// this.ctx.moveTo( x - w / 2, y - h / 2);
//
// this.ctx.lineTo(x + w / 2, y - h / 2);
//
// this.ctx.lineTo(x + w / 2, y + h / 2);
//
// this.ctx.lineTo(x - w / 2, y + h / 2);
//
// this.ctx.lineTo(x - w / 2, y - h / 2);
//
// // this.ctx.fill();
// this.ctx.stroke();
//
//
//
//
// this.ctx.restore();
//
// }
//
// draw() {
// super.draw();
//
// if (this.lineDashFlag) {
// this.drawFrame();
// this.drawArrow();
// }
// }
// }
//
//
// export class EditorItem extends MySprite {
//
// lineDashFlag = false;
// arrow: MySprite;
// label:Label;
// text;
//
// showLabel(text = null) {
//
//
// if (!this.label) {
// this.label = new Label(this.ctx);
// this.label.anchorY = 0;
// this.label.fontSize = '50px';
// this.label.textAlign = 'center';
// this.addChild(this.label);
// this.label.setScaleXY(1 / this.scaleX);
// }
//
// if (text) {
// this.label.text = text;
// } else if (this.text) {
// this.label.text = this.text;
// }
// this.label.visible = true;
//
// }
//
// hideLabel() {
// if (!this.label) { return; }
//
// this.label.visible = false;
// }
//
// showLineDash() {
// this.lineDashFlag = true;
//
// if (this.arrow) {
// this.arrow.visible = true;
// } else {
// this.arrow = new MySprite(this.ctx);
// this.arrow.load('assets/common/arrow.png', 1, 0);
// this.arrow.setScaleXY(0.06);
//
// }
//
// this.showLabel();
// }
//
// hideLineDash() {
//
// this.lineDashFlag = false;
//
// if (this.arrow) {
// this.arrow.visible = false;
// }
//
// this.hideLabel();
// }
//
//
//
// drawArrow() {
// if (!this.arrow) { return; }
//
// const rect = this.getBoundingBox();
// this.arrow.x = rect.x + rect.width;
// this.arrow.y = rect.y;
//
// this.arrow.update();
// }
//
// drawFrame() {
//
//
// this.ctx.save();
//
//
// const rect = this.getBoundingBox();
//
// const w = rect.width;
// const h = rect.height;
// const x = rect.x + w / 2;
// const y = rect.y + h / 2;
//
// this.ctx.setLineDash([5, 5]);
// this.ctx.lineWidth = 2;
// this.ctx.strokeStyle = '#1bfff7';
// // this.ctx.fillStyle = '#ffffff';
//
// this.ctx.beginPath();
//
// this.ctx.moveTo( x - w / 2, y - h / 2);
//
// this.ctx.lineTo(x + w / 2, y - h / 2);
//
// this.ctx.lineTo(x + w / 2, y + h / 2);
//
// this.ctx.lineTo(x - w / 2, y + h / 2);
//
// this.ctx.lineTo(x - w / 2, y - h / 2);
//
// // this.ctx.fill();
// this.ctx.stroke();
//
//
//
//
// this.ctx.restore();
//
// }
//
// draw() {
// super.draw();
//
// if (this.lineDashFlag) {
// this.drawFrame();
// this.drawArrow();
// }
// }
// }
//
//
//
// export class Label extends MySprite {
//
// text:String;
// fontSize:String = '40px';
// fontName:String = 'Verdana';
// textAlign:String = 'left';
//
//
// constructor(ctx) {
// super(ctx);
// this.init();
// }
//
// drawText() {
//
// // console.log('in drawText', this.text);
//
// if (!this.text) { return; }
//
// this.ctx.font = `${this.fontSize} ${this.fontName}`;
// this.ctx.textAlign = this.textAlign;
// this.ctx.textBaseline = 'middle';
// this.ctx.fontWeight = 900;
//
// this.ctx.lineWidth = 5;
// this.ctx.strokeStyle = '#ffffff';
// this.ctx.strokeText(this.text, 0, 0);
//
// this.ctx.fillStyle = '#000000';
// this.ctx.fillText(this.text, 0, 0);
//
//
// }
//
//
// drawSelf() {
// super.drawSelf();
// this.drawText();
// }
//
// }
//
//
//
// export function getPosByAngle(angle, len) {
//
// const radian = angle * Math.PI / 180;
// const x = Math.sin(radian) * len;
// const y = Math.cos(radian) * len;
//
// return {x, y};
//
// }
//
// export function getAngleByPos(px, py, mx, my) {
//
// // const _x = p2x - p1x;
// // const _y = p2y - p1y;
// // const tan = _y / _x;
// //
// // const radina = Math.atan(tan); // 用反三角函数求弧度
// // const angle = Math.floor(180 / (Math.PI / radina)); //
// //
// // console.log('r: ' , angle);
// // return angle;
// //
//
//
//
// const x = Math.abs(px - mx);
// const y = Math.abs(py - my);
// // const x = Math.abs(mx - px);
// // const y = Math.abs(my - py);
// const z = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
// const cos = y / z;
// const radina = Math.acos(cos); // 用反三角函数求弧度
// let angle = Math.floor(180 / (Math.PI / radina) * 100) / 100; // 将弧度转换成角度
//
// if(mx > px && my > py) {// 鼠标在第四象限
// angle = 180 - angle;
// }
//
// if(mx === px && my > py) {// 鼠标在y轴负方向上
// angle = 180;
// }
//
// if(mx > px && my === py) {// 鼠标在x轴正方向上
// angle = 90;
// }
//
// if(mx < px && my > py) {// 鼠标在第三象限
// angle = 180 + angle;
// }
//
// if(mx < px && my === py) {// 鼠标在x轴负方向
// angle = 270;
// }
//
// if(mx < px && my < py) {// 鼠标在第二象限
// angle = 360 - angle;
// }
//
// // console.log('angle: ', angle);
// return angle;
//
// }
<div class="p-image-children-editor"> <div class="p-image-children-editor">
<h5 style="margin-left: 2.5%;"> preview: </h5> <h5 style="margin-left: 2.5%;"> preview: </h5>
<div class="preview-box" #wrap> <div class="preview-box" #wrap>
<canvas id="canvas" #canvas></canvas> <canvas id="canvas" #canvas></canvas>
</div> </div>
<div nz-row nzType="flex" nzAlign="middle"> <div nz-row nzType="flex" nzAlign="middle">
<div nz-col nzSpan="5" nzOffset="1"> <div nz-col nzSpan="5" nzOffset="1">
...@@ -20,39 +17,51 @@ ...@@ -20,39 +17,51 @@
(imageUploaded)="onBackgroundUploadSuccess($event)"> (imageUploaded)="onBackgroundUploadSuccess($event)">
</app-upload-image-with-preview> </app-upload-image-with-preview>
</div> </div>
</div> </div>
<div nz-col nzSpan="5" nzOffset="1" class="img-box" <div nz-col nzSpan="5" nzOffset="1" class="img-box"
*ngFor="let it of hotZoneArr; let i = index" > *ngFor="let it of hotZoneArr; let i = index">
<div
style="margin: auto; padding: 5px; margin-top: 30px; width:90%; border: 2px dashed #ddd; border-radius: 10px">
<span style="margin-left: 40%;"> item-{{i + 1}}
</span>
<button style="float: right;" nz-button nzType="danger" nzSize="small" (click)="deleteBtnClick(i)">
X
</button>
<div style=" height: 40px;"> <nz-divider style="margin-top: 10px;"></nz-divider>
<h5> item-{{i+1}}
<i style="margin-left: 20px; margin-top: 2px; float: right; cursor:pointer" (click)="deleteItem($event, i)"
nz-icon [nzTheme]="'twotone'" [nzType]="'close-circle'" [nzTwotoneColor]="'#ff0000'"></i>
</h5>
</div>
<div style="margin-top: -20px; margin-bottom: 5px; width: 100%;">
<nz-radio-group [ngModel]="it.itemType" (ngModelChange)="radioChange($event, it)" style="display: flex; align-items: center; justify-content: center">
<label *ngIf="isHasRect" nz-radio nzValue="rect">矩形</label>
<label *ngIf="isHasPic" nz-radio nzValue="pic">图片</label>
<label *ngIf="isHasText" nz-radio nzValue="text">文本</label>
</nz-radio-group>
</div>
<!--<div class="img-box-upload">--> <div *ngIf="it.itemType == 'pic'">
<!--<app-upload-image-with-preview--> <app-upload-image-with-preview
<!--[picUrl]="it.pic_url"--> [picUrl]="it?.pic_url"
<!--(imageUploaded)="onImgUploadSuccessByImg($event, it)">--> (imageUploaded)="onItemImgUploadSuccess($event, it)">
<!--</app-upload-image-with-preview>--> </app-upload-image-with-preview>
<!--</div>--> </div>
<!--<app-audio-recorder--> <div *ngIf="it.itemType == 'text'">
<!--[audioUrl]="it.audio_url ? it.audio_url : null "--> <input type="text" nz-input [(ngModel)]="it.text" (blur)="saveText(it)">
<!--(audioUploaded)="onAudioUploadSuccessByImg($event, it)"--> </div>
<!--&gt;</app-audio-recorder>-->
<div *ngIf="isHasAudio" style="width: 100%; margin-top: 5px;">
<app-audio-recorder
[audioUrl]="it.audio_url"
(audioUploaded)="onItemAudioUploadSuccess($event, it)"
></app-audio-recorder>
</div>
</div> </div>
</div>
<div nz-col nzSpan="5" nzOffset="1"> <div nz-col nzSpan="5" nzOffset="1">
...@@ -75,7 +84,7 @@ ...@@ -75,7 +84,7 @@
<div class="save-box"> <div class="save-box">
<button class="save-btn" nz-button nzType="primary" [nzSize]="'large'" nzShape="round" <button class="save-btn" nz-button nzType="primary" [nzSize]="'large'" nzShape="round"
(click)="saveClick()"> (click)="saveClick()" >
<i nz-icon nzType="save"></i> <i nz-icon nzType="save"></i>
Save Save
</button> </button>
...@@ -83,7 +92,9 @@ ...@@ -83,7 +92,9 @@
</div> </div>
</div> </div>
<label style="opacity: 0; position: absolute; top: 0px; font-family: 'BRLNSR_1'">1</label>
...@@ -87,6 +87,13 @@ h5 { ...@@ -87,6 +87,13 @@ h5 {
@font-face
{
font-family: 'BRLNSR_1';
src: url("/assets/font/BRLNSR_1.TTF") ;
}
......
import {Component, ElementRef, EventEmitter, HostListener, Input, OnChanges, OnDestroy, OnInit, Output, ViewChild} from '@angular/core'; import {
Component,
ElementRef,
EventEmitter,
HostListener,
Input,
OnChanges,
OnDestroy,
OnInit,
Output,
ViewChild
} from '@angular/core';
import {Subject} from 'rxjs'; import {Subject} from 'rxjs';
import {debounceTime} from 'rxjs/operators'; import {debounceTime} from 'rxjs/operators';
import {EditorItem, HotZoneItem, Label, MySprite} from './Unit'; import {EditorItem, HotZoneImg, HotZoneItem, HotZoneLabel, Label, MySprite, removeItemFromArr} from './Unit';
import TWEEN from '@tweenjs/tween.js'; import TWEEN from '@tweenjs/tween.js';
import {getMinScale} from "../../play/Unit";
import {tar} from "compressing";
@Component({ @Component({
...@@ -13,89 +26,87 @@ import TWEEN from '@tweenjs/tween.js'; ...@@ -13,89 +26,87 @@ import TWEEN from '@tweenjs/tween.js';
export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
_bgItem = null;
@Input()
set bgItem(v) {
this._bgItem = v;
this.init();
}
get bgItem() {
return this._bgItem;
}
@Input() @Input()
imgItemArr = null; imgItemArr = null;
@Input() @Input()
hotZoneItemArr = null; hotZoneItemArr = null;
@Input() @Input()
hotZoneArr = null; hotZoneArr = null;
@Output() @Output()
save = new EventEmitter(); save = new EventEmitter();
@ViewChild('canvas', {static: true}) canvas: ElementRef;
@ViewChild('wrap', {static: true}) wrap: ElementRef;
@ViewChild('canvas', {static: true }) canvas: ElementRef; @Input()
@ViewChild('wrap', {static: true }) wrap: ElementRef; isHasRect = true;
// @HostListener('window:resize', ['$event']) @Input()
isHasPic = true;
@Input()
isHasText = true;
@Input()
isHasAudio = true;
@Input()
hotZoneFontObj = {
size: 50,
name: 'BRLNSR_1',
color: '#8f3758'
}
@Input()
defaultItemType = 'text';
@Input()
hotZoneImgSize = 190;
saveDisabled = true;
canvasWidth = 1280; canvasWidth = 1280;
canvasHeight = 720; canvasHeight = 720;
canvasBaseW = 1280; canvasBaseW = 1280;
// @HostListener('window:resize', ['$event'])
canvasBaseH = 720; canvasBaseH = 720;
mapScale = 1; mapScale = 1;
ctx; ctx;
mx; mx;
my; // 点击坐标 my; // 点击坐标
// 资源
// rawImages = new Map(res);
// 声音 // 声音
bgAudio = new Audio(); bgAudio = new Audio();
images = new Map(); images = new Map();
animationId: any; animationId: any;
// winResizeEventStream = new Subject();
// 资源
// rawImages = new Map(res);
winResizeEventStream = new Subject();
canvasLeft; canvasLeft;
canvasTop; canvasTop;
renderArr; renderArr;
imgArr = []; imgArr = [];
oldPos; oldPos;
radioValue;
curItem; curItem;
bg: MySprite; bg: MySprite;
changeSizeFlag = false; changeSizeFlag = false;
changeTopSizeFlag = false; changeTopSizeFlag = false;
changeRightSizeFlag = false; changeRightSizeFlag = false;
constructor() {
}
_bgItem = null;
constructor() { get bgItem() {
return this._bgItem;
} }
@Input()
set bgItem(v) {
this._bgItem = v;
this.init();
}
onResize(event) { onResize(event) {
// this.winResizeEventStream.next(); this.winResizeEventStream.next();
} }
...@@ -118,13 +129,22 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -118,13 +129,22 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
} }
onBackgroundUploadSuccess(e) { onBackgroundUploadSuccess(e) {
console.log('e: ', e); console.log('e: ', e);
this.bgItem.url = e.url; this.bgItem.url = e.url;
this.refreshBackground(); this.refreshBackground();
} }
onItemImgUploadSuccess(e, item) {
item.pic_url = e.url;
this.loadHotZonePic(item.pic, e.url);
}
onItemAudioUploadSuccess(e, item) {
item.audio_url = e.url;
}
refreshBackground(callBack = null) { refreshBackground(callBack = null) {
if (!this.bg) { if (!this.bg) {
...@@ -162,14 +182,25 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -162,14 +182,25 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
const item = this.getHotZoneItem(); const item = this.getHotZoneItem();
this.hotZoneArr.push(item); this.hotZoneArr.push(item);
this.refreshItem(item);
this.refreshHotZoneId();
}
deleteBtnClick(index) {
const item = this.hotZoneArr.splice(index, 1)[0];
removeItemFromArr(this.renderArr, item.pic);
removeItemFromArr(this.renderArr, item.textLabel);
this.refreshHotZoneId(); this.refreshHotZoneId();
console.log('hotZoneArr:', this.hotZoneArr);
} }
onImgUploadSuccessByImg(e, img) { onImgUploadSuccessByImg(e, img) {
img.pic_url = e.url; img.pic_url = e.url;
this.refreshImage (img); this.refreshImage(img);
} }
refreshImage(img) { refreshImage(img) {
...@@ -188,7 +219,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -188,7 +219,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
this.hotZoneArr[i].index = i; this.hotZoneArr[i].index = i;
if (this.hotZoneArr[i]) { if (this.hotZoneArr[i]) {
this.hotZoneArr[i].text = 'item-' + (i + 1); this.hotZoneArr[i].title = 'item-' + (i + 1);
} }
} }
...@@ -206,7 +237,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -206,7 +237,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
} }
getHotZoneItem( saveData = null) { getHotZoneItem(saveData = null) {
const itemW = 200; const itemW = 200;
...@@ -219,18 +250,46 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -219,18 +250,46 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
item.x = this.canvasWidth / 2; item.x = this.canvasWidth / 2;
item.y = this.canvasHeight / 2; item.y = this.canvasHeight / 2;
item.itemType = this.defaultItemType;
if (saveData) { if (saveData) {
const saveRect = saveData.rect; const saveRect = saveData.rect;
item.scaleX = saveRect.width / item.width; item.scaleX = saveRect.width / item.width;
item.scaleY = saveRect.height / item.height; item.scaleY = saveRect.height / item.height;
item.x = saveRect.x + saveRect.width / 2 ; item.x = saveRect.x + saveRect.width / 2;
item.y = saveRect.y + saveRect.height / 2; item.y = saveRect.y + saveRect.height / 2;
} }
item.showLineDash(); item.showLineDash();
const pic = new HotZoneImg(this.ctx);
pic.visible = false;
item['pic'] = pic;
if (saveData && saveData.pic_url) {
this.loadHotZonePic(pic, saveData.pic_url);
}
pic.x = item.x;
pic.y = item.y;
this.renderArr.push(pic);
const textLabel = new HotZoneLabel(this.ctx);
textLabel.fontSize = this.hotZoneFontObj.size;
textLabel.fontName = this.hotZoneFontObj.name;
textLabel.fontColor = this.hotZoneFontObj.color;
textLabel.textAlign = 'center';
// textLabel.setOutline();
// console.log('saveData:', saveData);
item['textLabel'] = textLabel;
textLabel.setScaleXY(this.mapScale);
if (saveData && saveData.text) {
textLabel.text = saveData.text;
textLabel.refreshSize();
}
textLabel.x = item.x;
textLabel.y = item.y;
this.renderArr.push(textLabel);
return item; return item;
} }
...@@ -240,7 +299,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -240,7 +299,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
const item = new EditorItem(this.ctx); const item = new EditorItem(this.ctx);
item.load(img.pic_url).then( img => { item.load(img.pic_url).then(img => {
let maxW, maxH; let maxW, maxH;
if (this.bg) { if (this.bg) {
...@@ -266,7 +325,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -266,7 +325,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
const saveRect = saveData.rect; const saveRect = saveData.rect;
item.setScaleXY(saveRect.width / item.width); item.setScaleXY(saveRect.width / item.width);
item.x = saveRect.x + saveRect.width / 2 ; item.x = saveRect.x + saveRect.width / 2;
item.y = saveRect.y + saveRect.height / 2; item.y = saveRect.y + saveRect.height / 2;
} else { } else {
...@@ -291,9 +350,29 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -291,9 +350,29 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
} }
radioChange(e, item) {
item.itemType = e;
this.refreshItem(item);
// console.log(' in radioChange e: ', e);
}
refreshItem(item) {
switch (item.itemType) {
case 'rect':
this.setRectState(item);
break;
case 'pic':
this.setPicState(item);
break;
case 'text':
this.setTextState(item);
break;
default:
}
}
init() { init() {
...@@ -367,20 +446,25 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -367,20 +446,25 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
// img['audio_url'] = arr[i].audio_url; // img['audio_url'] = arr[i].audio_url;
// this.imgArr.push(img); // this.imgArr.push(img);
const item = this.getHotZoneItem( data); const item = this.getHotZoneItem(data);
item.audio_url = data.audio_url;
item.pic_url = data.pic_url;
item.text = data.text;
item.itemType = data.itemType;
this.refreshItem(item);
console.log('item: ', item); console.log('item: ', item);
this.hotZoneArr.push(item); this.hotZoneArr.push(item);
} }
this.refreshHotZoneId(); this.refreshHotZoneId();
// this.refreshImageId(); // this.refreshImageId();
} }
initImgArr() { initImgArr() {
console.log('this.imgItemArr: ', this.imgItemArr); console.log('this.imgItemArr: ', this.imgItemArr);
...@@ -446,34 +530,40 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -446,34 +530,40 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
this.oldPos = {x: this.mx, y: this.my}; this.oldPos = {x: this.mx, y: this.my};
const arr = this.hotZoneArr; for (let i = 0; i < this.hotZoneArr.length; i++) {
for (let i = arr.length - 1; i >= 0 ; i--) {
const item = arr[i];
if (item) {
if (this.checkClickTarget(item)) {
if (item.lineDashFlag && this.checkClickTarget(item.arrow)) { const item = this.hotZoneArr[i];
this.changeItemSize(item); let callback;
} else if (item.lineDashFlag && this.checkClickTarget(item.arrowTop)) { let target;
this.changeItemTopSize(item); switch (item.itemType) {
} else if (item.lineDashFlag && this.checkClickTarget(item.arrowRight)) { case 'rect':
this.changeItemRightSize(item); target = item;
} else { callback = this.clickedHotZoneRect.bind(this);
this.changeCurItem(item); break;
} case 'pic':
target = item.pic;
callback = this.clickedHotZonePic.bind(this);
break;
case 'text':
target = item.textLabel;
callback = this.clickedHotZoneText.bind(this);
break;
}
if (this.checkClickTarget(target)) {
callback(target);
return; return;
} }
} }
}
// this.hideAllLineDash();
} }
mapMove(event) { mapMove(event) {
if (!this.curItem) { return; } if (!this.curItem) {
return;
}
if (this.changeSizeFlag) { if (this.changeSizeFlag) {
this.changeSize(); this.changeSize();
...@@ -493,6 +583,9 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -493,6 +583,9 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
} }
this.oldPos = {x: this.mx, y: this.my}; this.oldPos = {x: this.mx, y: this.my};
this.saveDisabled = true;
} }
mapUp(event) { mapUp(event) {
...@@ -503,13 +596,11 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -503,13 +596,11 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
} }
changeSize() { changeSize() {
const rect = this.curItem.getBoundingBox(); const rect = this.curItem.getBoundingBox();
let lenW = ( this.mx - (rect.x + rect.width / 2) ) * 2; let lenW = (this.mx - (rect.x + rect.width / 2)) * 2;
let lenH = ( (rect.y + rect.height / 2) - this.my ) * 2; let lenH = ((rect.y + rect.height / 2) - this.my) * 2;
let minLen = 20; let minLen = 20;
...@@ -538,7 +629,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -538,7 +629,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
const rect = this.curItem.getBoundingBox(); const rect = this.curItem.getBoundingBox();
// let lenW = ( this.mx - (rect.x + rect.width / 2) ) * 2; // let lenW = ( this.mx - (rect.x + rect.width / 2) ) * 2;
let lenH = ( (rect.y + rect.height / 2) - this.my ) * 2; let lenH = ((rect.y + rect.height / 2) - this.my) * 2;
let minLen = 20; let minLen = 20;
...@@ -565,7 +656,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -565,7 +656,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
changeRightSize() { changeRightSize() {
const rect = this.curItem.getBoundingBox(); const rect = this.curItem.getBoundingBox();
let lenW = ( this.mx - (rect.x + rect.width / 2) ) * 2; let lenW = (this.mx - (rect.x + rect.width / 2)) * 2;
// let lenH = ( (rect.y + rect.height / 2) - this.my ) * 2; // let lenH = ( (rect.y + rect.height / 2) - this.my ) * 2;
let minLen = 20; let minLen = 20;
...@@ -634,6 +725,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -634,6 +725,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
// } // }
this.updateArr(this.hotZoneArr); this.updateArr(this.hotZoneArr);
this.updatePos()
TWEEN.update(); TWEEN.update();
...@@ -648,7 +740,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -648,7 +740,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
} }
renderAfterResize() { renderAfterResize() {
this.canvasWidth = this.wrap.nativeElement.clientWidth; this.canvasWidth = this.wrap.nativeElement.clientWidth;
this.canvasHeight = this.wrap.nativeElement.clientHeight; this.canvasHeight = this.wrap.nativeElement.clientHeight;
...@@ -657,11 +748,11 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -657,11 +748,11 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
initListener() { initListener() {
// this.winResizeEventStream this.winResizeEventStream
// .pipe(debounceTime(500)) .pipe(debounceTime(500))
// .subscribe(data => { .subscribe(data => {
// this.renderAfterResize(); this.renderAfterResize();
// }); });
if (this.IsPC()) { if (this.IsPC()) {
...@@ -767,41 +858,38 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -767,41 +858,38 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
if (this.bg) { if (this.bg) {
bgItem['rect'] = this.bg.getBoundingBox(); bgItem['rect'] = this.bg.getBoundingBox();
} else { } else {
bgItem['rect'] = {x: 0, y: 0, width: Math.round(this.canvasWidth * 100) / 100, height: Math.round(this.canvasHeight * 100) / 100}; bgItem['rect'] = {
x: 0,
y: 0,
width: Math.round(this.canvasWidth * 100) / 100,
height: Math.round(this.canvasHeight * 100) / 100
};
} }
// const imgItemArr = [];
// const imgArr = this.imgArr;
// for (let i = 0; i < imgArr.length; i++) {
//
// const imgItem = {
// id: imgArr[i].id,
// pic_url: imgArr[i].pic_url,
// audio_url: imgArr[i].audio_url,
// };
// if (imgArr[i].picItem) {
// imgItem['rect'] = imgArr[i].picItem.getBoundingBox();
// imgItem['rect'].x -= bgItem['rect'].x;
// imgItem['rect'].y -= bgItem['rect'].y;
// }
// imgItemArr.push(imgItem);
// }
const hotZoneItemArr = []; const hotZoneItemArr = [];
const hotZoneArr = this.hotZoneArr; const hotZoneArr = this.hotZoneArr;
for (let i = 0; i < hotZoneArr.length; i++) { for (let i = 0; i < hotZoneArr.length; i++) {
const hotZoneItem = { const hotZoneItem = {
index: hotZoneArr[i].index, index: hotZoneArr[i].index,
pic_url: hotZoneArr[i].pic_url,
text: hotZoneArr[i].text,
audio_url: hotZoneArr[i].audio_url,
itemType: hotZoneArr[i].itemType,
fontSize: this.hotZoneFontObj.size,
fontName: this.hotZoneFontObj.name,
fontColor: this.hotZoneFontObj.color,
fontScale: hotZoneArr[i].textLabel ? hotZoneArr[i].textLabel.scaleX : 1,
imgScale: hotZoneArr[i].pic ? hotZoneArr[i].pic.scaleX : 1,
mapScale: this.mapScale
}; };
hotZoneItem['rect'] = hotZoneArr[i].getBoundingBox(); hotZoneItem['rect'] = hotZoneArr[i].getBoundingBox();
hotZoneItem['rect'].x = Math.round( (hotZoneItem['rect'].x - bgItem['rect'].x) * 100) / 100; hotZoneItem['rect'].x = Math.round((hotZoneItem['rect'].x - bgItem['rect'].x) * 100) / 100;
hotZoneItem['rect'].y = Math.round( (hotZoneItem['rect'].y - bgItem['rect'].y) * 100) / 100; hotZoneItem['rect'].y = Math.round((hotZoneItem['rect'].y - bgItem['rect'].y) * 100) / 100;
hotZoneItem['rect'].width = Math.round( (hotZoneItem['rect'].width) * 100) / 100; hotZoneItem['rect'].width = Math.round((hotZoneItem['rect'].width) * 100) / 100;
hotZoneItem['rect'].height = Math.round( (hotZoneItem['rect'].height) * 100) / 100; hotZoneItem['rect'].height = Math.round((hotZoneItem['rect'].height) * 100) / 100;
hotZoneItemArr.push(hotZoneItem); hotZoneItemArr.push(hotZoneItem);
} }
...@@ -810,4 +898,91 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -810,4 +898,91 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
this.save.emit({bgItem, hotZoneItemArr}); this.save.emit({bgItem, hotZoneItemArr});
} }
private updatePos() {
this.hotZoneArr.forEach((item) => {
let x, y;
switch (item.itemType) {
case 'rect':
x = item.x;
y = item.y;
break;
case 'pic':
x = item.pic.x;
y = item.pic.y;
break;
case 'text':
x = item.textLabel.x;
y = item.textLabel.y;
break;
}
item.x = x;
item.y = y;
item.pic.x = x;
item.pic.y = y;
item.textLabel.x = x;
item.textLabel.y = y;
});
}
private setPicState(item: any) {
item.visible = false;
item.textLabel.visible = false;
item.pic.visible = true;
}
private setRectState(item: any) {
item.visible = true;
item.textLabel.visible = false;
item.pic.visible = false;
}
private setTextState(item: any) {
item.visible = false;
item.pic.visible = false;
item.textLabel.visible = true;
}
private clickedHotZoneRect(item: any) {
if (this.checkClickTarget(item)) {
if (item.lineDashFlag && this.checkClickTarget(item.arrow)) {
this.changeItemSize(item);
} else if (item.lineDashFlag && this.checkClickTarget(item.arrowTop)) {
this.changeItemTopSize(item);
} else if (item.lineDashFlag && this.checkClickTarget(item.arrowRight)) {
this.changeItemRightSize(item);
} else {
this.changeCurItem(item);
}
return;
}
}
private clickedHotZonePic(item: any) {
if (this.checkClickTarget(item)) {
this.curItem = item;
}
}
private clickedHotZoneText(item: any) {
if (this.checkClickTarget(item)) {
this.curItem = item;
}
}
saveText(item) {
item.textLabel.text = item.text;
}
private loadHotZonePic(pic: HotZoneImg, url) {
const baseLen = this.hotZoneImgSize * this.mapScale;
pic.load(url).then(() => {
const s = getMinScale(pic, baseLen);
pic.setScaleXY(s);
});
}
} }
<div class="model-content"> <div class="model-content">
<div style="padding: 20px">
<div style="position: absolute; left: 200px; top: 100px; width: 800px;">
<app-custom-hot-zone
<input type="text" nz-input [(ngModel)]="item.text" (blur)="save()"> [bgItem]="bgItem"
[hotZoneItemArr]="hotZoneItemArr"
<app-upload-image-with-preview [isHasPic]="false"
[picUrl]="item.pic_url" [isHasText]="false"
(imageUploaded)="onImageUploadSuccess($event, 'pic_url')" [isHasAudio]="false"
></app-upload-image-with-preview> [defaultItemType]="'rect'"
(save)="saveData($event)"
<app-audio-recorder
></app-custom-hot-zone>
<div style="margin-top: 30px; width: 500px; height: 150px; border: 2px solid #ccc; border-radius: 5px; padding: 10px">
<span style="margin-right: 10px"> 问题类型: </span>
<nz-radio-group [(ngModel)]="item.questionType" (ngModelChange)="onRadioChange($event)">
<label nz-radio nzValue="1">音频</label>
<label nz-radio nzValue="2">文本</label>
<label nz-radio nzValue="3">音频+文本</label>
</nz-radio-group>
<div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column">
<input *ngIf="item.questionType == 2 || item.questionType == 3" style="width: 90%; margin-bottom: 5px" type="text" nz-input [(ngModel)]="item.text" (blur)="save()">
<app-audio-recorder *ngIf="item.questionType == 1 || item.questionType == 3"
[audioUrl]="item.audio_url" [audioUrl]="item.audio_url"
(audioUploaded)="onAudioUploadSuccess($event, 'audio_url')" (audioUploaded)="onAudioUploadSuccess($event, 'audio_url')"
></app-audio-recorder> ></app-audio-recorder>
<app-custom-hot-zone></app-custom-hot-zone>
<app-upload-video></app-upload-video>
<app-lesson-title-config></app-lesson-title-config>
</div> </div>
</div>
</div>
<!--<div style="position: absolute; left: 200px; top: 100px; width: 800px;">-->
<!--<input type="text" nz-input [(ngModel)]="item.text" (blur)="save()">-->
<!--<app-upload-image-with-preview-->
<!--[picUrl]="item.pic_url"-->
<!--(imageUploaded)="onImageUploadSuccess($event, 'pic_url')"-->
<!--&gt;</app-upload-image-with-preview>-->
<!--<app-audio-recorder-->
<!--[audioUrl]="item.audio_url"-->
<!--(audioUploaded)="onAudioUploadSuccess($event, 'audio_url')"-->
<!--&gt;</app-audio-recorder>-->
<!--<app-custom-hot-zone></app-custom-hot-zone>-->
<!--<app-upload-video></app-upload-video>-->
<!--<app-lesson-title-config></app-lesson-title-config>-->
<!--</div>-->
</div> </div>
......
import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, ApplicationRef, ChangeDetectorRef} from '@angular/core'; import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, ApplicationRef, ChangeDetectorRef} from '@angular/core';
import {NzMessageService} from "ng-zorro-antd";
...@@ -10,12 +11,14 @@ import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, Ap ...@@ -10,12 +11,14 @@ import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, Ap
export class FormComponent implements OnInit, OnChanges, OnDestroy { export class FormComponent implements OnInit, OnChanges, OnDestroy {
// 储存数据用 // 储存数据用
saveKey = "test_0011"; saveKey = "pu14";
// 储存对象 // 储存对象
item; item;
bgItem = {};
hotZoneItemArr = [];
constructor(private appRef: ApplicationRef,private changeDetectorRef: ChangeDetectorRef) { constructor(private appRef: ApplicationRef,private changeDetectorRef: ChangeDetectorRef, private message: NzMessageService) {
} }
...@@ -24,10 +27,13 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -24,10 +27,13 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
this.item = {}; this.item = {};
console.log('in ngOnInit');
// 获取存储的数据 // 获取存储的数据
(<any> window).courseware.getData((data) => { (<any> window).courseware.getData((data) => {
if (data) { if (data) {
console.log('data: ', data);
this.item = data; this.item = data;
} }
...@@ -51,6 +57,10 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -51,6 +57,10 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
init() { init() {
console.log('this.item: ' , this.item);
this.bgItem = this.item.bgItem || {};
this.hotZoneItemArr = this.item.hotZoneItemArr || [];
} }
...@@ -74,12 +84,35 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -74,12 +84,35 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
this.save(); this.save();
} }
onRadioChange(e) {
console.log('e: ', e);
this.save();
}
saveData(e) {
console.log(' in saveData e: ', e);
const {bgItem, hotZoneItemArr} = e;
this.bgItem = bgItem;
this.hotZoneItemArr = hotZoneItemArr;
this.item.bgItem = bgItem;
this.item.hotZoneItemArr = hotZoneItemArr;
this.save();
this.message.create(
'success',
'保存成功'
);
}
/** /**
* 储存数据 * 储存数据
*/ */
save() { save() {
console.log('saven ...');
(<any> window).courseware.setData(this.item, null, this.saveKey); (<any> window).courseware.setData(this.item, null, this.saveKey);
this.refresh(); this.refresh();
} }
......
...@@ -36,7 +36,6 @@ class Sprite { ...@@ -36,7 +36,6 @@ class Sprite {
export class MySprite extends Sprite { export class MySprite extends Sprite {
_width = 0; _width = 0;
...@@ -69,6 +68,13 @@ export class MySprite extends Sprite { ...@@ -69,6 +68,13 @@ export class MySprite extends Sprite {
img; img;
_z = 0; _z = 0;
_showRect;
_bitmapFlag = false;
_offCanvas;
_offCtx;
init(imgObj = null, anchorX: number = 0.5, anchorY: number = 0.5) { init(imgObj = null, anchorX: number = 0.5, anchorY: number = 0.5) {
...@@ -87,6 +93,10 @@ export class MySprite extends Sprite { ...@@ -87,6 +93,10 @@ export class MySprite extends Sprite {
} }
setShowRect(rect) {
this._showRect = rect;
}
setShadow(offX, offY, blur, color = 'rgba(0, 0, 0, 0.3)') { setShadow(offX, offY, blur, color = 'rgba(0, 0, 0, 0.3)') {
...@@ -103,6 +113,8 @@ export class MySprite extends Sprite { ...@@ -103,6 +113,8 @@ export class MySprite extends Sprite {
} }
update($event = null) { update($event = null) {
if (!this.visible && this.childDepandVisible) { if (!this.visible && this.childDepandVisible) {
return; return;
...@@ -139,21 +151,21 @@ export class MySprite extends Sprite { ...@@ -139,21 +151,21 @@ export class MySprite extends Sprite {
//
if (this._radius) { // if (this._radius) {
//
const r = this._radius; // const r = this._radius;
const w = this.width; // const w = this.width;
const h = this.height; // const h = this.height;
//
this.ctx.lineTo(-w / 2, h / 2); // 创建水平线 // this.ctx.lineTo(-w / 2, h / 2); // 创建水平线
this.ctx.arcTo(-w / 2, -h / 2, -w / 2 + r, -h / 2, r); // this.ctx.arcTo(-w / 2, -h / 2, -w / 2 + r, -h / 2, r);
this.ctx.arcTo(w / 2, -h / 2, w / 2, -h / 2 + r, r); // this.ctx.arcTo(w / 2, -h / 2, w / 2, -h / 2 + r, r);
this.ctx.arcTo(w / 2, h / 2, w / 2 - r, h / 2, r); // this.ctx.arcTo(w / 2, h / 2, w / 2 - r, h / 2, r);
this.ctx.arcTo(-w / 2, h / 2, -w / 2, h / 2 - r, r); // this.ctx.arcTo(-w / 2, h / 2, -w / 2, h / 2 - r, r);
//
this.ctx.clip(); // this.ctx.clip();
} // }
} }
...@@ -176,10 +188,14 @@ export class MySprite extends Sprite { ...@@ -176,10 +188,14 @@ export class MySprite extends Sprite {
if (this.img) { if (this.img) {
if (this._showRect) {
const rect = this._showRect;
this.ctx.drawImage(this.img, rect.x, rect.y, rect.width, rect.height, this._offX + rect.x, this._offY + rect.y, rect.width, rect.height);
} else {
this.ctx.drawImage(this.img, this._offX, this._offY); this.ctx.drawImage(this.img, this._offX, this._offY);
} }
}
} }
...@@ -257,6 +273,13 @@ export class MySprite extends Sprite { ...@@ -257,6 +273,13 @@ export class MySprite extends Sprite {
} }
} }
set btimapFlag(v) {
this._bitmapFlag = v;
}
get btimapFlag() {
return this._bitmapFlag;
}
set alpha(v) { set alpha(v) {
this._alpha = v; this._alpha = v;
if (this.childDepandAlpha) { if (this.childDepandAlpha) {
...@@ -305,7 +328,6 @@ export class MySprite extends Sprite { ...@@ -305,7 +328,6 @@ export class MySprite extends Sprite {
getBoundingBox() { getBoundingBox() {
const getParentData = (item) => { const getParentData = (item) => {
let px = item.x; let px = item.x;
...@@ -343,11 +365,6 @@ export class MySprite extends Sprite { ...@@ -343,11 +365,6 @@ export class MySprite extends Sprite {
const width = this.width * Math.abs(data.sx); const width = this.width * Math.abs(data.sx);
const height = this.height * Math.abs(data.sy); 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}; return {x, y, width, height};
} }
...@@ -759,6 +776,7 @@ export class RichText extends Label { ...@@ -759,6 +776,7 @@ export class RichText extends Label {
disH = 30; disH = 30;
offW = 10;
constructor(ctx?: any) { constructor(ctx?: any) {
super(ctx); super(ctx);
...@@ -788,7 +806,7 @@ export class RichText extends Label { ...@@ -788,7 +806,7 @@ export class RichText extends Label {
const chr = this.text.split(' '); const chr = this.text.split(' ');
let temp = ''; let temp = '';
const row = []; const row = [];
const w = selfW - 80; const w = selfW - this.offW * 2;
const disH = (this.fontSize + this.disH) * this.scaleY; const disH = (this.fontSize + this.disH) * this.scaleY;
...@@ -1103,14 +1121,17 @@ export class MyAnimation extends MySprite { ...@@ -1103,14 +1121,17 @@ export class MyAnimation extends MySprite {
playEnd() { playEnd() {
console.log(' in playEnd');
this.playFlag = false; this.playFlag = false;
this.curDelay = 0; this.curDelay = 0;
this.frameArr[this.frameIndex].visible = true; this.frameArr[this.frameIndex].visible = true;
if (this.playEndFunc) { if (this.playEndFunc) {
this.playEndFunc(); const func = this.playEndFunc;
this.playEndFunc = null; this.playEndFunc = null;
func();
} }
} }
...@@ -1672,5 +1693,7 @@ export function shake(item, time = 0.5, callback = null, rate = 1) { ...@@ -1672,5 +1693,7 @@ export function shake(item, time = 0.5, callback = null, rate = 1) {
} }
// --------------- custom class -------------------- // --------------- custom class --------------------
...@@ -11,9 +11,10 @@ ...@@ -11,9 +11,10 @@
@font-face @font-face
{ {
font-family: 'BRLNSDB'; font-family: 'BRLNSDB_1';
src: url("../../assets/font/BRLNSDB.TTF") ; src: url("/assets/font/BRLNSDB_1.TTF") ;
} }
<div class="game-container" #wrap> <div class="game-container" #wrap>
<canvas id="canvas" #canvas></canvas> <canvas id="canvas" #canvas></canvas>
</div> </div>
<label style="position: absolute; opacity: 0; top: 0px; font-family: 'BRLNSDB_1'">1</label>
import {Component, ElementRef, ViewChild, OnInit, Input, OnDestroy, HostListener} from '@angular/core'; import {Component, ElementRef, ViewChild, OnInit, Input, OnDestroy, HostListener} from '@angular/core';
import { import {
Label, formatTime,
MySprite, tweenChange, getMinScale, hideItem,
Label, LineRect, MyAnimation,
MySprite, removeItemFromArr, RichText, ShapeRect, showItem, showPopParticle, tweenChange,
} from './Unit'; } from './Unit';
import {res, resAudio} from './resources'; import {res, resAudio} from './resources';
...@@ -11,8 +13,7 @@ import {Subject} from 'rxjs'; ...@@ -11,8 +13,7 @@ import {Subject} from 'rxjs';
import {debounceTime} from 'rxjs/operators'; import {debounceTime} from 'rxjs/operators';
import TWEEN from '@tweenjs/tween.js'; import TWEEN from '@tweenjs/tween.js';
import {text} from "@fortawesome/fontawesome-svg-core";
@Component({ @Component({
...@@ -22,8 +23,8 @@ import TWEEN from '@tweenjs/tween.js'; ...@@ -22,8 +23,8 @@ import TWEEN from '@tweenjs/tween.js';
}) })
export class PlayComponent implements OnInit, OnDestroy { export class PlayComponent implements OnInit, OnDestroy {
@ViewChild('canvas', {static: true }) canvas: ElementRef; @ViewChild('canvas', {static: true}) canvas: ElementRef;
@ViewChild('wrap', {static: true }) wrap: ElementRef; @ViewChild('wrap', {static: true}) wrap: ElementRef;
// 数据 // 数据
data; data;
...@@ -57,7 +58,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -57,7 +58,7 @@ export class PlayComponent implements OnInit, OnDestroy {
canvasLeft; canvasLeft;
canvasTop; canvasTop;
saveKey = 'test_0011'; saveKey = 'pu14';
btnLeft; btnLeft;
...@@ -68,6 +69,24 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -68,6 +69,24 @@ export class PlayComponent implements OnInit, OnDestroy {
canTouch = true; canTouch = true;
curPic; curPic;
private bg: any;
private hotZoneArr: any[];
private magnifier: MySprite;
private isMagnifierTouched: boolean;
private curHotZoneItem: any;
private photoAnima: MyAnimation;
private hotZoneRate: number;
private oldHotMapScale: number;
private textLabelArr: any;
private allBtns: any;
private curAudio: any;
private progressBarBg: MySprite;
private currentTime: number;
private isClickedProgress: boolean;
private clickedSuccessArr: any;
private light: LineRect;
private particleLayer: MySprite;
private shadowArr: any;
@HostListener('window:resize', ['$event']) @HostListener('window:resize', ['$event'])
onResize(event) { onResize(event) {
...@@ -80,7 +99,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -80,7 +99,7 @@ export class PlayComponent implements OnInit, OnDestroy {
this.data = {}; this.data = {};
// 获取数据 // 获取数据
const getData = (<any> window).courseware.getData; const getData = (<any>window).courseware.getData;
getData((data) => { getData((data) => {
if (data && typeof data == 'object') { if (data && typeof data == 'object') {
...@@ -144,10 +163,6 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -144,10 +163,6 @@ export class PlayComponent implements OnInit, OnDestroy {
} }
updateItem(item) { updateItem(item) {
if (item) { if (item) {
item.update(); item.update();
...@@ -164,11 +179,6 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -164,11 +179,6 @@ export class PlayComponent implements OnInit, OnDestroy {
} }
initListener() { initListener() {
this.winResizeEventStream this.winResizeEventStream
...@@ -289,7 +299,6 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -289,7 +299,6 @@ export class PlayComponent implements OnInit, OnDestroy {
} }
loadResources() { loadResources() {
const pr = []; const pr = [];
this.rawImages.forEach((value, key) => {// 预加载图片 this.rawImages.forEach((value, key) => {// 预加载图片
...@@ -348,9 +357,6 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -348,9 +357,6 @@ export class PlayComponent implements OnInit, OnDestroy {
} }
checkClickTarget(target) { checkClickTarget(target) {
const rect = target.getBoundingBox(); const rect = target.getBoundingBox();
...@@ -384,9 +390,6 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -384,9 +390,6 @@ export class PlayComponent implements OnInit, OnDestroy {
} }
addUrlToAudioObj(key, url = null, vlomue = 1, loop = false, callback = null) { addUrlToAudioObj(key, url = null, vlomue = 1, loop = false, callback = null) {
const audioObj = this.audioObj; const audioObj = this.audioObj;
...@@ -416,37 +419,169 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -416,37 +419,169 @@ export class PlayComponent implements OnInit, OnDestroy {
this.rawImages.set(url, url); this.rawImages.set(url, url);
} }
initHotZone() {
let curBgRect;
if (this.bg) {
curBgRect = this.bg.getBoundingBox();
}
let oldBgRect = this.data.bgItem.rect;
if (!oldBgRect) {
oldBgRect = curBgRect;
}
const rate = curBgRect.width / oldBgRect.width;
this.hotZoneRate = rate;
this.hotZoneArr = [];
const arr = this.data.hotZoneItemArr;
if (!arr && arr.length > 0) {
return;
}
this.oldHotMapScale = arr[0].mapScale;
// ======================================================编写区域========================================================================== for (let i = 0; i < arr.length; i++) {
const data = JSON.parse(JSON.stringify(arr[i]));
data.rect.x *= rate;
data.rect.y *= rate;
data.rect.width *= rate;
data.rect.height *= rate;
data.rect.x += curBgRect.x;
data.rect.y += curBgRect.y;
const hotZone = this.getHotZoneItem(data, rate);
hotZone.visible = false;
this.hotZoneArr.push(hotZone);
}
}
getHotZoneItem(data, rate) {
const saveRect = data.rect;
let item;
console.log('data~~~: ', data);
if (data.itemType === 'rect') {
item = new ShapeRect(this.ctx);
item.fillColor = '#ff0000';
item.setSize(saveRect.width, saveRect.height);
item.x = saveRect.x;
item.y = saveRect.y;
} else if (data.itemType == 'pic') {
item = this.createBtn(data.pic_url, null, 1);
item.setScaleXY(data.imgScale * rate);
item.x = saveRect.x + saveRect.width / 2;
item.y = saveRect.y + saveRect.height / 2;
item.onClick = () => {
console.log('item.data:', item.data);
this.playAudio(item.data.audio_url);
}
} else if (data.itemType == 'text') {
item = new Label();
item.text = data.text;
item.textAlign = 'center';
item.fontSize = data.fontSize;
item.fontName = data.fontName;
item.fontColor = data.fontColor;
item.x = saveRect.x + saveRect.width / 2;
item.y = saveRect.y + saveRect.height / 2;
item.childDepandAlpha = true;
item.setShadow(0, 1, 1, '#ffd98d')
item.setScaleXY(data.fontScale * rate);
item.refreshSize();
const textBg = this.createBtn('text_bg', null, 1);
item.setMaxSize(textBg.width * 0.98);
textBg.onClick = () => {
console.log('item.data:', item.data);
this.playAudio(item.data.audio_url);
};
textBg.y = 5;
textBg.setScaleXY(1 / item.scaleX * this.oldHotMapScale * this.hotZoneRate);
item.addChild(textBg, -1);
item.bg = textBg;
this.textLabelArr.push(item);
}
item['data'] = data;
this.renderArr.push(item);
return item;
}
/** /**
* 添加默认数据 便于无数据时的展示 * 添加默认数据 便于无数据时的展示
*/ */
initDefaultData() { initDefaultData() {
if (!this.data.pic_url) { if (!this.data.bgItem && !this.data.hotZoneItemArr) {
this.data.pic_url = 'assets/play/default/pic.jpg'; this.data.bgItem = {
this.data.pic_url_2 = 'assets/play/default/pic.jpg'; rect: {height: 892, width: 1585, x: 392, y: 0},
url: 'assets/play/default/pic.jpg'
};
this.data.hotZoneItemArr = [
{
audio_url: 'assets/play/default/audio.mp3',
fontColor: "#8f3758",
fontName: "BRLNSR_1",
fontScale: 1.85,
fontSize: 50,
imgScale: 1,
index: 0,
itemType: "text",
mapScale: 1.85,
rect: {x: 391.84, y: 446.02, width: 244.05, height: 244.05},
text: "test_1"
},
{
audio_url: 'assets/play/default/audio.mp3',
fontColor: "#8f3758",
fontName: "BRLNSR_1",
fontScale: 1.85,
fontSize: 50,
imgScale: 1,
index: 1,
itemType: "text",
mapScale: 1.85,
rect: {x: 961.36, y: 450.36, width: 244.05, height: 244.05},
text: 'test_2'
}
];
} }
} }
// ======================================================编写区域==========================================================================
/** /**
* 添加预加载图片 * 添加预加载图片
*/ */
initImg() { initImg() {
this.addUrlToImages(this.data.pic_url); this.addUrlToImages(this.data.bgItem.url);
this.addUrlToImages(this.data.pic_url_2);
console.log('this.data:', this.data);
this.data.hotZoneItemArr.forEach((item) => {
if (item.itemType === 'pic') {
this.addUrlToImages(item.pic_url);
}
});
} }
/** /**
...@@ -456,14 +591,19 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -456,14 +591,19 @@ export class PlayComponent implements OnInit, OnDestroy {
// 音频资源 // 音频资源
this.addUrlToAudioObj(this.data.audio_url); this.addUrlToAudioObj(this.data.audio_url);
this.addUrlToAudioObj(this.data.audio_url_2); this.data.hotZoneItemArr.forEach((item) => {
if (item.audio_url) {
this.addUrlToAudioObj(item.audio_url);
}
});
// 音效 // 音效
this.addUrlToAudioObj('click', this.rawAudios.get('click'), 0.3); this.addUrlToAudioObj('click', this.rawAudios.get('click'), 1);
this.addUrlToAudioObj('right', this.rawAudios.get('right'), 0.5);
} this.addUrlToAudioObj('wrong', this.rawAudios.get('wrong'), 0.5);
}
/** /**
* 初始化数据 * 初始化数据
...@@ -479,183 +619,508 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -479,183 +619,508 @@ export class PlayComponent implements OnInit, OnDestroy {
// this.mapScale = sy; // this.mapScale = sy;
this.currentTime = 0;
this.renderArr = []; this.renderArr = [];
this.allBtns = [];
this.currentTime = 0;
this.clickedSuccessArr = [];
this.shadowArr = [];
// this.isMagnifierTouched = false;
// this.photoAnima = null;
// this.textLabelArr = [];
// this.allBtns = [];
}
/**
* 初始化试图
*/
initView() {
this.initBg();
this.initTopPart();
this.initHotZone();
} }
createLight() {
/** const light = new LineRect();
* 初始化试图 light.init();
*/ light.visible = false;
initView() { light.setShadow(0, 0, 15 * this.mapScale, 'rgba(255, 255, 0, 1)')
light.lineWidth = 7 * this.mapScale;
// this.light = light;
this.renderArr.push(light);
return light;
}
initTopPart() {
switch (this.data.questionType) {
case '1':
this.initBigAudioPlayer();
break;
case '2':
this.initBigTextQuestion();
break;
this.initPic(); case '3':
this.initPlayerAndText();
break;
}
}
this.initBottomPart(); initPlayerAndText() {
const audioPlayer = this.initSmallAudioPlayer();
const textPanel = this.initSmallTextQuestion();
const offX = 10 * this.mapScale;
const totalW = audioPlayer.width * audioPlayer.scaleX + textPanel.width * textPanel.scaleX + offX;
audioPlayer.x = this.canvasWidth / 2 - totalW / 2 + audioPlayer.width / 2 * audioPlayer.scaleX;
textPanel.x = audioPlayer.x + audioPlayer.width / 2 * audioPlayer.scaleX + offX + textPanel.width / 2 * textPanel.scaleX;
} }
initBottomPart() {
const btnLeft = new MySprite(); initSmallAudioPlayer() {
btnLeft.init(this.images.get('btn_left')); const res = {
btnLeft.x = this.canvasWidth - 150 * this.mapScale; playerBg: 'player_bg_small',
btnLeft.y = this.canvasHeight - 100 * this.mapScale; playerTop: 'player_top_small',
btnPlay: 'btn_play_small',
btnPause: 'btn_pause_small',
barTop: 'progressbar_played_small',
barBottom: 'progressbar_bg_small',
barBtn: 'btn_current_position_small',
};
const audioPlayer = this.initAudioPlayer(res);
audioPlayer['progress'].x += 15;
audioPlayer['progress'].setScaleXY(0.9);
audioPlayer['progress']['bar'].y += 2;
audioPlayer['playBtn'].x -= 12
audioPlayer['playBtn'].setScaleXY(0.9);
return audioPlayer;
}
btnLeft.setScaleXY(this.mapScale);
this.renderArr.push(btnLeft);
this.btnLeft = btnLeft; initBigAudioPlayer() {
const res = {
playerBg: 'player_bg_big',
playerTop: 'player_top_big',
btnPlay: 'btn_play_big',
btnPause: 'btn_pause_big',
barTop: 'progressbar_played_big',
barBottom: 'progressbar_bg_big',
barBtn: 'btn_current_position_big',
};
this.initAudioPlayer(res);
}
initAudioPlayer(res) {
this.curAudio = this.audioObj[this.data.audio_url];
this.curAudio.onended = () => {
this.setAudioState(this.curAudio, false);
this.curAudio.currentTime = 0;
}
const btnRight = new MySprite(); const audioPlayer = this.createAudioPlayer(res);
btnRight.init(this.images.get('btn_right')); audioPlayer.setScaleXY(this.mapScale);
btnRight.x = this.canvasWidth - 50 * this.mapScale; audioPlayer.x = this.canvasWidth / 2;
btnRight.y = this.canvasHeight - 100 * this.mapScale; audioPlayer.y = audioPlayer.height / 2 * audioPlayer.scaleY;
btnRight.setScaleXY(this.mapScale); this.renderArr.push(audioPlayer);
this.renderArr.push(btnRight); this.setAudioProgress(this.progressBarBg, 0);
this.btnRight = btnRight; return audioPlayer;
} }
initPic() { private createAudioPlayer(res) {
const audioPlayer = this.createSprite(res.playerBg)
const playBtn = this.createPlayPauseButton(res.btnPlay, res.btnPause);
audioPlayer.addChild(playBtn);
audioPlayer['playBtn'] = playBtn;
const progressBarContainer = this.createProgressBar(res.barTop, res.barBottom, res.barBtn);
progressBarContainer.x = -this.progressBarBg.width / 2 - 32
progressBarContainer.y = -1;
playBtn.x = progressBarContainer.x + this.progressBarBg.width + 50;
playBtn.y = progressBarContainer.y - 4;
audioPlayer.addChild(progressBarContainer);
const maxW = this.canvasWidth * 0.7; const audioTopItem = this.createSprite(res.playerTop);
audioPlayer.addChild(audioTopItem);
const pic1 = new MySprite(); audioPlayer['progress'] = progressBarContainer;
pic1.init(this.images.get(this.data.pic_url));
pic1.x = this.canvasWidth / 2;
pic1.y = this.canvasHeight / 2;
pic1.setScaleXY(maxW / pic1.width);
this.renderArr.push(pic1); return audioPlayer;
this.pic1 = pic1; }
private createPlayPauseButton(playKey, pauseKey) {
const button = this.createSprite(playKey);
const btnPause = this.createSprite(pauseKey);
this.hide(btnPause);
button.addChild(btnPause);
const label1 = new Label(); this.curAudio.playBtn = button;
label1.text = this.data.text; this.curAudio.stopBtn = btnPause;
label1.textAlign = 'center';
label1.fontSize = 50;
label1.fontName = 'BRLNSDB';
label1.fontColor = '#ffffff';
pic1.addChild(label1); return button;
}
private createProgressBar(barTopKey, barBottomKey, barBtnKey) {
const container = new MySprite();
const progressBarBg = this.createSprite(barBottomKey);
progressBarBg.anchorX = 0;
this.progressBarBg = progressBarBg;
const progressBarPlayed = this.createSprite(barTopKey);
progressBarPlayed.anchorX = 0;
progressBarPlayed.x = 5;
progressBarPlayed.y = -6.5;
// progressBarPlayed.scaleX = 0;
progressBarBg['bar'] = progressBarPlayed;
container['bar'] = progressBarPlayed;
const btn = this.createSprite(barBtnKey)
btn.y = -3;
progressBarBg['btn'] = btn;
const currentTime = this.createTime();
currentTime.text = formatTime('mm:ss', new Date(this.currentTime * 1000));
currentTime.refreshSize();
currentTime.x = 0;
currentTime.y = 30;
progressBarBg['timeLabel'] = currentTime;
const totalTime = this.createTime();
totalTime.text = formatTime('mm:ss', new Date(this.curAudio.duration * 1000));
totalTime.refreshSize();
totalTime.x = progressBarBg.width - totalTime.width;
totalTime.y = currentTime.y;
container.addChild(progressBarBg);
container.addChild(progressBarPlayed);
container.addChild(btn);
container.addChild(currentTime)
container.addChild(totalTime)
return container;
}
private createTime() {
const label = new Label();
label.fontSize = 22;
label.fontColor = '#fff3cc';
label.fontName = 'BRLNSDB_1';
label.setShadow(1, 1, 2, '#000000')
return label;
}
private setAudioProgress(target: any, progress: number) {
target.btn.x = target.width * progress;
const showRect = {x: 0, y: 0, width: target.bar.width * progress, height: target.bar.height};
target.bar.setShowRect(showRect);
const pic2 = new MySprite(); this.currentTime = Math.floor(progress * this.curAudio.duration);
pic2.init(this.images.get(this.data.pic_url_2)); target.timeLabel.text = formatTime('mm:ss', new Date(this.currentTime * 1000));
pic2.x = this.canvasWidth / 2 + this.canvasWidth; }
pic2.y = this.canvasHeight / 2;
pic2.setScaleXY(maxW / pic2.width);
this.renderArr.push(pic2); private touchDownProgressBar(target) {
this.pic2 = pic2; this.setAudioState(this.curAudio, false);
this.curPic = pic1; const rect = target.getBoundingBox();
const sx = rect.width / target.width;
const tmpW = (this.mx - rect.x) / sx;
if (tmpW >= 0 && tmpW <= target.width) {
const progress = tmpW / target.width;
this.curAudio.currentTime = progress * this.curAudio.duration;
this.setAudioProgress(target, progress);
}
} }
private setAudioState(audio: any, isPlay: boolean) {
if (isPlay) {
this.hide(audio.playBtn);
this.show(audio.stopBtn);
audio.play();
} else {
this.hide(audio.stopBtn);
this.show(audio.playBtn);
audio.pause();
}
}
btnLeftClicked() { private hide(element: MySprite) {
element.alpha = 0;
}
private show(element: MySprite) {
element.alpha = 1;
}
this.lastPage(); private touchDownAudioBtn(audio) {
if (audio.paused) {
audio.play();
this.setAudioState(audio, true);
} else {
audio.pause();
this.setAudioState(audio, false);
}
} }
btnRightClicked() {
this.nextPage();
initBigTextQuestion() {
const textBg = this.createSprite('text_bg_big');
textBg.setScaleXY(this.mapScale);
textBg.x = this.canvasWidth / 2;
textBg.y = textBg.height / 2 * textBg.scaleY;
const label = new RichText();
label.text = this.data.text;
textBg.addChild(label);
label.width = textBg.width ;
label.offW = 30;
label.fontName = 'BRLNSDB_1';
label.textAlign = 'center';
label.fontSize = 37;
label.disH = 6;
label.y = - 22;
this.renderArr.push(textBg);
}
initSmallTextQuestion() {
const textBg = this.createSprite('text_bg_small');
textBg.setScaleXY(this.mapScale);
textBg.x = this.canvasWidth / 2;
textBg.y = textBg.height / 2 * textBg.scaleY;
const label = new RichText();
label.text = this.data.text;
textBg.addChild(label);
label.width = textBg.width ;
label.offW = 30;
label.fontName = 'BRLNSDB_1';
label.textAlign = 'center';
label.fontSize = 37;
label.disH = 6;
label.y = - 22;
this.renderArr.push(textBg);
return textBg;
} }
lastPage() {
if (this.curPic == this.pic1) {
clickedHotZone(item) {
if (this.clickedSuccessArr.indexOf(item) !== -1) {
this.canTouch = true;
return; return;
} }
this.canTouch = false; this.clickedSuccessArr.push(item);
const moveLen = this.canvasWidth; const data = item.data;
tweenChange(this.pic1, {x: this.pic1.x + moveLen}, 1); if (!data.checked) {
tweenChange(this.pic2, {x: this.pic2.x + moveLen}, 1, () => { console.log('right');
this.canTouch = true; this.showFrame(item);
this.curPic = this.pic1; } else {
}); console.log('wrong');
this.clickWrong();
}
} }
nextPage() {
if (this.curPic == this.pic2) { clickWrong() {
return;
// tweenChange()
const crack = this.createSprite('crack');
crack.alpha = 0;
this.renderArr.push(crack);
crack.x = this.mx;
crack.y = this.my;
tweenChange(crack, { alpha: 1 }, 0.25, () => {
setTimeout(() => {
removeItemFromArr(this.renderArr, crack);
}, 500)
}, TWEEN.Easing.Quadratic.Out)
this.playAudio('wrong', true);
// shake(this.bgRect, 0.5, () => {
// this.canTouch = true;
// });
} }
this.canTouch = false; showFrame(hotZone) {
const moveLen = this.canvasWidth; this.playAudio('right', true);
tweenChange(this.pic1, {x: this.pic1.x - moveLen}, 1);
tweenChange(this.pic2, {x: this.pic2.x - moveLen}, 1, () => { const light = this.createLight();
this.canTouch = true; light.setScaleXY(0);
this.curPic = this.pic2; light.alpha = 0;
light.visible = true;
// const hotZone = this.hotZoneArr[index];
const px = hotZone.x + hotZone.width / 2;
const py = hotZone.y + hotZone.height / 2;
light.x = px;
light.y = py;
light.setSize(hotZone.width, hotZone.height);
tweenChange(light, {
scaleX: 1, // hotZone.width / (light.width - edge * 2),
scaleY: 1, // hotZone.height / (light.height - edge * 2),
alpha: 1
}, 0.5, () => {
setTimeout(() => {
hideItem(light, 0.3, () => {
removeItemFromArr(this.renderArr, light);
}, TWEEN.Easing.Quadratic.In);
}, 200);
}, TWEEN.Easing.Quadratic.Out);
setTimeout(() => {
this.playAudio('star', true);
showPopParticle(this.images.get('star'), {x: px, y: py},
this.particleLayer, 20, 50 * this.mapScale, 100 * this.mapScale, 1);
}, 400);
setTimeout( () => {
this.showShadow(hotZone);
}, 1000);
}
showShadow(hotZone) {
const shadow = new MySprite();
shadow.init(this.images.get('shadow'));
shadow.alpha = 0;
shadow.x = hotZone.x + hotZone.width / 2;
shadow.y = hotZone.y + hotZone.height / 2;
shadow.childDepandAlpha = true;
this.renderArr.push(shadow);
const lineRect = new LineRect();
lineRect.init();
lineRect.lineWidth = 2 * this.mapScale;
// lineRect.lineColor = '#c2ff39';
lineRect.lineColor = '#ffffff';
lineRect.setSize(hotZone.width - lineRect.lineWidth, hotZone.height - lineRect.lineWidth);
shadow.addChild(lineRect);
const sx = hotZone.width / (shadow.width - 360);
const sy = hotZone.height / (shadow.height - 360);
shadow.scaleX = sx;
shadow.scaleY = sy;
lineRect.scaleX = 1 / sx;
lineRect.scaleY = 1 / sy;
showItem(shadow, 0.5, () => {
this.checkGameEnd();
}); });
this.shadowArr.push(shadow);
}
checkGameEnd() {
if (this.clickedSuccessArr.length < this.hotZoneArr.length) {
this.canTouch = true;
return;
} }
pic1Clicked() { this.gameEnd();
this.playAudio(this.data.audio_url);
} }
pic2Clicked() { gameEnd() {
this.playAudio(this.data.audio_url_2); console.log('game end');
} }
private updateTime() {
if (!this.isClickedProgress) {
const progress = this.curAudio.currentTime / this.curAudio.duration;
this.setAudioProgress(this.progressBarBg, progress);
}
}
mapDown(event) { mapDown(event) {
if (!this.canTouch) { if (!this.canTouch) {
return; return;
} }
if ( this.checkClickTarget(this.btnLeft) ) { this.allBtns.forEach((btn) => {
this.btnLeftClicked(); if (this.checkClickTarget(btn)) {
btn._onTouchStart();
return; return;
} }
});
if ( this.checkClickTarget(this.btnRight) ) { for (const item of this.hotZoneArr) {
this.btnRightClicked(); if (this.checkClickTarget(item)) {
this.clickedHotZone(item);
return; return;
} }
}
if ( this.checkClickTarget(this.pic1) ) { // ------- 播放器 --------
this.pic1Clicked(); if (this.checkClickTarget(this.progressBarBg)) {
this.isClickedProgress = true;
this.touchDownProgressBar(this.progressBarBg);
return; return;
} }
if (this.checkClickTarget(this.curAudio.playBtn)) {
if ( this.checkClickTarget(this.pic2) ) { this.touchDownAudioBtn(this.curAudio);
this.pic2Clicked();
return; return;
} }
// ------------------------
if (this.checkClickTarget(this.bg)) {
this.clickWrong();
}
} }
mapMove(event) { mapMove(event) {
if (!this.isClickedProgress) {
return;
}
this.allBtns.forEach((btn) => {
if (!this.checkClickTarget(btn)) {
btn._isDown = false;
return;
}
});
this.touchDownProgressBar(this.progressBarBg);
} }
mapUp(event) { mapUp(event) {
this.allBtns.forEach((btn) => {
if (btn._isDown) {
btn._onTouchEnd();
} }
});
this.isClickedProgress = false;
}
update() { update() {
...@@ -668,12 +1133,112 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -668,12 +1133,112 @@ export class PlayComponent implements OnInit, OnDestroy {
// ---------------------------------------------------------- // ----------------------------------------------------------
this.updateArr(this.renderArr); this.updateArr(this.renderArr);
this.updateArr(this.textLabelArr);
this.updateItem(this.particleLayer);
this.updateTime();
}
private createSprite(key: string) {
const sprite = new MySprite();
sprite.init(this.images.get(key));
return sprite;
}
private initBg() {
console.log('data:', this.data);
const bg = this.createSprite('bg');
const sx = this.canvasWidth / bg.width;
const sy = this.canvasHeight / bg.height;
const s = Math.max(sx, sy);
bg.setScaleXY(s);
bg.x = this.canvasWidth / 2;
bg.y = this.canvasHeight / 2;
this.renderArr.push(bg);
const picBg = this.createSprite('pic_bg');
picBg.setScaleXY(this.mapScale);
picBg.x = this.canvasWidth / 2;
picBg.y = this.canvasHeight - picBg.height / 2 * picBg.scaleY;
this.renderArr.push(picBg);
const url = this.data.bgItem.url;
const pic = this.createSprite(url);
const rect = new ShapeRect();
// rect.fillColor = '#ffffff';
rect.fillColor = '#d3323e';
rect.width = 913;
rect.height = 495;
rect.x = -rect.width / 2 - 8;
rect.y = -rect.height / 2 + 8;
// rect.alpha = 0.3;
picBg.addChild(rect, -1);
pic.x = rect.width / 2;
pic.y = rect.height / 2;
const psx = (rect.width) / pic.width;
const psy = (rect.height) / pic.height;
const ps = Math.min(psx, psy);
pic.setScaleXY(ps);
this.bg = pic;
rect.addChild(pic);
const particleLayer = new MySprite();
particleLayer.width = this.canvasWidth;
particleLayer.height = this.canvasHeight;
this.particleLayer = particleLayer;
}
private createBtn(url_up: string, url_down: string = null, downScale = 0.9) {
const btnUp: any = this.createSprite(url_up);
let btnDown;
if (url_down) {
btnDown = this.createSprite(url_down);
btnUp.addChild(btnDown);
}
btnUp.btnDown = btnDown;
btnUp._onTouchStart = () => {
if (btnDown) {
btnDown.alpha = 1;
btnUp.alpha = 0;
} }
if (!btnUp.baseScale) {
btnUp.baseScale = btnUp.scaleX;
}
btnUp.setScaleXY(btnUp.baseScale * downScale);
if (btnUp.onTouchStart) {
btnUp.onTouchStart();
}
btnUp._isDown = true;
};
btnUp._onTouchMove = () => {
};
btnUp._onTouchEnd = () => {
if (btnDown) {
btnDown.alpha = 0;
btnUp.alpha = 1;
}
btnUp.setScaleXY(btnUp.baseScale);
if (btnUp.onClick) {
btnUp.onClick();
}
btnUp._isDown = false;
};
this.allBtns.push(btnUp);
return btnUp;
}
} }
const res = [ const res = [
// ['bg', "assets/play/bg.jpg"], ['bg', "assets/play/bg.png"],
['btn_left', "assets/play/btn_left.png"], ['pic_bg', "assets/play/pic_bg.png"],
['btn_right', "assets/play/btn_right.png"], ['star', "assets/play/star.png"],
// ['text_bg', "assets/play/text_bg.png"], ['shadow', "assets/play/shadow.png"],
['crack', "assets/play/crack.png"],
['text_bg_big', "assets/play/big/text_bg.png"],
['text_bg_small', "assets/play/small/text_bg.png"],
['btn_play_big', "assets/play/big/btn_play.png"],
['btn_pause_big', "assets/play/big/btn_pause.png"],
['btn_current_position_big', "assets/play/big/btn_current_position.png"],
['progressbar_bg_big', "assets/play/big/progressbar_bg.png"],
['progressbar_played_big', "assets/play/big/progressbar_played.png"],
['player_bg_big', "assets/play/big/player_bg.png"],
['player_top_big', "assets/play/big/player_top.png"],
['btn_play_small', "assets/play/small/btn_play.png"],
['btn_pause_small', "assets/play/small/btn_pause.png"],
['btn_current_position_small', "assets/play/small/btn_current_position.png"],
['progressbar_bg_small', "assets/play/small/progressbar_bg.png"],
['progressbar_played_small', "assets/play/small/progressbar_played.png"],
['player_bg_small', "assets/play/small/player_bg.png"],
['player_top_small', "assets/play/small/player_top.png"],
]; ];
...@@ -12,6 +32,8 @@ const res = [ ...@@ -12,6 +32,8 @@ const res = [
const resAudio = [ const resAudio = [
['click', "assets/play/music/click.mp3"], ['click', "assets/play/music/click.mp3"],
['right', "assets/play/music/right.mp3"],
['wrong', "assets/play/music/wrong.mp3"],
]; ];
......
...@@ -2,7 +2,9 @@ ...@@ -2,7 +2,9 @@
"extends": "./tsconfig.json", "extends": "./tsconfig.json",
"compilerOptions": { "compilerOptions": {
"outDir": "./out-tsc/app", "outDir": "./out-tsc/app",
"types": [] "types": [
"node"
]
}, },
"files": [ "files": [
"src/main.ts", "src/main.ts",
......
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