Commit 825a121d authored by limingzhe's avatar limingzhe

feat: 首次提交

parent 3695f7ce
import TWEEN from '@tweenjs/tween.js';
interface AirWindow extends Window {
air: any;
curCtx: any;
}
declare let window: AirWindow;
class Sprite {
x = 0;
......@@ -12,9 +17,13 @@ class Sprite {
angle = 0;
ctx;
constructor(ctx) {
constructor(ctx = null) {
if (!ctx) {
this.ctx = window.curCtx;
} else {
this.ctx = ctx;
}
}
update($event) {
this.draw();
}
......@@ -30,25 +39,45 @@ class Sprite {
export class MySprite extends Sprite {
width = 0;
height = 0;
_width = 0;
_height = 0;
_anchorX = 0;
_anchorY = 0;
_offX = 0;
_offY = 0;
scaleX = 1;
scaleY = 1;
alpha = 1;
_alpha = 1;
rotation = 0;
visible = true;
skewX = 0;
skewY = 0;
_shadowFlag = false;
_shadowColor;
_shadowOffsetX = 0;
_shadowOffsetY = 0;
_shadowBlur = 5;
_radius = 0;
children = [this];
childDepandVisible = true;
childDepandAlpha = false;
img;
_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) {
......@@ -56,6 +85,8 @@ export class MySprite extends Sprite {
this.width = this.img.width;
this.height = this.img.height;
}
this.anchorX = anchorX;
......@@ -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) {
if (this.visible) {
this.draw();
if (!this.visible && this.childDepandVisible) {
return;
}
this.draw();
}
draw() {
......@@ -78,6 +133,8 @@ export class MySprite extends Sprite {
this.updateChildren();
this.ctx.restore();
}
drawInit() {
......@@ -90,26 +147,73 @@ export class MySprite extends Sprite {
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() {
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._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);
}
}
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();
}
} else {
this.children[i].update();
child.update();
}
}
}
......@@ -140,6 +244,11 @@ export class MySprite extends Sprite {
return a._z - b._z;
});
if (this.childDepandAlpha) {
child.alpha = this.alpha;
}
}
removeChild(child) {
const index = this.children.indexOf(child);
......@@ -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) {
this._anchorX = value;
this.refreshAnchorOff();
......@@ -163,214 +321,1651 @@ export class MySprite extends Sprite {
return this._anchorY;
}
refreshAnchorOff() {
this._offX = -this.width * this.anchorX;
this._offY = -this.height * this.anchorY;
this._offX = -this._width * this.anchorX;
this._offY = -this._height * this.anchorY;
}
setScaleXY(value) {
this.scaleX = this.scaleY = value;
}
getBoundingBox() {
const getParentData = (item) => {
let px = item.x;
let py = item.y;
let sx = item.scaleX;
let sy = item.scaleY;
const parent = item.parent;
if (parent) {
const obj = getParentData(parent);
const _x = obj.px;
const _y = obj.py;
const _sx = obj.sx;
const _sy = obj.sy;
px = _x + item.x * _sx;
py = _y + item.y * _sy;
sx *= _sx;
sy *= _sy;
}
return {px, py, sx, sy};
};
const data = getParentData(this);
const x = data.px + this._offX * Math.abs(data.sx);
const y = data.py + this._offY * Math.abs(data.sy);
const width = this.width * Math.abs(data.sx);
const height = this.height * Math.abs(data.sy);
return {x, y, width, height};
}
}
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) {
this.scaleX = this.scaleY = value;
}
// console.log('angle: ', angle);
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 tween = new TWEEN.Tween(this)
.to({ y: targetY }, 2500)
.easing(TWEEN.Easing.Quintic.Out)
.onComplete(function() {
self.hide(callBack);
// if (callBack) {
// callBack();
// }
})
.start();
const r = getPosDistance(item.x, item.y, x0, y0);
let a = getAngleByPos(item.x, item.y, x0, y0);
a += 90;
const obj = {r, a};
}
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) {
tween.onComplete(() => {
callBack();
});
}
})
.start(); // Start the tween immediately.
if (easing) {
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)
.to({ alpha: 0 }, 800)
// .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
.onComplete(function() {
if (callBack) {
callBack();
.delay(second * 1000)
.onComplete(() => {
if (callback) {
callback();
}
})
.start(); // Start the tween immediately.
}
.start();
}
shake(id) {
export function formatTime(fmt, date) {
// "yyyy-MM-dd HH:mm:ss";
if (!this.baseX) {
this.baseX = this.x;
const o = {
'M+': date.getMonth() + 1, // 月份
'd+': date.getDate(), // 日
'h+': date.getHours(), // 小时
'm+': date.getMinutes(), // 分
's+': date.getSeconds(), // 秒
'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
S: date.getMilliseconds() // 毫秒
};
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;
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},
export function getMinScale(item, maxLen) {
const sx = maxLen / item.width;
const sy = maxLen / item.height;
const minS = Math.min(sx, sy);
return minS;
}
];
const self = this;
export function jelly(item, time = 0.7) {
function runSequence() {
if (self['shakeTween']) {
self['shakeTween'].stop();
if (item.jellyTween) {
TWEEN.remove(item.jellyTween);
}
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();
const t = time / 9;
const baseSX = item.scaleX;
const baseSY = item.scaleY;
let index = 0;
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)
.to({ y: targetY }, time)
.easing(TWEEN.Easing.Cubic.In)
.onComplete(function() {
const particle = new MySprite();
particle.init(img);
particle.x = pos.x;
particle.y = pos.y;
parent.addChild(particle);
// self.hideItem(callBack);
if (callBack) {
callBack();
}
})
.start();
const randomR = 360 * Math.random();
particle.rotation = randomR;
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;
this.alpha = 0;
// scaleItem(particle, 0, 0.6, () => {
//
// });
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() {
scaleItem(particle, randomS, 0.6, () => {
}, TWEEN.Easing.Exponential.Out);
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) {
this.width = w;
this.height = h;
item.shakeTween = true;
const offX = 15 * item.scaleX * rate;
const offY = 15 * item.scaleX * rate;
const baseX = item.x;
const baseY = item.y;
const easing = TWEEN.Easing.Sinusoidal.InOut;
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;
this.ctx.fillRect(this._offX, this._offY, this.width, this.height);
const move2 = () => {
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 {
lineDashFlag = false;
arrow: MySprite;
label: Label;
text;
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;
......@@ -391,7 +1986,7 @@ export class HotZoneItem extends MySprite {
if (!this.label) {
this.label = new Label(this.ctx);
this.label.anchorY = 0;
this.label.fontSize = '40px';
this.label.fontSize = 40;
this.label.textAlign = 'center';
this.addChild(this.label);
// this.label.scaleX = 1 / this.scaleX;
......@@ -403,8 +1998,8 @@ export class HotZoneItem extends MySprite {
if (text) {
this.label.text = text;
} else if (this.text) {
this.label.text = this.text;
} else if (this.title) {
this.label.text = this.title;
}
this.label.visible = true;
......@@ -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 {
lineDashFlag = false;
arrow: MySprite;
label:Label;
label: Label;
text;
showLabel(text = null) {
......@@ -546,7 +2215,7 @@ export class EditorItem extends MySprite {
if (!this.label) {
this.label = new Label(this.ctx);
this.label.anchorY = 0;
this.label.fontSize = '50px';
this.label.fontSize = 50;
this.label.textAlign = 'center';
this.addChild(this.label);
this.label.setScaleXY(1 / this.scaleX);
......@@ -657,109 +2326,783 @@ export class EditorItem extends MySprite {
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;
}
//
//
// import TWEEN from '@tweenjs/tween.js';
//
//
// class Sprite {
// x = 0;
// y = 0;
// color = '';
// radius = 0;
// alive = false;
// margin = 0;
// angle = 0;
// ctx;
//
// constructor(ctx) {
// this.ctx = ctx;
// }
// update($event) {
// this.draw();
// }
// draw() {
//
// }
//
// }
//
//
//
//
//
// export class MySprite extends Sprite {
//
// width = 0;
// height = 0;
// _anchorX = 0;
// _anchorY = 0;
// _offX = 0;
// _offY = 0;
// scaleX = 1;
// scaleY = 1;
// alpha = 1;
// rotation = 0;
// visible = true;
//
// children = [this];
//
// img;
// _z = 0;
//
//
// 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;
// }
//
//
//
// update($event = null) {
// if (this.visible) {
// this.draw();
// }
// }
// draw() {
//
// this.ctx.save();
//
// this.drawInit();
//
// this.updateChildren();
//
// this.ctx.restore();
// }
//
// drawInit() {
//
// this.ctx.translate(this.x, this.y);
//
// this.ctx.rotate(this.rotation * Math.PI / 180);
//
// this.ctx.scale(this.scaleX, this.scaleY);
//
// this.ctx.globalAlpha = this.alpha;
//
// }
//
// drawSelf() {
// if (this.img) {
// 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) {
//
// 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">
<h5 style="margin-left: 2.5%;"> preview: </h5>
<div class="preview-box" #wrap>
<canvas id="canvas" #canvas></canvas>
</div>
<div nz-row nzType="flex" nzAlign="middle">
<div nz-col nzSpan="5" nzOffset="1">
......@@ -20,39 +17,51 @@
(imageUploaded)="onBackgroundUploadSuccess($event)">
</app-upload-image-with-preview>
</div>
</div>
<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;">
<h5> item-{{i+1}}
<nz-divider style="margin-top: 10px;"></nz-divider>
<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">-->
<!--<app-upload-image-with-preview-->
<!--[picUrl]="it.pic_url"-->
<!--(imageUploaded)="onImgUploadSuccessByImg($event, it)">-->
<!--</app-upload-image-with-preview>-->
<!--</div>-->
<div *ngIf="it.itemType == 'pic'">
<app-upload-image-with-preview
[picUrl]="it?.pic_url"
(imageUploaded)="onItemImgUploadSuccess($event, it)">
</app-upload-image-with-preview>
</div>
<!--<app-audio-recorder-->
<!--[audioUrl]="it.audio_url ? it.audio_url : null "-->
<!--(audioUploaded)="onAudioUploadSuccessByImg($event, it)"-->
<!--&gt;</app-audio-recorder>-->
<div *ngIf="it.itemType == 'text'">
<input type="text" nz-input [(ngModel)]="it.text" (blur)="saveText(it)">
</div>
<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 nz-col nzSpan="5" nzOffset="1">
......@@ -75,7 +84,7 @@
<div class="save-box">
<button class="save-btn" nz-button nzType="primary" [nzSize]="'large'" nzShape="round"
(click)="saveClick()">
(click)="saveClick()" >
<i nz-icon nzType="save"></i>
Save
</button>
......@@ -83,7 +92,9 @@
</div>
</div>
<label style="opacity: 0; position: absolute; top: 0px; font-family: 'BRLNSR_1'">1</label>
......@@ -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 {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 {getMinScale} from "../../play/Unit";
import {tar} from "compressing";
@Component({
......@@ -13,89 +26,87 @@ import TWEEN from '@tweenjs/tween.js';
export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
_bgItem = null;
@Input()
set bgItem(v) {
this._bgItem = v;
this.init();
}
get bgItem() {
return this._bgItem;
}
@Input()
imgItemArr = null;
@Input()
hotZoneItemArr = null;
@Input()
hotZoneArr = null;
@Output()
save = new EventEmitter();
@ViewChild('canvas', {static: true}) canvas: ElementRef;
@ViewChild('wrap', {static: true}) wrap: ElementRef;
@ViewChild('canvas', {static: true }) canvas: ElementRef;
@ViewChild('wrap', {static: true }) wrap: ElementRef;
// @HostListener('window:resize', ['$event'])
@Input()
isHasRect = true;
@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;
canvasHeight = 720;
canvasBaseW = 1280;
// @HostListener('window:resize', ['$event'])
canvasBaseH = 720;
mapScale = 1;
ctx;
mx;
my; // 点击坐标
// 资源
// rawImages = new Map(res);
// 声音
bgAudio = new Audio();
images = new Map();
animationId: any;
// winResizeEventStream = new Subject();
// 资源
// rawImages = new Map(res);
winResizeEventStream = new Subject();
canvasLeft;
canvasTop;
renderArr;
imgArr = [];
oldPos;
radioValue;
curItem;
bg: MySprite;
changeSizeFlag = false;
changeTopSizeFlag = false;
changeRightSizeFlag = false;
constructor() {
}
_bgItem = null;
constructor() {
get bgItem() {
return this._bgItem;
}
@Input()
set bgItem(v) {
this._bgItem = v;
this.init();
}
onResize(event) {
// this.winResizeEventStream.next();
this.winResizeEventStream.next();
}
......@@ -118,13 +129,22 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
}
onBackgroundUploadSuccess(e) {
console.log('e: ', e);
this.bgItem.url = e.url;
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) {
if (!this.bg) {
......@@ -162,14 +182,25 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
const item = this.getHotZoneItem();
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();
console.log('hotZoneArr:', this.hotZoneArr);
}
onImgUploadSuccessByImg(e, img) {
img.pic_url = e.url;
this.refreshImage (img);
this.refreshImage(img);
}
refreshImage(img) {
......@@ -188,7 +219,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
this.hotZoneArr[i].index = 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 {
}
getHotZoneItem( saveData = null) {
getHotZoneItem(saveData = null) {
const itemW = 200;
......@@ -219,18 +250,46 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
item.x = this.canvasWidth / 2;
item.y = this.canvasHeight / 2;
item.itemType = this.defaultItemType;
if (saveData) {
const saveRect = saveData.rect;
item.scaleX = saveRect.width / item.width;
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.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;
}
......@@ -240,7 +299,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
const item = new EditorItem(this.ctx);
item.load(img.pic_url).then( img => {
item.load(img.pic_url).then(img => {
let maxW, maxH;
if (this.bg) {
......@@ -266,7 +325,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
const saveRect = saveData.rect;
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;
} else {
......@@ -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() {
......@@ -367,20 +446,25 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
// img['audio_url'] = arr[i].audio_url;
// 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);
this.hotZoneArr.push(item);
}
this.refreshHotZoneId();
// this.refreshImageId();
}
initImgArr() {
console.log('this.imgItemArr: ', this.imgItemArr);
......@@ -446,34 +530,40 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
this.oldPos = {x: this.mx, y: this.my};
const arr = this.hotZoneArr;
for (let i = arr.length - 1; i >= 0 ; i--) {
const item = arr[i];
if (item) {
if (this.checkClickTarget(item)) {
for (let i = 0; i < this.hotZoneArr.length; i++) {
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);
}
const item = this.hotZoneArr[i];
let callback;
let target;
switch (item.itemType) {
case 'rect':
target = item;
callback = this.clickedHotZoneRect.bind(this);
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;
}
}
}
// this.hideAllLineDash();
}
mapMove(event) {
if (!this.curItem) { return; }
if (!this.curItem) {
return;
}
if (this.changeSizeFlag) {
this.changeSize();
......@@ -493,6 +583,9 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
}
this.oldPos = {x: this.mx, y: this.my};
this.saveDisabled = true;
}
mapUp(event) {
......@@ -503,13 +596,11 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
}
changeSize() {
const rect = this.curItem.getBoundingBox();
let lenW = ( this.mx - (rect.x + rect.width / 2) ) * 2;
let lenH = ( (rect.y + rect.height / 2) - this.my ) * 2;
let lenW = (this.mx - (rect.x + rect.width / 2)) * 2;
let lenH = ((rect.y + rect.height / 2) - this.my) * 2;
let minLen = 20;
......@@ -538,7 +629,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
const rect = this.curItem.getBoundingBox();
// 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;
......@@ -565,7 +656,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
changeRightSize() {
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 minLen = 20;
......@@ -634,6 +725,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
// }
this.updateArr(this.hotZoneArr);
this.updatePos()
TWEEN.update();
......@@ -648,7 +740,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
}
renderAfterResize() {
this.canvasWidth = this.wrap.nativeElement.clientWidth;
this.canvasHeight = this.wrap.nativeElement.clientHeight;
......@@ -657,11 +748,11 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
initListener() {
// this.winResizeEventStream
// .pipe(debounceTime(500))
// .subscribe(data => {
// this.renderAfterResize();
// });
this.winResizeEventStream
.pipe(debounceTime(500))
.subscribe(data => {
this.renderAfterResize();
});
if (this.IsPC()) {
......@@ -767,41 +858,38 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
if (this.bg) {
bgItem['rect'] = this.bg.getBoundingBox();
} 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 hotZoneArr = this.hotZoneArr;
for (let i = 0; i < hotZoneArr.length; i++) {
const hotZoneItem = {
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'].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'].width = Math.round( (hotZoneItem['rect'].width) * 100) / 100;
hotZoneItem['rect'].height = Math.round( (hotZoneItem['rect'].height) * 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'].width = Math.round((hotZoneItem['rect'].width) * 100) / 100;
hotZoneItem['rect'].height = Math.round((hotZoneItem['rect'].height) * 100) / 100;
hotZoneItemArr.push(hotZoneItem);
}
......@@ -810,4 +898,91 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
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 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')"
></app-upload-image-with-preview>
<app-audio-recorder
<div style="padding: 20px">
<app-custom-hot-zone
[bgItem]="bgItem"
[hotZoneItemArr]="hotZoneItemArr"
[isHasPic]="false"
[isHasText]="false"
[isHasAudio]="false"
[defaultItemType]="'rect'"
(save)="saveData($event)"
></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"
(audioUploaded)="onAudioUploadSuccess($event, 'audio_url')"
></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 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>
......
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
export class FormComponent implements OnInit, OnChanges, OnDestroy {
// 储存数据用
saveKey = "test_0011";
saveKey = "pu14";
// 储存对象
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 {
this.item = {};
console.log('in ngOnInit');
// 获取存储的数据
(<any> window).courseware.getData((data) => {
if (data) {
console.log('data: ', data);
this.item = data;
}
......@@ -51,6 +57,10 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
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 {
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() {
console.log('saven ...');
(<any> window).courseware.setData(this.item, null, this.saveKey);
this.refresh();
}
......
......@@ -36,7 +36,6 @@ class Sprite {
export class MySprite extends Sprite {
_width = 0;
......@@ -69,6 +68,13 @@ export class MySprite extends Sprite {
img;
_z = 0;
_showRect;
_bitmapFlag = false;
_offCanvas;
_offCtx;
init(imgObj = null, anchorX: number = 0.5, anchorY: number = 0.5) {
......@@ -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)') {
......@@ -103,6 +113,8 @@ export class MySprite extends Sprite {
}
update($event = null) {
if (!this.visible && this.childDepandVisible) {
return;
......@@ -139,21 +151,21 @@ export class MySprite extends Sprite {
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();
}
//
// 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();
// }
}
......@@ -176,10 +188,14 @@ export class MySprite extends Sprite {
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);
}
}
}
......@@ -257,6 +273,13 @@ export class MySprite extends Sprite {
}
}
set btimapFlag(v) {
this._bitmapFlag = v;
}
get btimapFlag() {
return this._bitmapFlag;
}
set alpha(v) {
this._alpha = v;
if (this.childDepandAlpha) {
......@@ -305,7 +328,6 @@ export class MySprite extends Sprite {
getBoundingBox() {
const getParentData = (item) => {
let px = item.x;
......@@ -343,11 +365,6 @@ export class MySprite extends Sprite {
const width = this.width * Math.abs(data.sx);
const height = this.height * Math.abs(data.sy);
// const x = this.x + this._offX * Math.abs(this.scaleX);
// const y = this.y + this._offY * Math.abs(this.scaleY);
// const width = this.width * Math.abs(this.scaleX);
// const height = this.height * Math.abs(this.scaleY);
return {x, y, width, height};
}
......@@ -759,6 +776,7 @@ export class RichText extends Label {
disH = 30;
offW = 10;
constructor(ctx?: any) {
super(ctx);
......@@ -788,7 +806,7 @@ export class RichText extends Label {
const chr = this.text.split(' ');
let temp = '';
const row = [];
const w = selfW - 80;
const w = selfW - this.offW * 2;
const disH = (this.fontSize + this.disH) * this.scaleY;
......@@ -1103,14 +1121,17 @@ export class MyAnimation extends MySprite {
playEnd() {
console.log(' in playEnd');
this.playFlag = false;
this.curDelay = 0;
this.frameArr[this.frameIndex].visible = true;
if (this.playEndFunc) {
this.playEndFunc();
const func = this.playEndFunc;
this.playEndFunc = null;
func();
}
}
......@@ -1672,5 +1693,7 @@ export function shake(item, time = 0.5, callback = null, rate = 1) {
}
// --------------- custom class --------------------
......@@ -11,9 +11,10 @@
@font-face
{
font-family: 'BRLNSDB';
src: url("../../assets/font/BRLNSDB.TTF") ;
font-family: 'BRLNSDB_1';
src: url("/assets/font/BRLNSDB_1.TTF") ;
}
<div class="game-container" #wrap>
<canvas id="canvas" #canvas></canvas>
</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 {
Label,
MySprite, tweenChange,
formatTime,
getMinScale, hideItem,
Label, LineRect, MyAnimation,
MySprite, removeItemFromArr, RichText, ShapeRect, showItem, showPopParticle, tweenChange,
} from './Unit';
import {res, resAudio} from './resources';
......@@ -11,8 +13,7 @@ import {Subject} from 'rxjs';
import {debounceTime} from 'rxjs/operators';
import TWEEN from '@tweenjs/tween.js';
import {text} from "@fortawesome/fontawesome-svg-core";
@Component({
......@@ -22,8 +23,8 @@ import TWEEN from '@tweenjs/tween.js';
})
export class PlayComponent implements OnInit, OnDestroy {
@ViewChild('canvas', {static: true }) canvas: ElementRef;
@ViewChild('wrap', {static: true }) wrap: ElementRef;
@ViewChild('canvas', {static: true}) canvas: ElementRef;
@ViewChild('wrap', {static: true}) wrap: ElementRef;
// 数据
data;
......@@ -57,7 +58,7 @@ export class PlayComponent implements OnInit, OnDestroy {
canvasLeft;
canvasTop;
saveKey = 'test_0011';
saveKey = 'pu14';
btnLeft;
......@@ -68,6 +69,24 @@ export class PlayComponent implements OnInit, OnDestroy {
canTouch = true;
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'])
onResize(event) {
......@@ -80,7 +99,7 @@ export class PlayComponent implements OnInit, OnDestroy {
this.data = {};
// 获取数据
const getData = (<any> window).courseware.getData;
const getData = (<any>window).courseware.getData;
getData((data) => {
if (data && typeof data == 'object') {
......@@ -144,10 +163,6 @@ export class PlayComponent implements OnInit, OnDestroy {
}
updateItem(item) {
if (item) {
item.update();
......@@ -164,11 +179,6 @@ export class PlayComponent implements OnInit, OnDestroy {
}
initListener() {
this.winResizeEventStream
......@@ -289,7 +299,6 @@ export class PlayComponent implements OnInit, OnDestroy {
}
loadResources() {
const pr = [];
this.rawImages.forEach((value, key) => {// 预加载图片
......@@ -348,9 +357,6 @@ export class PlayComponent implements OnInit, OnDestroy {
}
checkClickTarget(target) {
const rect = target.getBoundingBox();
......@@ -384,9 +390,6 @@ export class PlayComponent implements OnInit, OnDestroy {
}
addUrlToAudioObj(key, url = null, vlomue = 1, loop = false, callback = null) {
const audioObj = this.audioObj;
......@@ -416,37 +419,169 @@ export class PlayComponent implements OnInit, OnDestroy {
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() {
if (!this.data.pic_url) {
this.data.pic_url = 'assets/play/default/pic.jpg';
this.data.pic_url_2 = 'assets/play/default/pic.jpg';
if (!this.data.bgItem && !this.data.hotZoneItemArr) {
this.data.bgItem = {
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() {
this.addUrlToImages(this.data.pic_url);
this.addUrlToImages(this.data.pic_url_2);
this.addUrlToImages(this.data.bgItem.url);
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 {
// 音频资源
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 {
// this.mapScale = sy;
this.currentTime = 0;
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() {
/**
* 初始化试图
*/
initView() {
const light = new LineRect();
light.init();
light.visible = false;
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();
btnLeft.init(this.images.get('btn_left'));
btnLeft.x = this.canvasWidth - 150 * this.mapScale;
btnLeft.y = this.canvasHeight - 100 * this.mapScale;
initSmallAudioPlayer() {
const res = {
playerBg: 'player_bg_small',
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();
btnRight.init(this.images.get('btn_right'));
btnRight.x = this.canvasWidth - 50 * this.mapScale;
btnRight.y = this.canvasHeight - 100 * this.mapScale;
btnRight.setScaleXY(this.mapScale);
const audioPlayer = this.createAudioPlayer(res);
audioPlayer.setScaleXY(this.mapScale);
audioPlayer.x = this.canvasWidth / 2;
audioPlayer.y = audioPlayer.height / 2 * audioPlayer.scaleY;
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();
pic1.init(this.images.get(this.data.pic_url));
pic1.x = this.canvasWidth / 2;
pic1.y = this.canvasHeight / 2;
pic1.setScaleXY(maxW / pic1.width);
audioPlayer['progress'] = progressBarContainer;
this.renderArr.push(pic1);
this.pic1 = pic1;
return audioPlayer;
}
private createPlayPauseButton(playKey, pauseKey) {
const button = this.createSprite(playKey);
const btnPause = this.createSprite(pauseKey);
this.hide(btnPause);
button.addChild(btnPause);
const label1 = new Label();
label1.text = this.data.text;
label1.textAlign = 'center';
label1.fontSize = 50;
label1.fontName = 'BRLNSDB';
label1.fontColor = '#ffffff';
this.curAudio.playBtn = button;
this.curAudio.stopBtn = btnPause;
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();
pic2.init(this.images.get(this.data.pic_url_2));
pic2.x = this.canvasWidth / 2 + this.canvasWidth;
pic2.y = this.canvasHeight / 2;
pic2.setScaleXY(maxW / pic2.width);
this.currentTime = Math.floor(progress * this.curAudio.duration);
target.timeLabel.text = formatTime('mm:ss', new Date(this.currentTime * 1000));
}
this.renderArr.push(pic2);
this.pic2 = pic2;
private touchDownProgressBar(target) {
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;
}
this.canTouch = false;
this.clickedSuccessArr.push(item);
const moveLen = this.canvasWidth;
tweenChange(this.pic1, {x: this.pic1.x + moveLen}, 1);
tweenChange(this.pic2, {x: this.pic2.x + moveLen}, 1, () => {
this.canTouch = true;
this.curPic = this.pic1;
});
const data = item.data;
if (!data.checked) {
console.log('right');
this.showFrame(item);
} else {
console.log('wrong');
this.clickWrong();
}
}
nextPage() {
if (this.curPic == this.pic2) {
return;
clickWrong() {
// 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;
tweenChange(this.pic1, {x: this.pic1.x - moveLen}, 1);
tweenChange(this.pic2, {x: this.pic2.x - moveLen}, 1, () => {
this.canTouch = true;
this.curPic = this.pic2;
this.playAudio('right', true);
const light = this.createLight();
light.setScaleXY(0);
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.playAudio(this.data.audio_url);
this.gameEnd();
}
pic2Clicked() {
this.playAudio(this.data.audio_url_2);
gameEnd() {
console.log('game end');
}
private updateTime() {
if (!this.isClickedProgress) {
const progress = this.curAudio.currentTime / this.curAudio.duration;
this.setAudioProgress(this.progressBarBg, progress);
}
}
mapDown(event) {
if (!this.canTouch) {
return;
}
if ( this.checkClickTarget(this.btnLeft) ) {
this.btnLeftClicked();
this.allBtns.forEach((btn) => {
if (this.checkClickTarget(btn)) {
btn._onTouchStart();
return;
}
});
if ( this.checkClickTarget(this.btnRight) ) {
this.btnRightClicked();
for (const item of this.hotZoneArr) {
if (this.checkClickTarget(item)) {
this.clickedHotZone(item);
return;
}
}
if ( this.checkClickTarget(this.pic1) ) {
this.pic1Clicked();
// ------- 播放器 --------
if (this.checkClickTarget(this.progressBarBg)) {
this.isClickedProgress = true;
this.touchDownProgressBar(this.progressBarBg);
return;
}
if ( this.checkClickTarget(this.pic2) ) {
this.pic2Clicked();
if (this.checkClickTarget(this.curAudio.playBtn)) {
this.touchDownAudioBtn(this.curAudio);
return;
}
// ------------------------
if (this.checkClickTarget(this.bg)) {
this.clickWrong();
}
}
mapMove(event) {
if (!this.isClickedProgress) {
return;
}
this.allBtns.forEach((btn) => {
if (!this.checkClickTarget(btn)) {
btn._isDown = false;
return;
}
});
this.touchDownProgressBar(this.progressBarBg);
}
mapUp(event) {
this.allBtns.forEach((btn) => {
if (btn._isDown) {
btn._onTouchEnd();
}
});
this.isClickedProgress = false;
}
update() {
......@@ -668,12 +1133,112 @@ export class PlayComponent implements OnInit, OnDestroy {
// ----------------------------------------------------------
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 = [
// ['bg', "assets/play/bg.jpg"],
['btn_left', "assets/play/btn_left.png"],
['btn_right', "assets/play/btn_right.png"],
// ['text_bg', "assets/play/text_bg.png"],
['bg', "assets/play/bg.png"],
['pic_bg', "assets/play/pic_bg.png"],
['star', "assets/play/star.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 = [
const resAudio = [
['click', "assets/play/music/click.mp3"],
['right', "assets/play/music/right.mp3"],
['wrong', "assets/play/music/wrong.mp3"],
];
......
......@@ -2,7 +2,9 @@
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/app",
"types": []
"types": [
"node"
]
},
"files": [
"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