Commit 0952dbf6 authored by jeff's avatar jeff

=。=半截上传

parent 30bbe2bc
...@@ -128,5 +128,8 @@ ...@@ -128,5 +128,8 @@
} }
} }
}, },
"defaultProject": "ng-template-generator" "defaultProject": "ng-template-generator",
} "cli": {
"analytics": "d34c626f-1cb5-4532-8f46-d97c6969e2fd"
}
}
\ No newline at end of file
...@@ -17,6 +17,7 @@ import {BackgroundImagePipe} from './pipes/background-image.pipe'; ...@@ -17,6 +17,7 @@ import {BackgroundImagePipe} from './pipes/background-image.pipe';
import {UploadImageWithPreviewComponent} from './common/upload-image-with-preview/upload-image-with-preview.component'; import {UploadImageWithPreviewComponent} from './common/upload-image-with-preview/upload-image-with-preview.component';
import {PlayerContentWrapperComponent} from './common/player-content-wrapper/player-content-wrapper.component'; import {PlayerContentWrapperComponent} from './common/player-content-wrapper/player-content-wrapper.component';
import {CustomHotZoneComponent} from './common/custom-hot-zone/custom-hot-zone.component'; import {CustomHotZoneComponent} from './common/custom-hot-zone/custom-hot-zone.component';
import {CustomHotZoneComponent1} from './common/custom-hot-zone-mini/custom-hot-zone-mini.component';
import {UploadVideoComponent} from './common/upload-video/upload-video.component'; import {UploadVideoComponent} from './common/upload-video/upload-video.component';
import {TimePipe} from './pipes/time.pipe'; import {TimePipe} from './pipes/time.pipe';
import {ResourcePipe} from './pipes/resource.pipe'; import {ResourcePipe} from './pipes/resource.pipe';
...@@ -42,6 +43,7 @@ registerLocaleData(zh); ...@@ -42,6 +43,7 @@ registerLocaleData(zh);
TimePipe, TimePipe,
UploadVideoComponent, UploadVideoComponent,
CustomHotZoneComponent, CustomHotZoneComponent,
CustomHotZoneComponent1,
UploadDragonBoneComponent, UploadDragonBoneComponent,
PlayerContentWrapperComponent, PlayerContentWrapperComponent,
CustomActionComponent, CustomActionComponent,
......
import TWEEN from '@tweenjs/tween.js';
interface AirWindow extends Window {
air: any;
curCtx: any;
}
declare let window: AirWindow;
class Sprite {
x = 0;
y = 0;
color = '';
radius = 0;
alive = false;
margin = 0;
angle = 0;
ctx;
constructor(ctx = null) {
if (!ctx) {
this.ctx = window.curCtx;
} else {
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;
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) {
if (imgObj) {
this.img = imgObj;
this.width = this.img.width;
this.height = this.img.height;
}
this.anchorX = anchorX;
this.anchorY = anchorY;
}
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.childDepandVisible) {
return;
}
this.draw();
}
draw() {
this.ctx.save();
this.drawInit();
this.updateChildren();
this.ctx.restore();
}
drawInit() {
this.ctx.translate(this.x, this.y);
this.ctx.rotate(this.rotation * Math.PI / 180);
this.ctx.scale(this.scaleX, this.scaleY);
this.ctx.globalAlpha = this.alpha;
this.ctx.transform(1, this.skewX, this.skewY, 1, 0, 0);
//
// 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 (const child of this.children) {
if (child === this) {
if (this.visible) {
this.drawSelf();
}
} else {
child.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;
});
if (this.childDepandAlpha) {
child.alpha = this.alpha;
}
}
removeChild(child) {
const index = this.children.indexOf(child);
if (index !== -1) {
this.children.splice(index, 1);
}
}
removeChildren() {
for (let i = 0; i < this.children.length; i++) {
if (this.children[i]) {
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();
}
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 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;
}
// console.log('angle: ', angle);
return angle;
}
export function removeItemFromArr(arr, item) {
const index = arr.indexOf(item);
if (index !== -1) {
arr.splice(index, 1);
}
}
export function circleMove(item, x0, y0, time = 2, addR = 360, xPer = 1, yPer = 1, callBack = null, easing = null) {
const r = getPosDistance(item.x, item.y, x0, y0);
let a = getAngleByPos(item.x, item.y, x0, y0);
a += 90;
const obj = {r, a};
item._circleAngle = a;
const targetA = a + addR;
const tween = new TWEEN.Tween(item).to({_circleAngle: targetA}, time * 1000);
if (callBack) {
tween.onComplete(() => {
callBack();
});
}
if (easing) {
tween.easing(easing);
}
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)
.delay(second * 1000)
.onComplete(() => {
if (callback) {
callback();
}
})
.start();
}
export function formatTime(fmt, date) {
// "yyyy-MM-dd HH:mm:ss";
const o = {
'M+': date.getMonth() + 1, // 月份
'd+': date.getDate(), // 日
'h+': date.getHours(), // 小时
'm+': date.getMinutes(), // 分
's+': date.getSeconds(), // 秒
'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
S: date.getMilliseconds() // 毫秒
};
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;
}
export function getMinScale(item, maxLen) {
const sx = maxLen / item.width;
const sy = maxLen / item.height;
const minS = Math.min(sx, sy);
return minS;
}
export function jelly(item, time = 0.7) {
if (item.jellyTween) {
TWEEN.remove(item.jellyTween);
}
const t = time / 9;
const baseSX = item.scaleX;
const baseSY = item.scaleY;
let index = 0;
const run = () => {
if (index >= arr.length) {
item.jellyTween = null;
return;
}
const data = arr[index];
const t = tweenChange(item, {scaleX: data[0], scaleY: data[1]}, data[2], () => {
index ++;
run();
}, TWEEN.Easing.Sinusoidal.InOut);
item.jellyTween = t;
};
const arr = [
[baseSX * 1.1, baseSY * 0.9, t],
[baseSX * 0.98, baseSY * 1.02, t * 2],
[baseSX * 1.02, baseSY * 0.98, t * 2],
[baseSX * 0.99, baseSY * 1.01, t * 2],
[baseSX * 1.0, baseSY * 1.0, t * 2],
];
run();
}
export function showPopParticle(img, pos, parent, num = 20, minLen = 40, maxLen = 80, showTime = 0.4) {
for (let i = 0; i < num; i ++) {
const particle = new MySprite();
particle.init(img);
particle.x = pos.x;
particle.y = pos.y;
parent.addChild(particle);
const randomR = 360 * Math.random();
particle.rotation = randomR;
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, () => {
}, TWEEN.Easing.Exponential.Out);
// scaleItem(particle, 0, 0.6, () => {
//
// });
scaleItem(particle, randomS, 0.6, () => {
}, TWEEN.Easing.Exponential.Out);
setTimeout(() => {
hideItem(particle, 0.4, () => {
}, TWEEN.Easing.Cubic.In);
}, showTime * 0.5 * 1000);
}
}
export function shake(item, time = 0.5, callback = null, rate = 1) {
if (item.shakeTween) {
return;
}
item.shakeTween = true;
const offX = 15 * item.scaleX * rate;
const offY = 15 * item.scaleX * rate;
const baseX = item.x;
const baseY = item.y;
const easing = TWEEN.Easing.Sinusoidal.InOut;
const move4 = () => {
moveItem(item, baseX, baseY, time / 4, () => {
item.shakeTween = false;
if (callback) {
callback();
}
}, easing);
};
const move3 = () => {
moveItem(item, baseX + offX / 4, baseY + offY / 4, time / 4, () => {
move4();
}, easing);
};
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();
}
// --------------- custom class --------------------
export class HotZoneItem extends MySprite {
lineDashFlag = false;
arrow: MySprite;
label: Label;
title;
arrowTop;
arrowRight;
audio_url;
pic_url;
text;
gIdx;
isAnimaStyle = false;
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 = 40;
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();
}
setAnimaStyle(isAnimaStyle) {
this.isAnimaStyle = isAnimaStyle;
console.log('in setAnimaStyle ')
}
drawArrow() {
if (!this.arrow) { return; }
const rect = this.getBoundingBox();
this.arrow.x = rect.x + rect.width;
this.arrow.y = rect.y;
this.arrow.update();
if (!this.isAnimaStyle) {
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 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();
}
getLabelRect() {
const rect = this.getBoundingBox();
const width = rect.width / this.scaleX;
const height = this.height * this.scaleY;
const x = this.x - width / 2;
const y = this.y - height / 2;
return {width, height, x, y};
}
}
export class HotZoneAction extends MySprite {
}
export class EditorItem extends MySprite {
lineDashFlag = false;
arrow: MySprite;
label: Label;
text;
arrowTop;
arrowRight;
showLabel(text = null) {
if (!this.label) {
this.label = new Label(this.ctx);
this.label.anchorY = 0;
this.label.fontSize = 50;
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.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();
}
refreshLabelScale() {}
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();
}
}
}
<div class="p-image-children-editor">
<h5 style="margin-left: 2.5%;"> 预览: </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">
<h5> 添加背景: </h5>
<div class="bg-box">
<app-upload-image-with-preview
[picUrl]="bgItem?.url"
(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">
<div
style="margin: auto; padding: 5px; margin-top: 30px; width:90%; border: 2px dashed #ddd; border-radius: 10px">
<span style="margin-left: 40%;"> 区域{{i + 1}}
</span>
<button style="float: right;" nz-button nzType="danger" nzSize="small" (click)="deleteBtnClick(i)">
X
</button>
<nz-divider style="margin-top: 10px;"></nz-divider>
<div style="margin-top: -20px; margin-bottom: 5px; width: 100%;">
<!-- <div *ngIf="customTypeGroupArr">
<nz-radio-group [ngModel]="it.gIdx" (ngModelChange)="customRadioChange($event, it)" style="display: flex; align-items: center; justify-content: center; flex-wrap: wrap;">
<div *ngFor="let group of customTypeGroupArr; let gIdx = index" style="display: flex; ">
<label nz-radio nzValue="{{gIdx}}">{{group.name}}</label>
</div>
</nz-radio-group>
</div> -->
<!-- <div *ngIf="!customTypeGroupArr">
<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>
<div *ngIf="customTypeGroupArr && customTypeGroupArr[it.gIdx]">
<div *ngIf="customTypeGroupArr[it.gIdx].pic">
<app-upload-image-with-preview
[picUrl]="it?.pic_url"
(imageUploaded)="onItemImgUploadSuccess($event, it)">
</app-upload-image-with-preview>
</div>
<div *ngIf="customTypeGroupArr[it.gIdx].text" style="margin-top: 5px">
<input type="text" nz-input [(ngModel)]="it.text" (blur)="saveText(it)">
</div>
<div *ngIf="customTypeGroupArr[it.gIdx].anima" align="center" style="margin-top: 5px">
<button nz-button (click)="setAnimaBtnClick(i)" >
<i nz-icon nzType="tool" nzTheme="outline"></i>
配置龙骨动画
</button>
</div>
<div *ngIf="customTypeGroupArr[it.gIdx].animaSmall" align="center" style="margin-top: 5px">
<button nz-button (click)="setAnimaSmallBtnClick(i)" >
<i nz-icon nzType="tool" nzTheme="outline"></i>
配置龙骨动画(小)
</button>
</div>
<div *ngIf="customTypeGroupArr[it.gIdx].audio" style="display: flex;align-items: center; margin-top: 5px">
<app-audio-recorder
style="margin: auto"
[audioUrl]="it.audio_url"
(audioUploaded)="onItemAudioUploadSuccess($event, it)"
></app-audio-recorder>
</div>
<div *ngIf="customTypeGroupArr[it.gIdx]?.action" style="display: flex;align-items: center; margin-top: 5px">
<app-custom-action
style="margin: auto"
[item]="it ? it['actionData_' + it.gIdx] : {}"
[type]="customTypeGroupArr[it.gIdx].action.type"
[option]="customTypeGroupArr[it.gIdx].action.option"
(save)="onSaveCustomAction($event, it)">
></app-custom-action>
</div>
</div>
<!-- <div *ngIf="!customTypeGroupArr">
<div *ngIf="it.itemType == 'pic'">
<app-upload-image-with-preview
[picUrl]="it?.pic_url"
(imageUploaded)="onItemImgUploadSuccess($event, it)">
</app-upload-image-with-preview>
</div>
<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; display: flex; align-items: center; justify-items: center;">
<app-audio-recorder
style="margin: auto"
[audioUrl]="it.audio_url"
(audioUploaded)="onItemAudioUploadSuccess($event, it)"
></app-audio-recorder>
</div>
<div *ngIf="it.itemType == 'rect' && isHasAnima" align="center" style="margin-bottom: 5px">
<button nz-button (click)="setAnimaBtnClick(i)" >
<i nz-icon nzType="tool" nzTheme="outline"></i>
配置龙骨动画
</button>
</div>
</div> -->
</div>
</div>
<div nz-col nzSpan="5" nzOffset="1">
<div class="bg-box">
<button nz-button nzType="dashed" (click)="addBtnClick()"
class="add-btn">
<i nz-icon nzType="plus-circle" nzTheme="outline"></i>
<!--Add Image-->
添加点击区域
</button>
</div>
</div>
</div>
<nz-divider></nz-divider>
<div class="save-box">
<button style="margin-left: 200px" class="save-btn" nz-button nzType="primary" [nzSize]="'large'" nzShape="round"
(click)="saveClick()" >
<i nz-icon nzType="save"></i>
Save
</button>
<div *ngIf="isCopyData" style="height: 40px; display: flex; justify-items: center;" >
<label style="margin-left: 40px" nz-checkbox [(ngModel)]="bgItem.isShowDebugLine">显示辅助框</label>
<button style="margin-left: 20px; margin-top: -5px" nz-button (click)="copyHotZoneData()"> 复制基础数据 </button>
<div style="margin-left: 10px; margin-top: -5px" >
<span>粘贴数据: </span>
<input style="width: 100px;" type="text" nz-input [(ngModel)]="pasteData" >
<button style="margin-left: 5px;" nz-button [disabled]="pasteData==''" nzType="primary" (click)="importData()">导入</button>
</div>
</div>
</div>
</div>
<label style="opacity: 0; position: absolute; top: 0px; font-family: 'BRLNSR_1'">1</label>
<!--龙骨面板-->
<nz-modal [(nzVisible)]="animaPanelVisible" nzTitle="配置资源文件" (nzAfterClose)="closeAfterPanel()" (nzOnCancel)="animaPanelCancel()" (nzOnOk)="animaPanelOk()" nzOkText="保存">
<div class="anima-upload-btn">
<span style="margin-right: 10px">上传 ske_json 文件: </span>
<nz-upload [nzShowUploadList]="false"
nzAccept="application/json"
[nzAction]="uploadUrl"
[nzData]="uploadData"
(nzChange)="skeJsonHandleChange($event)">
<button nz-button><i nz-icon nzType="upload"></i><span>Upload</span></button>
</nz-upload>
<i *ngIf="isSkeJsonLoading" style="margin-left: 10px;" nz-icon [nzType]="'loading'"></i>
<span *ngIf="skeJsonData['name']" style="margin-left: 10px"><u> {{skeJsonData['name']}} </u></span>
</div>
<div class="anima-upload-btn">
<span style="margin-right: 10px">上传 tex_json 文件: </span>
<nz-upload [nzShowUploadList]="false"
nzAccept="application/json"
[nzAction]="uploadUrl"
[nzData]="uploadData"
(nzChange)="texJsonHandleChange($event)">
<button nz-button><i nz-icon nzType="upload"></i><span>Upload</span></button>
</nz-upload>
<i *ngIf="isTexJsonLoading" style="margin-left: 10px;" nz-icon [nzType]="'loading'"></i>
<span *ngIf="texJsonData['name']" style="margin-left: 10px"><u> {{texJsonData['name']}} </u></span>
</div>
<div class="anima-upload-btn">
<span style="margin-right: 10px">上传 tex_png 文件: </span>
<nz-upload [nzShowUploadList]="false"
nzAccept = "image/*"
[nzAction]="uploadUrl"
[nzData]="uploadData"
(nzChange)="texPngHandleChange($event)">
<button nz-button><i nz-icon nzType="upload"></i><span>Upload</span></button>
</nz-upload>
<i *ngIf="isTexPngLoading" style="margin-left: 10px;" nz-icon [nzType]="'loading'"></i>
<span *ngIf="texPngData['name']" style="margin-left: 10px"><u> {{texPngData['name']}} </u></span>
</div>
<div class="anima-upload-btn" *ngIf="customTypeGroupArr && customTypeGroupArr[curDragonBoneGIdx] && customTypeGroupArr[curDragonBoneGIdx].animaNames">
提示:需包含以下动画: {{customTypeGroupArr[curDragonBoneGIdx].animaNames.toString()}}
</div>
</nz-modal>
.p-image-children-editor {
width: 100%;
height: 100%;
border-radius: 0.5rem;
border: 2px solid #ddd;
.preview-box {
margin: auto;
width: 95%;
height: 35vw;
border: 2px dashed #ddd;
border-radius: 0.5rem;
background-color: #fafafa;
text-align: center;
color: #aaa;
.preview-img {
height: 100%;
width: auto;
}
}
.bg-box{
//width: 100%;
margin-bottom: 1rem;
}
.img-box {
margin-bottom: 1rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.img-box-upload{
width: 80%;
}
.add-btn {
margin-top: 1rem;
width: 200px;
height: 90px;
display: flex;
align-items: center;
justify-content: center;
}
}
.save-box {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
.save-btn {
width: 160px;
height: 40px;
//margin-top: 20px;
margin-bottom: 20px;
display: flex;
align-items: center;
justify-content: center;
}
}
.anima-upload-btn {
padding: 10px;
}
h5 {
margin-top: 1rem;
}
//
//@font-face
//{
// font-family: 'BRLNSR_1';
// src: url("/assets/font/BRLNSR_1.TTF") ;
//}
import {
ApplicationRef,
ChangeDetectorRef,
Component,
ElementRef,
EventEmitter,
HostListener,
Input,
OnChanges,
OnDestroy,
OnInit,
Output,
ViewChild
} from '@angular/core';
import { Subject } from 'rxjs';
import { debounceTime } from 'rxjs/operators';
import { EditorItem, HotZoneImg, HotZoneItem, HotZoneLabel, Label, MySprite, removeItemFromArr, ShapeRect, ShapeRectNew } from './Unit';
import TWEEN from '@tweenjs/tween.js';
import { getMinScale } from '../../play/Unit';
import { tar } from 'compressing';
import { NzMessageService } from 'ng-zorro-antd';
@Component({
selector: 'app-custom-hot-zone-mini',
templateUrl: './custom-hot-zone-mini.component.html',
styleUrls: ['./custom-hot-zone-mini.component.scss']
})
export class CustomHotZoneComponent1 implements OnInit, OnDestroy, OnChanges {
@ViewChild('canvas', { static: true }) canvas: ElementRef;
@ViewChild('wrap', { static: true }) wrap: ElementRef;
@Input()
hotZoneItemArr = null;
@Input()
hotZoneArr = null;
@Input()
isHasRect = true;
@Input()
isHasPic = true;
@Input()
isHasText = true;
@Input()
isHasAudio = true;
@Input()
isHasAnima = false;
@Input()
customTypeGroupArr; // [{name:string, rect:boolean, pic:boolean, text:boolean, audio:boolean, anima:boolean, animaNames:['name1', ..]}, ...]
@Input()
hotZoneFontObj;
@Input()
isCopyData = false;
// hotZoneFontObj = {
// size: 50,
// name: 'BRLNSR_1',
// color: '#8f3758'
// }
@Input()
defaultItemType = 'text';
@Input()
hotZoneImgSize = 0;
@Output()
save = new EventEmitter();
saveDisabled = true;
canvasWidth = 1280;
canvasHeight = 720;
canvasBaseW = 1280;
// @HostListener('window:resize', ['$event'])
canvasBaseH = 720;
mapScale = 1;
ctx;
mx;
my; // 点击坐标
// 声音
bgAudio = new Audio();
images = new Map();
animationId: any;
// 资源
// rawImages = new Map(res);
winResizeEventStream = new Subject();
canvasLeft;
canvasTop;
renderArr;
imgArr = [];
oldPos;
radioValue;
curItem;
bg: MySprite;
changeSizeFlag = false;
changeTopSizeFlag = false;
changeRightSizeFlag = false;
animaPanelVisible = false;
uploadUrl;
uploadData;
skeJsonData = {};
texJsonData = {};
texPngData = {};
animaName = '';
curDragonBoneIndex;
curDragonBoneGIdx;
pasteData = '';
isSkeJsonLoading = false;
isTexJsonLoading = false;
isTexPngLoading = false;
isAnimaSmall = false;
constructor(private nzMessageService: NzMessageService, private appRef: ApplicationRef, private changeDetectorRef: ChangeDetectorRef) {
this.uploadUrl = (<any>window).courseware.uploadUrl();
this.uploadData = (<any>window).courseware.uploadData();
window['air'].getUploadCallback = (url, data) => {
this.uploadUrl = url;
this.uploadData = data;
};
}
_bgItem = null;
get bgItem() {
return this._bgItem;
}
@Input()
set bgItem(v) {
this._bgItem = v;
this.init();
}
onResize(event) {
this.winResizeEventStream.next();
}
ngOnInit() {
this.initListener();
// this.init();
this.update();
this.refresh();
}
ngOnDestroy() {
window.cancelAnimationFrame(this.animationId);
}
ngOnChanges() {
}
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);
this.refresh();
}
onItemAudioUploadSuccess(e, item) {
item.audio_url = e.url;
this.refresh();
}
refreshBackground(callBack = null) {
if (!this.bg) {
this.bg = new MySprite(this.ctx);
this.renderArr.push(this.bg);
}
if (!this.bgItem.url) {
this.bgItem.url = 'http://teach.cdn.ireadabc.com/8ebb1858564340ea0936b83e3280ad7d.jpg';
}
const bg = this.bg;
// if (this.bgItem.url) {
bg.load(this.bgItem.url).then(() => {
const rate1 = this.canvasWidth / bg.width;
const rate2 = this.canvasHeight / bg.height;
const rate = Math.min(rate1, rate2);
bg.setScaleXY(rate);
bg.x = this.canvasWidth / 2;
bg.y = this.canvasHeight / 2;
if (callBack) {
callBack();
}
this.refresh();
});
// }
}
addBtnClick() {
// this.imgArr.push({});
// this.hotZoneArr.push({});
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();
}
onImgUploadSuccessByImg(e, img) {
img.pic_url = e.url;
this.refreshImage(img);
this.refresh();
}
refreshImage(img) {
this.hideAllLineDash();
img.picItem = this.getPicItem(img);
this.refreshImageId();
}
refreshHotZoneId() {
for (let i = 0; i < this.hotZoneArr.length; i++) {
this.hotZoneArr[i].index = i;
if (this.hotZoneArr[i]) {
this.hotZoneArr[i].title = 'item-' + (i + 1);
}
}
this.refresh();
}
refreshImageId() {
for (let i = 0; i < this.imgArr.length; i++) {
this.imgArr[i].id = i;
if (this.imgArr[i].picItem) {
this.imgArr[i].picItem.text = 'Image-' + (i + 1);
}
}
}
getHotZoneItem(saveData = null) {
const itemW = 200;
const itemH = 200;
const item = new HotZoneItem(this.ctx);
item.setSize(itemW, itemH);
item.anchorX = 0.5;
item.anchorY = 0.5;
item.x = this.canvasWidth / 2;
item.y = this.canvasHeight / 2;
item.itemType = this.getDefaultItemType();
item.gIdx = this._dafaultIndex + ''
item['id'] = new Date().getTime().toString();
item['data'] = saveData;
console.log('item.x: ', item.x);
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.y = saveRect.y + saveRect.height / 2;
item.gIdx = saveData.gIdx;
item['id'] = saveData.id;
item['pic'] = saveData.pic_url
// item['skeJsonData'] = saveData.skeJsonData;
// item['texJsonData'] = saveData.texJsonData;
// item['texPngData'] = saveData.texPngData;
// item['actionData_' + item.gIdx] = saveData['actionData_' + item.gIdx];
}
console.log('item.x:~~ ', item.x);
item.showLineDash();
// const pic = new HotZoneImg(this.ctx);
this.setItemPic(item, saveData);
this.setItemLabel(item, saveData);
this.setItemAnima(item, saveData);
return item;
}
setItemPic(item, saveData) {
console.log('in setItemPic ', saveData);
const pic = new EditorItem(this.ctx);
pic.visible = false;
item['pic'] = pic;
if (saveData) {
let picUrl = saveData.pic_url;
const actionData = saveData['actionData_' + item.gIdx];
if (actionData && actionData.type == 'pic') {
picUrl = actionData.pic_url;
}
console.log('saveData: ', saveData);
console.log('picUrl: ', picUrl);
if (picUrl) {
this.loadHotZonePic(pic, picUrl, saveData.imgScale);
}
}
pic.x = item.x;
pic.y = item.y;
this.renderArr.push(pic);
}
setItemAnima(item, saveData) {
console.log('in setItemAnima ', saveData);
// const pic = new EditorItem(this.ctx);
// pic.visible = false;
// item['pic'] = pic;
// if (saveData) {
// let picUrl = saveData.pic_url;
// const actionData = saveData['actionData_' + item.gIdx];
// if (actionData && actionData.type == 'pic') {
// picUrl = actionData.pic_url;
// }
// console.log('saveData: ', saveData);
// console.log('picUrl: ', picUrl);
// if (picUrl) {
// this.loadHotZonePic(pic, picUrl, saveData.imgScale);
// }
// }
// pic.x = item.x;
// pic.y = item.y;
// this.renderArr.push(pic);
}
setItemLabel(item, saveData) {
const textLabel = new HotZoneLabel(this.ctx);
if (this.hotZoneFontObj) {
textLabel.fontSize = this.hotZoneFontObj.size;
textLabel.fontName = this.hotZoneFontObj.name;
textLabel.fontColor = this.hotZoneFontObj.color;
}
textLabel.textAlign = 'center';
// textLabel.setOutline();
item['textLabel'] = textLabel;
textLabel.setScaleXY(this.mapScale);
if (saveData) {
if (saveData.text && this.hotZoneFontObj) {
textLabel.text = saveData.text
}
this.setActionFont(textLabel, saveData['actionData_' + item.gIdx]);
textLabel.refreshSize();
}
textLabel.x = item.x;
textLabel.y = item.y;
this.renderArr.push(textLabel);
}
setActionFont(textLabel, actionData) {
if (actionData && actionData.type == 'text') {
textLabel.text = actionData.text;
for (let i = 0; i < actionData.changeOption.length; i++) {
const op = actionData.changeOption[i];
textLabel[op[0]] = op[1];
}
}
}
private _dafaultIndex: number = 1
getDefaultItemType() {
if (this.customTypeGroupArr) {
const group = this.customTypeGroupArr[this._dafaultIndex];
if (group.rect) {
return 'rect';
}
if (group.pic) {
return 'pic';
}
if (group.text) {
return 'text';
}
} else {
return this.defaultItemType;
}
}
getPicItem(img, saveData = null) {
const item = new EditorItem(this.ctx);
item.load(img.pic_url).then(img => {
let maxW, maxH;
if (this.bg) {
maxW = this.bg.width * this.bg.scaleX;
maxH = this.bg.height * this.bg.scaleY;
} else {
maxW = this.canvasWidth;
maxH = this.canvasHeight;
}
let scaleX = maxW / 3 / item.width;
let scaleY = maxH / 3 / item.height;
if (item.height * scaleX < this.canvasHeight) {
item.setScaleXY(scaleX);
} else {
item.setScaleXY(scaleY);
}
item.x = this.canvasWidth / 2;
item.y = this.canvasHeight / 2;
if (saveData) {
const saveRect = saveData.rect;
item.setScaleXY(saveRect.width / item.width);
item.x = saveRect.x + saveRect.width / 2;
item.y = saveRect.y + saveRect.height / 2;
} else {
// item.showLineDash();
}
item.showLineDash();
console.log('aaa');
});
return item;
}
onAudioUploadSuccessByImg(e, img) {
img.audio_url = e.url;
this.refresh();
}
deleteItem(e, i) {
// this.imgArr.splice(i , 1);
// this.refreshImageId();
this.hotZoneArr.splice(i, 1);
this.refreshHotZoneId();
this.refresh();
}
// radioChange(e, item) {
// item.itemType = e;
// this.refreshItem(item);
// this.refresh();
// // console.log(' in radioChange e: ', e);
// }
customRadioChange(e, item) {
console.log('in customRadioChange', e);
item.gIdx = -1;
setTimeout(() => {
item.gIdx = e;
this.refreshCustomItem(item);
this.refresh();
}, 1);
// const curGroup = this.customTypeGroupArr[e];
}
refreshCustomItem(item) {
this.hideHotZoneItem(item);
const group = this.customTypeGroupArr[item.gIdx];
if (!group) {
return;
}
if (group.text) {
this.showItemLabel(item);
}
if (group.rect) {
this.showItemRect(item, true);
}
if (group.pic && !group.anima) {
this.showItemPic(item);
}
if (group.action) {
if (group.action.type == 'pic') {
this.showItemPic(item);
}
if (group.action.type == 'text') {
this.showItemLabel(item);
}
if (group.action.type == 'anima') {
this.showItemRect(item);
}
}
item.setAnimaStyle(group.animaSmall)
}
setItemIsAnimaStyle(item, isAnimal) {
}
showItemPic(item) {
item.pic.visible = true;
item.itemType = 'pic';
this.showArrowTop(item)
}
showItemLabel(item) {
item.textLabel.visible = true;
item.itemType = 'text';
this.showArrowTop(item)
}
showItemRect(item, isShowArrowTop = true) {
item.visible = true;
item.itemType = 'rect';
this.showArrowTop(item, isShowArrowTop)
}
showArrowTop(item, isShowArrowTop = false) {
if (isShowArrowTop) {
item.arrowTop.visible = true;
item.arrowRight.visible = true;
} else {
item.arrowTop.visible = false;
item.arrowRight.visible = false;
}
}
hideHotZoneItem(item) {
item.visible = false;
item.pic.visible = false;
item.textLabel.visible = false;
}
refreshItem(item) {
switch (item.itemType) {
case 'rect':
this.setRectState(item);
break;
case 'pic':
this.setPicState(item);
break;
case 'text':
this.setTextState(item);
break;
default:
this.setNoneState(item);
}
}
init() {
console.log('init');
this.initData();
this.initCtx();
this.initItem();
}
initItem() {
this.changeDetectorRef.markForCheck();
this.changeDetectorRef.detectChanges();
if (!this.bgItem) {
this.bgItem = {};
} else {
this.refreshBackground(() => {
if (!this.hotZoneItemArr) {
this.hotZoneItemArr = [];
} else {
this.initHotZoneArr();
}
});
}
this.refresh();
}
initHotZoneArr() {
// console.log('this.hotZoneArr: ', this.hotZoneArr);
let curBgRect;
if (this.bg) {
curBgRect = this.bg.getBoundingBox();
} else {
curBgRect = { x: 0, y: 0, width: this.canvasWidth, height: this.canvasHeight };
}
let oldBgRect = this.bgItem.rect;
if (!oldBgRect) {
oldBgRect = curBgRect;
}
const rate = curBgRect.width / oldBgRect.width;
console.log('rate: ', rate);
this.hotZoneArr = [];
const arr = this.hotZoneItemArr.concat();
console.log('this.hotZoneItemArr: ', this.hotZoneItemArr);
for (let i = 0; i < arr.length; i++) {
const data = JSON.parse(JSON.stringify(arr[i]));
// const img = {pic_url: data.pic_url};
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;
// img['picItem'] = this.getPicItem(img, data);
// img['audio_url'] = arr[i].audio_url;
// this.imgArr.push(img);
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;
if (this.customTypeGroupArr) {
this.refreshCustomItem(item);
} else {
this.refreshItem(item);
}
console.log('1 item: ', item);
this.hotZoneArr.push(item);
}
this.refreshHotZoneId();
// this.refreshImageId();
}
initData() {
this.canvasWidth = this.wrap.nativeElement.clientWidth;
this.canvasHeight = this.wrap.nativeElement.clientHeight;
this.mapScale = this.canvasWidth / this.canvasBaseW;
this.renderArr = [];
this.bg = null;
this.imgArr = [];
this.hotZoneArr = [];
}
initCtx() {
this.ctx = this.canvas.nativeElement.getContext('2d');
this.canvas.nativeElement.width = this.canvasWidth;
this.canvas.nativeElement.height = this.canvasHeight;
}
mapDown(event) {
this.oldPos = { x: this.mx, y: this.my };
for (let i = this.hotZoneArr.length - 1; i >= 0; i--) {
const item = this.hotZoneArr[i];
console.log('mapDown item: ', item);
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 (target && this.checkClickTarget(target)) {
callback(target);
return;
}
}
}
mapMove(event) {
if (!this.curItem) {
return;
}
if (this.changeSizeFlag) {
this.changeSize();
} else if (this.changeTopSizeFlag) {
this.changeTopSize();
} else if (this.changeRightSizeFlag) {
this.changeRightSize();
} else {
const addX = this.mx - this.oldPos.x;
const addY = this.my - this.oldPos.y;
this.curItem.x += addX;
this.curItem.y += addY;
}
this.oldPos = { x: this.mx, y: this.my };
// this.saveDisabled = false;
}
mapUp(event) {
this.curItem = null;
this.changeSizeFlag = false;
this.changeTopSizeFlag = false;
this.changeRightSizeFlag = false;
}
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 minLen = 20;
let s;
if (lenW < lenH) {
if (lenW < minLen) {
lenW = minLen;
}
s = lenW / this.curItem.width;
} else {
if (lenH < minLen) {
lenH = minLen;
}
s = lenH / this.curItem.height;
}
// console.log('s: ', s);
this.curItem.setScaleXY(s);
this.curItem.refreshLabelScale();
}
changeTopSize() {
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 minLen = 20;
let s;
// if (lenW < lenH) {
// if (lenW < minLen) {
// lenW = minLen;
// }
// s = lenW / this.curItem.width;
//
// } else {
if (lenH < minLen) {
lenH = minLen;
}
s = lenH / this.curItem.height;
// }
// console.log('s: ', s);
this.curItem.scaleY = s;
this.curItem.refreshLabelScale();
}
changeRightSize() {
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 minLen = 20;
let s;
if (lenW < minLen) {
lenW = minLen;
}
s = lenW / this.curItem.width;
this.curItem.scaleX = s;
this.curItem.refreshLabelScale();
}
changeItemSize(item) {
this.curItem = item;
this.changeSizeFlag = true;
}
changeItemTopSize(item) {
this.curItem = item;
this.changeTopSizeFlag = true;
}
changeItemRightSize(item) {
this.curItem = item;
this.changeRightSizeFlag = true;
}
changeCurItem(item) {
this.hideAllLineDash();
this.curItem = item;
this.curItem.showLineDash();
}
hideAllLineDash() {
for (let i = 0; i < this.imgArr.length; i++) {
if (this.imgArr[i].picItem) {
this.imgArr[i].picItem.hideLineDash();
}
}
}
update() {
if (!this.ctx) {
return;
}
this.animationId = window.requestAnimationFrame(this.update.bind(this));
// 清除画布内容
this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
for (let i = 0; i < this.renderArr.length; i++) {
this.renderArr[i].update(this);
}
// for (let i = 0; i < this.imgArr.length; i++) {
// const picItem = this.imgArr[i].picItem;
// if (picItem) {
// picItem.update(this);
// }
// }
this.updateArr(this.hotZoneArr);
this.updatePos();
TWEEN.update();
}
updateArr(arr) {
if (arr) {
for (let i = 0; i < arr.length; i++) {
arr[i].update();
}
}
}
renderAfterResize() {
this.canvasWidth = this.wrap.nativeElement.clientWidth;
this.canvasHeight = this.wrap.nativeElement.clientHeight;
this.init();
}
initListener() {
this.winResizeEventStream
.pipe(debounceTime(500))
.subscribe(data => {
this.renderAfterResize();
});
if (this.IsPC()) {
this.canvas.nativeElement.addEventListener('mousedown', (event) => {
setMxMyByMouse(event);
this.mapDown(event);
});
this.canvas.nativeElement.addEventListener('mousemove', (event) => {
setMxMyByMouse(event);
this.mapMove(event);
});
this.canvas.nativeElement.addEventListener('mouseup', (event) => {
setMxMyByMouse(event);
this.mapUp(event);
});
const setMxMyByMouse = (event) => {
this.mx = event.offsetX;
this.my = event.offsetY;
};
} else {
this.canvas.nativeElement.addEventListener('touchstart', (event) => {
setMxMyByTouch(event);
this.mapDown(event);
});
this.canvas.nativeElement.addEventListener('touchmove', (event) => {
setMxMyByTouch(event);
this.mapMove(event);
});
this.canvas.nativeElement.addEventListener('touchend', (event) => {
setMxMyByTouch(event);
this.mapUp(event);
});
this.canvas.nativeElement.addEventListener('touchcancel', (event) => {
setMxMyByTouch(event);
this.mapUp(event);
});
const setMxMyByTouch = (event) => {
if (event.touches.length <= 0) {
return;
}
if (this.canvasLeft == null) {
setParentOffset();
}
this.mx = event.touches[0].pageX - this.canvasLeft;
this.my = event.touches[0].pageY - this.canvasTop;
};
const setParentOffset = () => {
const rect = this.canvas.nativeElement.getBoundingClientRect();
this.canvasLeft = rect.left;
this.canvasTop = rect.top;
};
}
}
IsPC() {
if (window['ELECTRON']) {
return false; // 封装客户端标记
}
if (document.body.ontouchstart !== undefined) {
return false;
} else {
return true;
}
}
checkClickTarget(target) {
if (!target || !target.visible) {
return;
}
const rect = target.getBoundingBox();
if (this.checkPointInRect(this.mx, this.my, rect)) {
return true;
}
return false;
}
checkPointInRect(x, y, rect) {
if (x >= rect.x && x <= rect.x + rect.width) {
if (y >= rect.y && y <= rect.y + rect.height) {
return true;
}
}
return false;
}
saveClick() {
const sendData = this.getSendData();
this.save.emit(sendData);
}
getSendData() {
const bgItem = this.bgItem;
if (this.bg) {
const rect = this.bg.getBoundingBox();
bgItem['rect'] = rect;
rect.x = Math.round(rect.x * 100) / 100;
rect.y = Math.round(rect.y * 100) / 100;
rect.width = Math.round(rect.width * 100) / 100;
rect.height = Math.round(rect.height * 100) / 100;
} else {
bgItem['rect'] = {
x: 0,
y: 0,
width: Math.round(this.canvasWidth * 100) / 100,
height: Math.round(this.canvasHeight * 100) / 100
};
}
const hotZoneItemArr = [];
const hotZoneArr = this.hotZoneArr;
for (let i = 0; i < hotZoneArr.length; i++) {
const hotZoneItem = {
id: hotZoneArr[i].id,
index: hotZoneArr[i].index,
pic_url: hotZoneArr[i].pic_url,
text: hotZoneArr[i].text,
audio_url: hotZoneArr[i].audio_url,
itemType: hotZoneArr[i].itemType,
fontScale: hotZoneArr[i].textLabel ? hotZoneArr[i].textLabel.scaleX : 1,
imgScale: hotZoneArr[i].pic ? hotZoneArr[i].pic.scaleX : 1,
mapScale: this.mapScale,
skeJsonData: hotZoneArr[i].skeJsonData,
texJsonData: hotZoneArr[i].texJsonData,
texPngData: hotZoneArr[i].texPngData,
gIdx: hotZoneArr[i].gIdx
};
hotZoneItem['actionData_' + hotZoneItem.gIdx] = hotZoneArr[i]['actionData_' + hotZoneArr[i].gIdx]
if (this.hotZoneFontObj) {
hotZoneItem['fontSize'] = this.hotZoneFontObj.size;
hotZoneItem['fontName'] = this.hotZoneFontObj.name;
hotZoneItem['ontColor'] = this.hotZoneFontObj.color;
}
if (hotZoneArr[i].itemType == 'pic') {
hotZoneItem['rect'] = hotZoneArr[i].pic.getBoundingBox();
} else if (hotZoneArr[i].itemType == 'text') {
hotZoneArr[i].textLabel.refreshSize();
hotZoneItem['rect'] = hotZoneArr[i].textLabel.getLabelRect();
// hotZoneItem['rect'].width = hotZoneItem['rect'].width / hotZoneArr[i].textLabel.scaleX;
// hotZoneItem['rect'].height = hotZoneArr[i].textLabel.height * hotZoneArr[i].textLabel.scaleY;
} else {
hotZoneItem['rect'] = hotZoneArr[i].getBoundingBox();
}
// hotZoneItem['rect'] = hotZoneArr[i].getBoundingBox();
hotZoneItem['rect'].x = Math.round((hotZoneItem['rect'].x - bgItem['rect'].x) * 100) / 100;
hotZoneItem['rect'].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);
}
console.log('hotZoneItemArr: ', hotZoneItemArr);
return { bgItem, hotZoneItemArr };
}
saveText(item) {
if (item.itemType == 'text') {
item.textLabel.text = item.text;
}
}
onSaveCustomAction(e, item) {
const data = e;
item['actionData_' + item.gIdx] = data;
if (data.type == 'pic') {
let picUrl = data.pic_url;
if (picUrl) {
this.loadHotZonePic(item.pic, picUrl);
}
}
if (data.type == 'text') {
this.setActionFont(item.textLabel, data);
item.textLabel.refreshSize();
}
// if (data.type == 'anima') {
// this.setActionAnima(item.anima, data);
// }
// this.loadHotZonePic(item.pic, e.url);
this.refresh()
}
setActionAnima() {
}
setAnimaBtnClick(index) {
console.log('aaaa')
this.isAnimaSmall = false;
this.setCurDragonBone(index);
// this.curDragonBoneIndex = index;
// this.curDragonBoneGIdx = Number(this.hotZoneArr[index].gIdx);
// const {skeJsonData, texJsonData, texPngData} = this.hotZoneArr[index];
// this.skeJsonData = skeJsonData || {};
// this.texJsonData = texJsonData || {};
// this.texPngData = texPngData || {};
// this.animaPanelVisible = true;
// this.refresh();
}
setAnimaSmallBtnClick(index) {
console.log('bbb')
this.isAnimaSmall = true;
this.setCurDragonBone(index);
}
setCurDragonBone(index) {
this.curDragonBoneIndex = index;
this.curDragonBoneGIdx = Number(this.hotZoneArr[index].gIdx);
const { skeJsonData, texJsonData, texPngData } = this.hotZoneArr[index];
this.skeJsonData = skeJsonData || {};
this.texJsonData = texJsonData || {};
this.texPngData = texPngData || {};
this.animaPanelVisible = true;
this.refresh();
}
setItemSizeByAnima(jsonData, item) {
console.log('json: ', jsonData);
const request = new XMLHttpRequest();
//通过url获取文件,第二个选项是文件所在的具体地址
request.open('GET', jsonData.url, true);
request.send(null);
request.onreadystatechange = () => {
if (request.readyState === 4 && request.status === 200) {
var type = request.getResponseHeader('Content-Type');
if (type.indexOf("text") !== 1) {
//返回一个文件内容的对象
const data = JSON.parse(request.responseText);
console.log('request.responseText;', data)
const animaSize = data.armature[0].canvas;
item.width = animaSize.width;
item.height = animaSize.height;
// return request.responseText;
}
}
}
}
animaPanelCancel() {
this.animaPanelVisible = false;
this.refresh();
}
animaPanelOk() {
this.setItemDragonBoneData(this.hotZoneArr[this.curDragonBoneIndex]);
console.log('this.hotZoneArr: ', this.hotZoneArr);
this.animaPanelVisible = false;
if (this.isAnimaSmall) {
this.setItemSizeByAnima(this.skeJsonData, this.hotZoneArr[this.curDragonBoneIndex]);
}
this.refresh();
}
setItemDragonBoneData(item) {
item['skeJsonData'] = this.skeJsonData;
item['texJsonData'] = this.texJsonData;
item['texPngData'] = this.texPngData;
}
skeJsonHandleChange(e) {
console.log('e: ', e);
switch (e.type) {
case 'start':
this.isSkeJsonLoading = true;
break;
case 'success':
this.skeJsonData['url'] = e.file.response.url;
this.skeJsonData['name'] = e.file.name;
this.nzMessageService.success('上传成功');
this.isSkeJsonLoading = false;
break;
case 'progress':
break;
}
}
texJsonHandleChange(e) {
console.log('e: ', e);
switch (e.type) {
case 'start':
this.isTexJsonLoading = true;
break;
case 'success':
this.texJsonData['url'] = e.file.response.url;
this.texJsonData['name'] = e.file.name;
this.nzMessageService.success('上传成功');
this.isTexJsonLoading = false;
break;
case 'progress':
break;
}
}
texPngHandleChange(e) {
console.log('e: ', e);
switch (e.type) {
case 'start':
this.isTexPngLoading = true;
break;
case 'success':
this.texPngData['url'] = e.file.response.url;
this.texPngData['name'] = e.file.name;
this.nzMessageService.success('上传成功');
this.isTexPngLoading = false;
break;
case 'progress':
break;
}
}
copyHotZoneData() {
const { bgItem, hotZoneItemArr } = this.getSendData();
// const hotZoneItemArrNew = [];
// const tmpArr = JSON.parse(JSON.stringify(hotZoneItemArr));
// tmpArr.forEach((item) => {
// if (item.gIdx === '0') {
// hotZoneItemArr.push(item);
// }
// })
const jsonData = {
bgItem,
hotZoneItemArr,
isHasRect: this.isHasRect,
isHasPic: this.isHasPic,
isHasText: this.isHasText,
isHasAudio: this.isHasAudio,
isHasAnima: this.isHasAnima,
hotZoneFontObj: this.hotZoneFontObj,
defaultItemType: this.defaultItemType,
hotZoneImgSize: this.hotZoneImgSize,
};
const oInput = document.createElement('input');
oInput.value = JSON.stringify(jsonData);
document.body.appendChild(oInput);
oInput.select(); // 选择对象
document.execCommand('Copy'); // 执行浏览器复制命令
document.body.removeChild(oInput);
this.nzMessageService.success('复制成功');
// alert('复制成功');
}
importData() {
if (!this.pasteData) {
return;
}
try {
const data = JSON.parse(this.pasteData);
console.log('data:', data);
const {
bgItem,
hotZoneItemArr,
isHasRect,
isHasPic,
isHasText,
isHasAudio,
isHasAnima,
hotZoneFontObj,
defaultItemType,
hotZoneImgSize,
} = data;
this.hotZoneItemArr = hotZoneItemArr;
this.isHasRect = isHasRect;
this.isHasPic = isHasPic;
this.isHasText = isHasText;
this.isHasAudio = isHasAudio;
this.isHasAnima = isHasAnima;
this.hotZoneFontObj = hotZoneFontObj;
this.defaultItemType = defaultItemType;
this.hotZoneImgSize = hotZoneImgSize;
this.bgItem = bgItem;
this.pasteData = '';
} catch (e) {
console.log('err: ', e);
this.nzMessageService.error('导入失败');
}
}
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;
}
if (x != undefined && y != undefined) {
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 setNoneState(item: any) {
item.visible = false;
item.pic.visible = false;
item.textLabel.visible = false;
}
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)) {
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);
}
this.curItem = item;
}
}
private clickedHotZoneText(item: any) {
if (this.checkClickTarget(item)) {
this.curItem = item;
}
}
private loadHotZonePic(pic: HotZoneImg, url, scale = null) {
let baseLen;
if (this.hotZoneImgSize) {
baseLen = this.hotZoneImgSize * this.mapScale;
}
pic.load(url).then(() => {
if (!scale) {
if (baseLen) {
scale = getMinScale(pic, baseLen);
} else {
scale = this.bg.scaleX;
}
}
pic.setScaleXY(scale);
});
}
closeAfterPanel() {
this.refresh();
}
/**
* 刷新 渲染页面
*/
refresh() {
setTimeout(() => {
this.appRef.tick();
}, 1);
}
}
<div class="model-content"> <div class="model-content">
<div style="padding: 10px;"> <div style="padding: 10px;">
<!--
<div style="width: 100%; margin-top: 15px; margin-bottom: 50px;" align="center"> <div style="width: 100%; margin-top: 15px; margin-bottom: 50px;" align="center">
<h2>标题设置</h2> <h2>标题设置</h2>
...@@ -15,15 +16,15 @@ ...@@ -15,15 +16,15 @@
</div> </div>
</div> </div>
-->
<app-custom-hot-zone <app-custom-hot-zone-mini
[bgItem]="item.bgItem" [bgItem]="item.bgItem"
[hotZoneItemArr]="item.hotZoneItemArr" [hotZoneItemArr]="item.hotZoneItemArr"
[customTypeGroupArr]="customTypeGroupArr" [customTypeGroupArr]="customTypeGroupArr"
(save)="saveHotZone(item, $event)" (save)="saveHotZone(item, $event)"
> >
</app-custom-hot-zone> </app-custom-hot-zone-mini>
<!-- <div style="width: 300px;" align='center'> <!-- <div style="width: 300px;" align='center'>
<span>图1: </span> <span>图1: </span>
<app-upload-image-with-preview <app-upload-image-with-preview
......
{
"ver": "1.1.2",
"uuid": "f10d537b-d9e1-4903-ae19-44fda7c00000",
"isBundle": false,
"bundleName": "",
"priority": 1,
"compressionType": {},
"optimizeHotUpdate": {},
"inlineSpriteFrames": {},
"isRemoteBundle": {},
"subMetas": {}
}
\ No newline at end of file
{
"__type__": "cc.AnimationClip",
"_name": "hand",
"_objFlags": 0,
"_native": "",
"_duration": 0.7,
"sample": 30,
"speed": 1,
"wrapMode": 2,
"curveData": {
"paths": {
"icon_hand": {
"comps": {
"cc.Sprite": {
"spriteFrame": [
{
"frame": 0,
"value": {
"__uuid__": "562deefd-c9fd-42f0-97d7-d6f5893ef3f3"
}
},
{
"frame": 0.3333333333333333,
"value": {
"__uuid__": "61e47c68-658d-416b-a46e-399ebfddd2c8"
}
},
{
"frame": 0.6666666666666666,
"value": {
"__uuid__": "562deefd-c9fd-42f0-97d7-d6f5893ef3f3"
}
}
]
}
},
"props": {
"color": [
{
"frame": 0,
"value": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"curve": "constant"
},
{
"frame": 0.3333333333333333,
"value": {
"__type__": "cc.Color",
"r": 176,
"g": 176,
"b": 176,
"a": 255
},
"curve": "constant"
},
{
"frame": 0.6666666666666666,
"value": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
}
}
]
}
},
"icon_dian": {
"props": {
"scale": [
{
"frame": 0,
"value": {
"__type__": "cc.Vec2",
"x": 1,
"y": 1
},
"curve": "constant"
},
{
"frame": 0.3333333333333333,
"value": {
"__type__": "cc.Vec2",
"x": 1.3,
"y": 1.3
},
"curve": "constant"
},
{
"frame": 0.6666666666666666,
"value": {
"__type__": "cc.Vec2",
"x": 1,
"y": 1
}
}
],
"position": [
{
"frame": 0,
"value": [
-22.199,
34.822,
0
],
"curve": "constant"
}
]
}
}
}
},
"events": []
}
\ No newline at end of file
{
"ver": "2.1.0",
"uuid": "110d5a6d-4d4e-4a04-bed2-4bb56c56d03d",
"subMetas": {}
}
\ No newline at end of file
{
"__type__": "cc.AnimationClip",
"_name": "tips",
"_objFlags": 0,
"_native": "",
"_duration": 0.5,
"sample": 40,
"speed": 1,
"wrapMode": 2,
"curveData": {
"props": {
"opacity": [
{
"frame": 0,
"value": 255,
"curve": "constant"
},
{
"frame": 0.25,
"value": 0,
"curve": "constant"
},
{
"frame": 0.5,
"value": 255
}
]
}
},
"events": []
}
\ No newline at end of file
{
"ver": "2.1.0",
"uuid": "a13d6552-0ece-42e3-813a-2029ad0cab0c",
"subMetas": {}
}
\ No newline at end of file
{ {
"ver": "2.0.1", "ver": "2.0.1",
"uuid": "f0680ae0-c079-45ef-abd7-9e63d90b982b", "uuid": "39ef1939-3bf9-4d21-a67a-bc1dede521a9",
"downloadMode": 0, "downloadMode": 0,
"duration": 0.130612, "duration": 0.130612,
"subMetas": {} "subMetas": {}
......
{
"ver": "2.0.1",
"uuid": "e0bcf4cc-35a7-4d61-b202-8dd49299c2c0",
"downloadMode": 0,
"duration": 1.7487,
"subMetas": {}
}
\ No newline at end of file
{
"ver": "1.1.2",
"uuid": "be0db2d0-24f0-4d3d-b613-ad695edaac17",
"isBundle": false,
"bundleName": "",
"priority": 1,
"compressionType": {},
"optimizeHotUpdate": {},
"inlineSpriteFrames": {},
"isRemoteBundle": {},
"subMetas": {}
}
\ No newline at end of file
[
{
"__type__": "cc.Prefab",
"_name": "",
"_objFlags": 0,
"_native": "",
"data": {
"__id__": 1
},
"optimizationPolicy": 0,
"asyncLoadAssets": false,
"readonly": false
},
{
"__type__": "cc.Node",
"_name": "hitItem",
"_objFlags": 0,
"_parent": null,
"_children": [
{
"__id__": 2
},
{
"__id__": 5
},
{
"__id__": 14
}
],
"_active": true,
"_components": [
{
"__id__": 18
}
],
"_prefab": {
"__id__": 19
},
"_opacity": 255,
"_color": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_contentSize": {
"__type__": "cc.Size",
"width": 0,
"height": 0
},
"_anchorPoint": {
"__type__": "cc.Vec2",
"x": 0.5,
"y": 0.5
},
"_trs": {
"__type__": "TypedArray",
"ctor": "Float64Array",
"array": [
-472.957,
-125.868,
0,
0,
0,
0,
1,
1,
1,
1
]
},
"_eulerAngles": {
"__type__": "cc.Vec3",
"x": 0,
"y": 0,
"z": 0
},
"_skewX": 0,
"_skewY": 0,
"_is3DNode": false,
"_groupIndex": 0,
"groupIndex": 0,
"_id": ""
},
{
"__type__": "cc.Node",
"_name": "sprite",
"_objFlags": 0,
"_parent": {
"__id__": 1
},
"_children": [],
"_active": true,
"_components": [
{
"__id__": 3
}
],
"_prefab": {
"__id__": 4
},
"_opacity": 255,
"_color": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_contentSize": {
"__type__": "cc.Size",
"width": 351,
"height": 93
},
"_anchorPoint": {
"__type__": "cc.Vec2",
"x": 0.5,
"y": 0.5
},
"_trs": {
"__type__": "TypedArray",
"ctor": "Float64Array",
"array": [
0,
0,
0,
0,
0,
0,
1,
1,
1,
1
]
},
"_eulerAngles": {
"__type__": "cc.Vec3",
"x": 0,
"y": 0,
"z": 0
},
"_skewX": 0,
"_skewY": 0,
"_is3DNode": false,
"_groupIndex": 0,
"groupIndex": 0,
"_id": ""
},
{
"__type__": "cc.Sprite",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 2
},
"_enabled": true,
"_materials": [
{
"__uuid__": "eca5d2f2-8ef6-41c2-bbe6-f9c79d09c432"
}
],
"_srcBlendFactor": 770,
"_dstBlendFactor": 771,
"_spriteFrame": {
"__uuid__": "c260e7d3-9aa7-46ca-99f5-7ca5f31f7fef"
},
"_type": 0,
"_sizeMode": 1,
"_fillType": 0,
"_fillCenter": {
"__type__": "cc.Vec2",
"x": 0,
"y": 0
},
"_fillStart": 0,
"_fillRange": 0,
"_isTrimmedMode": true,
"_atlas": null,
"_id": ""
},
{
"__type__": "cc.PrefabInfo",
"root": {
"__id__": 1
},
"asset": {
"__uuid__": "2ce7d58d-b6fe-4ef7-a128-de76f672a803"
},
"fileId": "b9fWLpmVVF2qpZu9r009Ps",
"sync": false
},
{
"__type__": "cc.Node",
"_name": "hand",
"_objFlags": 0,
"_parent": {
"__id__": 1
},
"_children": [
{
"__id__": 6
},
{
"__id__": 9
}
],
"_active": true,
"_components": [
{
"__id__": 12
}
],
"_prefab": {
"__id__": 13
},
"_opacity": 255,
"_color": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_contentSize": {
"__type__": "cc.Size",
"width": 78,
"height": 78
},
"_anchorPoint": {
"__type__": "cc.Vec2",
"x": 0.5,
"y": 0.5
},
"_trs": {
"__type__": "TypedArray",
"ctor": "Float64Array",
"array": [
154.958,
-68.338,
0,
0,
0,
0,
1,
1,
1,
1
]
},
"_eulerAngles": {
"__type__": "cc.Vec3",
"x": 0,
"y": 0,
"z": 0
},
"_skewX": 0,
"_skewY": 0,
"_is3DNode": false,
"_groupIndex": 0,
"groupIndex": 0,
"_id": ""
},
{
"__type__": "cc.Node",
"_name": "icon_dian",
"_objFlags": 0,
"_parent": {
"__id__": 5
},
"_children": [],
"_active": true,
"_components": [
{
"__id__": 7
}
],
"_prefab": {
"__id__": 8
},
"_opacity": 255,
"_color": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_contentSize": {
"__type__": "cc.Size",
"width": 49,
"height": 49
},
"_anchorPoint": {
"__type__": "cc.Vec2",
"x": 0.5,
"y": 0.5
},
"_trs": {
"__type__": "TypedArray",
"ctor": "Float64Array",
"array": [
-22.199,
34,
0,
0,
0,
0,
1,
1,
1,
1
]
},
"_eulerAngles": {
"__type__": "cc.Vec3",
"x": 0,
"y": 0,
"z": 0
},
"_skewX": 0,
"_skewY": 0,
"_is3DNode": false,
"_groupIndex": 0,
"groupIndex": 0,
"_id": ""
},
{
"__type__": "cc.Sprite",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 6
},
"_enabled": true,
"_materials": [
{
"__uuid__": "eca5d2f2-8ef6-41c2-bbe6-f9c79d09c432"
}
],
"_srcBlendFactor": 770,
"_dstBlendFactor": 771,
"_spriteFrame": {
"__uuid__": "5daba96f-eff5-4bee-9ba9-d67c0134212a"
},
"_type": 0,
"_sizeMode": 1,
"_fillType": 0,
"_fillCenter": {
"__type__": "cc.Vec2",
"x": 0,
"y": 0
},
"_fillStart": 0,
"_fillRange": 0,
"_isTrimmedMode": true,
"_atlas": null,
"_id": ""
},
{
"__type__": "cc.PrefabInfo",
"root": {
"__id__": 1
},
"asset": {
"__uuid__": "2ce7d58d-b6fe-4ef7-a128-de76f672a803"
},
"fileId": "85Cu0e6IdO7rehoMCnMUPa",
"sync": false
},
{
"__type__": "cc.Node",
"_name": "icon_hand",
"_objFlags": 0,
"_parent": {
"__id__": 5
},
"_children": [],
"_active": true,
"_components": [
{
"__id__": 10
}
],
"_prefab": {
"__id__": 11
},
"_opacity": 255,
"_color": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_contentSize": {
"__type__": "cc.Size",
"width": 69,
"height": 78
},
"_anchorPoint": {
"__type__": "cc.Vec2",
"x": 0.5,
"y": 0.5
},
"_trs": {
"__type__": "TypedArray",
"ctor": "Float64Array",
"array": [
0,
0,
0,
0,
0,
0,
1,
1,
1,
1
]
},
"_eulerAngles": {
"__type__": "cc.Vec3",
"x": 0,
"y": 0,
"z": 0
},
"_skewX": 0,
"_skewY": 0,
"_is3DNode": false,
"_groupIndex": 0,
"groupIndex": 0,
"_id": ""
},
{
"__type__": "cc.Sprite",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 9
},
"_enabled": true,
"_materials": [
{
"__uuid__": "eca5d2f2-8ef6-41c2-bbe6-f9c79d09c432"
}
],
"_srcBlendFactor": 770,
"_dstBlendFactor": 771,
"_spriteFrame": {
"__uuid__": "562deefd-c9fd-42f0-97d7-d6f5893ef3f3"
},
"_type": 0,
"_sizeMode": 1,
"_fillType": 0,
"_fillCenter": {
"__type__": "cc.Vec2",
"x": 0,
"y": 0
},
"_fillStart": 0,
"_fillRange": 0,
"_isTrimmedMode": true,
"_atlas": null,
"_id": ""
},
{
"__type__": "cc.PrefabInfo",
"root": {
"__id__": 1
},
"asset": {
"__uuid__": "2ce7d58d-b6fe-4ef7-a128-de76f672a803"
},
"fileId": "b6EBayLo9DCrkpa2CYD+lG",
"sync": false
},
{
"__type__": "cc.Animation",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 5
},
"_enabled": true,
"_defaultClip": {
"__uuid__": "110d5a6d-4d4e-4a04-bed2-4bb56c56d03d"
},
"_clips": [
{
"__uuid__": "110d5a6d-4d4e-4a04-bed2-4bb56c56d03d"
}
],
"playOnLoad": false,
"_id": ""
},
{
"__type__": "cc.PrefabInfo",
"root": {
"__id__": 1
},
"asset": {
"__uuid__": "2ce7d58d-b6fe-4ef7-a128-de76f672a803"
},
"fileId": "9aI5le42RBv5GR0xkx1QW1",
"sync": false
},
{
"__type__": "cc.Node",
"_name": "icon_tips",
"_objFlags": 0,
"_parent": {
"__id__": 1
},
"_children": [],
"_active": true,
"_components": [
{
"__id__": 15
},
{
"__id__": 16
}
],
"_prefab": {
"__id__": 17
},
"_opacity": 255,
"_color": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_contentSize": {
"__type__": "cc.Size",
"width": 46,
"height": 67
},
"_anchorPoint": {
"__type__": "cc.Vec2",
"x": 0.5,
"y": 0.5
},
"_trs": {
"__type__": "TypedArray",
"ctor": "Float64Array",
"array": [
197.886,
50.905,
0,
0,
0,
0,
1,
1,
1,
1
]
},
"_eulerAngles": {
"__type__": "cc.Vec3",
"x": 0,
"y": 0,
"z": 0
},
"_skewX": 0,
"_skewY": 0,
"_is3DNode": false,
"_groupIndex": 0,
"groupIndex": 0,
"_id": ""
},
{
"__type__": "cc.Sprite",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 14
},
"_enabled": true,
"_materials": [
{
"__uuid__": "eca5d2f2-8ef6-41c2-bbe6-f9c79d09c432"
}
],
"_srcBlendFactor": 770,
"_dstBlendFactor": 771,
"_spriteFrame": {
"__uuid__": "b41667f5-0e09-49f6-b7e8-19b88dc8ea8b"
},
"_type": 0,
"_sizeMode": 1,
"_fillType": 0,
"_fillCenter": {
"__type__": "cc.Vec2",
"x": 0,
"y": 0
},
"_fillStart": 0,
"_fillRange": 0,
"_isTrimmedMode": true,
"_atlas": null,
"_id": ""
},
{
"__type__": "cc.Animation",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 14
},
"_enabled": true,
"_defaultClip": {
"__uuid__": "a13d6552-0ece-42e3-813a-2029ad0cab0c"
},
"_clips": [
{
"__uuid__": "a13d6552-0ece-42e3-813a-2029ad0cab0c"
}
],
"playOnLoad": false,
"_id": ""
},
{
"__type__": "cc.PrefabInfo",
"root": {
"__id__": 1
},
"asset": {
"__uuid__": "2ce7d58d-b6fe-4ef7-a128-de76f672a803"
},
"fileId": "b5M1Vy7ipFF48OYApT5qKk",
"sync": false
},
{
"__type__": "57f79KAb0tNU7HjHMpUOk2e",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 1
},
"_enabled": true,
"tipsAnim": {
"__id__": 16
},
"handAnim": {
"__id__": 12
},
"_id": ""
},
{
"__type__": "cc.PrefabInfo",
"root": {
"__id__": 1
},
"asset": {
"__uuid__": "2ce7d58d-b6fe-4ef7-a128-de76f672a803"
},
"fileId": "",
"sync": false
}
]
\ No newline at end of file
{
"ver": "1.2.9",
"uuid": "2ce7d58d-b6fe-4ef7-a128-de76f672a803",
"optimizationPolicy": "AUTO",
"asyncLoadAssets": false,
"readonly": false,
"subMetas": {}
}
\ No newline at end of file
cc.Class({
extends: cc.Component,
properties: {
tipsAnim: cc.Animation,
handAnim: cc.Animation,
},
data: null,
onLoad() {
this.tipsAnim.node.active = false
this.handAnim.node.active = false
},
onEnable() {
this.node.on(cc.Node.EventType.TOUCH_START, this.onTouchStart, this)
},
onDisable() {
this.node.off(cc.Node.EventType.TOUCH_START, this.onTouchStart, this)
},
initWithData(data) {
this.data = data
let rect = this.data.rect
this.node.x = rect.x
this.node.y = rect.y
this.node.width = rect.width
this.node.height = rect.height
if (this.data.useHand) {
this.handAnim.node.active = false
this.handAnim.play()
}
},
onTouchStart() {
if (this.data) {
let url = this.data.audio_url
if (url && url != '') {
this.playAudio(url)
}
}
},
/** 播放音乐 */
playAudio(url) {
cc.assetManager.loadRemote(url, (err, audioClip) => {
if (err) return
this.audioId = cc.audioEngine.play(audioClip, false, 0.8);
cc.audioEngine.setFinishCallback(this.audioId, () => {
this.audioId = null
});
});
},
stopAudio() {
if (this.audioId != null) {
cc.audioEngine.stop(this.audioId)
this.audioId = null
}
},
/** 音频id */
audioId: null,
});
{ {
"ver": "1.0.8", "ver": "1.0.8",
"uuid": "1b435fe6-616a-4026-8037-ebce861f53e5", "uuid": "57f79280-6f4b-4d53-b1e3-1cca543a4d9e",
"isPlugin": false, "isPlugin": false,
"loadPluginInWeb": true, "loadPluginInWeb": true,
"loadPluginInNative": true, "loadPluginInNative": true,
......
...@@ -75,22 +75,25 @@ ...@@ -75,22 +75,25 @@
"__id__": 5 "__id__": 5
}, },
{ {
"__id__": 7 "__id__": 8
}, },
{ {
"__id__": 14 "__id__": 21
},
{
"__id__": 37
} }
], ],
"_active": true, "_active": true,
"_components": [ "_components": [
{ {
"__id__": 24 "__id__": 41
}, },
{ {
"__id__": 25 "__id__": 42
}, },
{ {
"__id__": 26 "__id__": 43
} }
], ],
"_prefab": null, "_prefab": null,
...@@ -251,15 +254,18 @@ ...@@ -251,15 +254,18 @@
"_components": [ "_components": [
{ {
"__id__": 6 "__id__": 6
},
{
"__id__": 7
} }
], ],
"_prefab": null, "_prefab": null,
"_opacity": 255, "_opacity": 255,
"_color": { "_color": {
"__type__": "cc.Color", "__type__": "cc.Color",
"r": 255, "r": 229,
"g": 255, "g": 243,
"b": 255, "b": 250,
"a": 255 "a": 255
}, },
"_contentSize": { "_contentSize": {
...@@ -299,7 +305,7 @@ ...@@ -299,7 +305,7 @@
"_is3DNode": false, "_is3DNode": false,
"_groupIndex": 0, "_groupIndex": 0,
"groupIndex": 0, "groupIndex": 0,
"_id": "32MJMZ2HRGF4BOf533Avyi" "_id": "aeaOM8xiFHsZWw7c1ruylq"
}, },
{ {
"__type__": "cc.Sprite", "__type__": "cc.Sprite",
...@@ -314,13 +320,13 @@ ...@@ -314,13 +320,13 @@
"__uuid__": "eca5d2f2-8ef6-41c2-bbe6-f9c79d09c432" "__uuid__": "eca5d2f2-8ef6-41c2-bbe6-f9c79d09c432"
} }
], ],
"_srcBlendFactor": 770, "_srcBlendFactor": 1,
"_dstBlendFactor": 771, "_dstBlendFactor": 771,
"_spriteFrame": { "_spriteFrame": {
"__uuid__": "8288e3d4-4c75-4b27-8f01-f7014417f4dd" "__uuid__": "c31f81f3-83db-4b46-a5c3-a33572c12e7f"
}, },
"_type": 0, "_type": 0,
"_sizeMode": 1, "_sizeMode": 0,
"_fillType": 0, "_fillType": 0,
"_fillCenter": { "_fillCenter": {
"__type__": "cc.Vec2", "__type__": "cc.Vec2",
...@@ -331,7 +337,34 @@ ...@@ -331,7 +337,34 @@
"_fillRange": 0, "_fillRange": 0,
"_isTrimmedMode": true, "_isTrimmedMode": true,
"_atlas": null, "_atlas": null,
"_id": "97/S6HDq9MeqgmV1Zwnhbb" "_id": "eaS1JEsKZJk5kn9K13PwO5"
},
{
"__type__": "cc.Widget",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 5
},
"_enabled": true,
"alignMode": 1,
"_target": null,
"_alignFlags": 45,
"_left": 0,
"_right": 0,
"_top": 0,
"_bottom": 0,
"_verticalCenter": 0,
"_horizontalCenter": 0,
"_isAbsLeft": true,
"_isAbsRight": true,
"_isAbsTop": true,
"_isAbsBottom": true,
"_isAbsHorizontalCenter": true,
"_isAbsVerticalCenter": true,
"_originalWidth": 100,
"_originalHeight": 100,
"_id": "e9wM7H6ndJabDtH2T6E5Sw"
}, },
{ {
"__type__": "cc.Node", "__type__": "cc.Node",
...@@ -342,14 +375,24 @@ ...@@ -342,14 +375,24 @@
}, },
"_children": [ "_children": [
{ {
"__id__": 8 "__id__": 9
}, },
{ {
"__id__": 11 "__id__": 11
},
{
"__id__": 15
} }
], ],
"_active": true, "_active": true,
"_components": [], "_components": [
{
"__id__": 19
},
{
"__id__": 20
}
],
"_prefab": null, "_prefab": null,
"_opacity": 255, "_opacity": 255,
"_color": { "_color": {
...@@ -361,8 +404,8 @@ ...@@ -361,8 +404,8 @@
}, },
"_contentSize": { "_contentSize": {
"__type__": "cc.Size", "__type__": "cc.Size",
"width": 0, "width": 351,
"height": 0 "height": 91
}, },
"_anchorPoint": { "_anchorPoint": {
"__type__": "cc.Vec2", "__type__": "cc.Vec2",
...@@ -373,8 +416,8 @@ ...@@ -373,8 +416,8 @@
"__type__": "TypedArray", "__type__": "TypedArray",
"ctor": "Float64Array", "ctor": "Float64Array",
"array": [ "array": [
635.132, 464.5,
-356.326, -314.5,
0, 0,
0, 0,
0, 0,
...@@ -400,17 +443,14 @@ ...@@ -400,17 +443,14 @@
}, },
{ {
"__type__": "cc.Node", "__type__": "cc.Node",
"_name": "btn_left", "_name": "bg_bottom",
"_objFlags": 0, "_objFlags": 0,
"_parent": { "_parent": {
"__id__": 7 "__id__": 8
}, },
"_children": [], "_children": [],
"_active": true, "_active": true,
"_components": [ "_components": [
{
"__id__": 9
},
{ {
"__id__": 10 "__id__": 10
} }
...@@ -426,8 +466,8 @@ ...@@ -426,8 +466,8 @@
}, },
"_contentSize": { "_contentSize": {
"__type__": "cc.Size", "__type__": "cc.Size",
"width": 61, "width": 351,
"height": 67 "height": 93
}, },
"_anchorPoint": { "_anchorPoint": {
"__type__": "cc.Vec2", "__type__": "cc.Vec2",
...@@ -438,8 +478,8 @@ ...@@ -438,8 +478,8 @@
"__type__": "TypedArray", "__type__": "TypedArray",
"ctor": "Float64Array", "ctor": "Float64Array",
"array": [ "array": [
-148.464, 0,
34, 0,
0, 0,
0, 0,
0, 0,
...@@ -461,14 +501,14 @@ ...@@ -461,14 +501,14 @@
"_is3DNode": false, "_is3DNode": false,
"_groupIndex": 0, "_groupIndex": 0,
"groupIndex": 0, "groupIndex": 0,
"_id": "5ad2wLQLxIN5Eg7OHecSH6" "_id": "70X2WruCtItoUrT7FmCz3I"
}, },
{ {
"__type__": "cc.Sprite", "__type__": "cc.Sprite",
"_name": "", "_name": "",
"_objFlags": 0, "_objFlags": 0,
"node": { "node": {
"__id__": 8 "__id__": 9
}, },
"_enabled": true, "_enabled": true,
"_materials": [ "_materials": [
...@@ -479,7 +519,7 @@ ...@@ -479,7 +519,7 @@
"_srcBlendFactor": 770, "_srcBlendFactor": 770,
"_dstBlendFactor": 771, "_dstBlendFactor": 771,
"_spriteFrame": { "_spriteFrame": {
"__uuid__": "ce19457d-e8f3-4c38-ae3e-d4b99208ddb5" "__uuid__": "c260e7d3-9aa7-46ca-99f5-7ca5f31f7fef"
}, },
"_type": 0, "_type": 0,
"_sizeMode": 1, "_sizeMode": 1,
...@@ -493,25 +533,94 @@ ...@@ -493,25 +533,94 @@
"_fillRange": 0, "_fillRange": 0,
"_isTrimmedMode": true, "_isTrimmedMode": true,
"_atlas": null, "_atlas": null,
"_id": "84mqOgJ3JNqZrYVTEU8CjE" "_id": "c7OVcCQjtDmrknFQVhXiA3"
},
{
"__type__": "cc.Node",
"_name": "btn_left",
"_objFlags": 0,
"_parent": {
"__id__": 8
},
"_children": [],
"_active": true,
"_components": [
{
"__id__": 12
},
{
"__id__": 14
}
],
"_prefab": null,
"_opacity": 255,
"_color": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_contentSize": {
"__type__": "cc.Size",
"width": 64,
"height": 68
},
"_anchorPoint": {
"__type__": "cc.Vec2",
"x": 0.5,
"y": 0.5
},
"_trs": {
"__type__": "TypedArray",
"ctor": "Float64Array",
"array": [
-16.572,
3.038,
0,
0,
0,
0,
1,
1,
1,
0
]
},
"_eulerAngles": {
"__type__": "cc.Vec3",
"x": 0,
"y": 0,
"z": 0
},
"_skewX": 0,
"_skewY": 0,
"_is3DNode": false,
"_groupIndex": 0,
"groupIndex": 0,
"_id": "5ad2wLQLxIN5Eg7OHecSH6"
}, },
{ {
"__type__": "cc.Button", "__type__": "cc.Button",
"_name": "", "_name": "",
"_objFlags": 0, "_objFlags": 0,
"node": { "node": {
"__id__": 8 "__id__": 11
}, },
"_enabled": true, "_enabled": true,
"_normalMaterial": null, "_normalMaterial": null,
"_grayMaterial": null, "_grayMaterial": null,
"duration": 0.1, "duration": 0.1,
"zoomScale": 1.2, "zoomScale": 1.1,
"clickEvents": [], "clickEvents": [
{
"__id__": 13
}
],
"_N$interactable": true, "_N$interactable": true,
"_N$enableAutoGrayEffect": false, "_N$enableAutoGrayEffect": false,
"_N$transition": 0, "_N$transition": 3,
"transition": 0, "transition": 3,
"_N$normalColor": { "_N$normalColor": {
"__type__": "cc.Color", "__type__": "cc.Color",
"r": 255, "r": 255,
...@@ -563,21 +672,63 @@ ...@@ -563,21 +672,63 @@
"_N$target": null, "_N$target": null,
"_id": "bcYN/4EKBJhbIAfovo9Ah1" "_id": "bcYN/4EKBJhbIAfovo9Ah1"
}, },
{
"__type__": "cc.ClickEvent",
"target": {
"__id__": 2
},
"component": "",
"_componentId": "f4edeRi+NdAabqAkVYRwFjK",
"handler": "onClickLeft",
"customEventData": ""
},
{
"__type__": "cc.Sprite",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 11
},
"_enabled": true,
"_materials": [
{
"__uuid__": "eca5d2f2-8ef6-41c2-bbe6-f9c79d09c432"
}
],
"_srcBlendFactor": 770,
"_dstBlendFactor": 771,
"_spriteFrame": {
"__uuid__": "481337f5-a635-4237-8a67-7a37fd59f119"
},
"_type": 0,
"_sizeMode": 1,
"_fillType": 0,
"_fillCenter": {
"__type__": "cc.Vec2",
"x": 0,
"y": 0
},
"_fillStart": 0,
"_fillRange": 0,
"_isTrimmedMode": true,
"_atlas": null,
"_id": "93zcHsRZhA7783yB/mBlqo"
},
{ {
"__type__": "cc.Node", "__type__": "cc.Node",
"_name": "btn_right", "_name": "btn_right",
"_objFlags": 0, "_objFlags": 0,
"_parent": { "_parent": {
"__id__": 7 "__id__": 8
}, },
"_children": [], "_children": [],
"_active": true, "_active": true,
"_components": [ "_components": [
{ {
"__id__": 12 "__id__": 16
}, },
{ {
"__id__": 13 "__id__": 18
} }
], ],
"_prefab": null, "_prefab": null,
...@@ -591,8 +742,8 @@ ...@@ -591,8 +742,8 @@
}, },
"_contentSize": { "_contentSize": {
"__type__": "cc.Size", "__type__": "cc.Size",
"width": 60, "width": 64,
"height": 66 "height": 68
}, },
"_anchorPoint": { "_anchorPoint": {
"__type__": "cc.Vec2", "__type__": "cc.Vec2",
...@@ -603,8 +754,8 @@ ...@@ -603,8 +754,8 @@
"__type__": "TypedArray", "__type__": "TypedArray",
"ctor": "Float64Array", "ctor": "Float64Array",
"array": [ "array": [
-47.164, 97.71,
34, 3.038,
0, 0,
0, 0,
0, 0,
...@@ -612,7 +763,7 @@ ...@@ -612,7 +763,7 @@
1, 1,
1, 1,
1, 1,
1 0
] ]
}, },
"_eulerAngles": { "_eulerAngles": {
...@@ -628,55 +779,27 @@ ...@@ -628,55 +779,27 @@
"groupIndex": 0, "groupIndex": 0,
"_id": "46i3stdzpHX6zQHTGnRsNE" "_id": "46i3stdzpHX6zQHTGnRsNE"
}, },
{
"__type__": "cc.Sprite",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 11
},
"_enabled": true,
"_materials": [
{
"__uuid__": "eca5d2f2-8ef6-41c2-bbe6-f9c79d09c432"
}
],
"_srcBlendFactor": 770,
"_dstBlendFactor": 771,
"_spriteFrame": {
"__uuid__": "e5a2dbaa-a677-4a32-90d7-a1b057d7fb59"
},
"_type": 0,
"_sizeMode": 1,
"_fillType": 0,
"_fillCenter": {
"__type__": "cc.Vec2",
"x": 0,
"y": 0
},
"_fillStart": 0,
"_fillRange": 0,
"_isTrimmedMode": true,
"_atlas": null,
"_id": "42Sh8QS/BHn4WiGyPQPKPt"
},
{ {
"__type__": "cc.Button", "__type__": "cc.Button",
"_name": "", "_name": "",
"_objFlags": 0, "_objFlags": 0,
"node": { "node": {
"__id__": 11 "__id__": 15
}, },
"_enabled": true, "_enabled": true,
"_normalMaterial": null, "_normalMaterial": null,
"_grayMaterial": null, "_grayMaterial": null,
"duration": 0.1, "duration": 0.1,
"zoomScale": 1.2, "zoomScale": 1.1,
"clickEvents": [], "clickEvents": [
{
"__id__": 17
}
],
"_N$interactable": true, "_N$interactable": true,
"_N$enableAutoGrayEffect": false, "_N$enableAutoGrayEffect": false,
"_N$transition": 0, "_N$transition": 3,
"transition": 0, "transition": 3,
"_N$normalColor": { "_N$normalColor": {
"__type__": "cc.Color", "__type__": "cc.Color",
"r": 255, "r": 255,
...@@ -729,44 +852,134 @@ ...@@ -729,44 +852,134 @@
"_id": "1aj32fYY1IxLesa77E70Qu" "_id": "1aj32fYY1IxLesa77E70Qu"
}, },
{ {
"__type__": "cc.Node", "__type__": "cc.ClickEvent",
"_name": "res", "target": {
"_objFlags": 0,
"_parent": {
"__id__": 2 "__id__": 2
}, },
"_children": [ "component": "",
{ "_componentId": "f4edeRi+NdAabqAkVYRwFjK",
"__id__": 15 "handler": "onClickRight",
}, "customEventData": ""
{ },
"__id__": 18 {
}, "__type__": "cc.Sprite",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 15
},
"_enabled": true,
"_materials": [
{ {
"__id__": 21 "__uuid__": "eca5d2f2-8ef6-41c2-bbe6-f9c79d09c432"
} }
], ],
"_active": false, "_srcBlendFactor": 770,
"_components": [], "_dstBlendFactor": 771,
"_prefab": null, "_spriteFrame": {
"_opacity": 255, "__uuid__": "7546a333-1d8b-4c3a-a699-b24633d987d3"
"_color": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_contentSize": {
"__type__": "cc.Size",
"width": 0,
"height": 0
}, },
"_anchorPoint": { "_type": 0,
"_sizeMode": 1,
"_fillType": 0,
"_fillCenter": {
"__type__": "cc.Vec2", "__type__": "cc.Vec2",
"x": 0.5, "x": 0,
"y": 0.5 "y": 0
}, },
"_fillStart": 0,
"_fillRange": 0,
"_isTrimmedMode": true,
"_atlas": null,
"_id": "d4dDRX1SZIy517c6gzyxSO"
},
{
"__type__": "cc.Widget",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 8
},
"_enabled": true,
"alignMode": 1,
"_target": null,
"_alignFlags": 36,
"_left": 0,
"_right": 0,
"_top": 0,
"_bottom": 0,
"_verticalCenter": 0,
"_horizontalCenter": 0,
"_isAbsLeft": true,
"_isAbsRight": true,
"_isAbsTop": true,
"_isAbsBottom": true,
"_isAbsHorizontalCenter": true,
"_isAbsVerticalCenter": true,
"_originalWidth": 0,
"_originalHeight": 0,
"_id": "14yYhIw95BeZx56bjhZzfB"
},
{
"__type__": "cc.Animation",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 8
},
"_enabled": true,
"_defaultClip": null,
"_clips": [
null
],
"playOnLoad": false,
"_id": "35I3F/iNRHf7w06yWJoxEu"
},
{
"__type__": "cc.Node",
"_name": "pic",
"_objFlags": 0,
"_parent": {
"__id__": 2
},
"_children": [
{
"__id__": 22
},
{
"__id__": 25
},
{
"__id__": 28
},
{
"__id__": 31
},
{
"__id__": 34
}
],
"_active": true,
"_components": [],
"_prefab": null,
"_opacity": 255,
"_color": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_contentSize": {
"__type__": "cc.Size",
"width": 1280,
"height": 720
},
"_anchorPoint": {
"__type__": "cc.Vec2",
"x": 0.5,
"y": 0.5
},
"_trs": { "_trs": {
"__type__": "TypedArray", "__type__": "TypedArray",
"ctor": "Float64Array", "ctor": "Float64Array",
...@@ -780,7 +993,7 @@ ...@@ -780,7 +993,7 @@
1, 1,
1, 1,
1, 1,
1 0
] ]
}, },
"_eulerAngles": { "_eulerAngles": {
...@@ -794,22 +1007,25 @@ ...@@ -794,22 +1007,25 @@
"_is3DNode": false, "_is3DNode": false,
"_groupIndex": 0, "_groupIndex": 0,
"groupIndex": 0, "groupIndex": 0,
"_id": "0aAzbH6R1E+6AmGRrkKa5O" "_id": "acFf5706VEr43k/0GoDH2k"
}, },
{ {
"__type__": "cc.Node", "__type__": "cc.Node",
"_name": "font", "_name": "icon",
"_objFlags": 0, "_objFlags": 0,
"_parent": { "_parent": {
"__id__": 14 "__id__": 21
}, },
"_children": [ "_children": [],
"_active": true,
"_components": [
{ {
"__id__": 16 "__id__": 23
},
{
"__id__": 24
} }
], ],
"_active": true,
"_components": [],
"_prefab": null, "_prefab": null,
"_opacity": 255, "_opacity": 255,
"_color": { "_color": {
...@@ -821,8 +1037,8 @@ ...@@ -821,8 +1037,8 @@
}, },
"_contentSize": { "_contentSize": {
"__type__": "cc.Size", "__type__": "cc.Size",
"width": 0, "width": 1280,
"height": 0 "height": 720
}, },
"_anchorPoint": { "_anchorPoint": {
"__type__": "cc.Vec2", "__type__": "cc.Vec2",
...@@ -856,20 +1072,80 @@ ...@@ -856,20 +1072,80 @@
"_is3DNode": false, "_is3DNode": false,
"_groupIndex": 0, "_groupIndex": 0,
"groupIndex": 0, "groupIndex": 0,
"_id": "9bLfcYeeNKrr524vzWchiM" "_id": "e5gAWSYXpPDJKuNiEvXpPT"
},
{
"__type__": "cc.Sprite",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 22
},
"_enabled": true,
"_materials": [
{
"__uuid__": "eca5d2f2-8ef6-41c2-bbe6-f9c79d09c432"
}
],
"_srcBlendFactor": 1,
"_dstBlendFactor": 771,
"_spriteFrame": null,
"_type": 0,
"_sizeMode": 0,
"_fillType": 0,
"_fillCenter": {
"__type__": "cc.Vec2",
"x": 0,
"y": 0
},
"_fillStart": 0,
"_fillRange": 0,
"_isTrimmedMode": true,
"_atlas": null,
"_id": "0eTbXG/oZHmaY6kD6zm9pf"
},
{
"__type__": "cc.Widget",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 22
},
"_enabled": true,
"alignMode": 2,
"_target": null,
"_alignFlags": 45,
"_left": 0,
"_right": 0,
"_top": 0,
"_bottom": 0,
"_verticalCenter": 0,
"_horizontalCenter": 0,
"_isAbsLeft": true,
"_isAbsRight": true,
"_isAbsTop": true,
"_isAbsBottom": true,
"_isAbsHorizontalCenter": true,
"_isAbsVerticalCenter": true,
"_originalWidth": 636,
"_originalHeight": 396,
"_id": "4dr1MJnPlIVJruDphUKxu4"
}, },
{ {
"__type__": "cc.Node", "__type__": "cc.Node",
"_name": "BRLNSDB", "_name": "bg_move",
"_objFlags": 0, "_objFlags": 0,
"_parent": { "_parent": {
"__id__": 15 "__id__": 21
}, },
"_children": [], "_children": [],
"_active": true, "_active": false,
"_components": [ "_components": [
{ {
"__id__": 17 "__id__": 26
},
{
"__id__": 27
} }
], ],
"_prefab": null, "_prefab": null,
...@@ -883,8 +1159,8 @@ ...@@ -883,8 +1159,8 @@
}, },
"_contentSize": { "_contentSize": {
"__type__": "cc.Size", "__type__": "cc.Size",
"width": 0, "width": 14,
"height": 0 "height": 720
}, },
"_anchorPoint": { "_anchorPoint": {
"__type__": "cc.Vec2", "__type__": "cc.Vec2",
...@@ -895,7 +1171,7 @@ ...@@ -895,7 +1171,7 @@
"__type__": "TypedArray", "__type__": "TypedArray",
"ctor": "Float64Array", "ctor": "Float64Array",
"array": [ "array": [
0, -633,
0, 0,
0, 0,
0, 0,
...@@ -918,54 +1194,84 @@ ...@@ -918,54 +1194,84 @@
"_is3DNode": false, "_is3DNode": false,
"_groupIndex": 0, "_groupIndex": 0,
"groupIndex": 0, "groupIndex": 0,
"_id": "cfMLGsq0BMhJARv+ySMAxS" "_id": "b1AJm2yKhN/acMtHJgQehF"
}, },
{ {
"__type__": "cc.Label", "__type__": "cc.Sprite",
"_name": "", "_name": "",
"_objFlags": 0, "_objFlags": 0,
"node": { "node": {
"__id__": 16 "__id__": 25
}, },
"_enabled": true, "_enabled": true,
"_materials": [], "_materials": [
{
"__uuid__": "eca5d2f2-8ef6-41c2-bbe6-f9c79d09c432"
}
],
"_srcBlendFactor": 770, "_srcBlendFactor": 770,
"_dstBlendFactor": 771, "_dstBlendFactor": 771,
"_useOriginalSize": true, "_spriteFrame": {
"_string": "", "__uuid__": "65989243-03ad-4572-894a-c1d4712ce82c"
"_N$string": "", },
"_fontSize": 40, "_type": 0,
"_lineHeight": 40, "_sizeMode": 1,
"_enableWrapText": true, "_fillType": 0,
"_N$file": { "_fillCenter": {
"__uuid__": "c551970e-b095-45f3-9f1d-25cde8b8deb1" "__type__": "cc.Vec2",
}, "x": 0,
"_isSystemFontUsed": false, "y": 0
"_spacingX": 0, },
"_batchAsBitmap": false, "_fillStart": 0,
"_styleFlags": 0, "_fillRange": 0,
"_underlineHeight": 0, "_isTrimmedMode": true,
"_N$horizontalAlign": 0, "_atlas": null,
"_N$verticalAlign": 0, "_id": "5fTjKmnRVNWbSuQoPv3XkW"
"_N$fontFamily": "Arial", },
"_N$overflow": 0, {
"_N$cacheMode": 0, "__type__": "cc.Widget",
"_id": "9bNHNPu5lC7rQYyr8ai/sY" "_name": "",
"_objFlags": 0,
"node": {
"__id__": 25
},
"_enabled": true,
"alignMode": 1,
"_target": null,
"_alignFlags": 8,
"_left": 0,
"_right": 0,
"_top": 0,
"_bottom": 0,
"_verticalCenter": 0,
"_horizontalCenter": 0,
"_isAbsLeft": true,
"_isAbsRight": true,
"_isAbsTop": true,
"_isAbsBottom": true,
"_isAbsHorizontalCenter": true,
"_isAbsVerticalCenter": true,
"_originalWidth": 0,
"_originalHeight": 0,
"_id": "a8Ih7yZaRBdZUYRQo7VeiV"
}, },
{ {
"__type__": "cc.Node", "__type__": "cc.Node",
"_name": "img", "_name": "bg_move",
"_objFlags": 0, "_objFlags": 0,
"_parent": { "_parent": {
"__id__": 14 "__id__": 21
}, },
"_children": [ "_children": [],
"_active": false,
"_components": [
{ {
"__id__": 19 "__id__": 29
},
{
"__id__": 30
} }
], ],
"_active": true,
"_components": [],
"_prefab": null, "_prefab": null,
"_opacity": 255, "_opacity": 255,
"_color": { "_color": {
...@@ -977,8 +1283,8 @@ ...@@ -977,8 +1283,8 @@
}, },
"_contentSize": { "_contentSize": {
"__type__": "cc.Size", "__type__": "cc.Size",
"width": 0, "width": 14,
"height": 0 "height": 720
}, },
"_anchorPoint": { "_anchorPoint": {
"__type__": "cc.Vec2", "__type__": "cc.Vec2",
...@@ -989,7 +1295,7 @@ ...@@ -989,7 +1295,7 @@
"__type__": "TypedArray", "__type__": "TypedArray",
"ctor": "Float64Array", "ctor": "Float64Array",
"array": [ "array": [
0, 633,
0, 0,
0, 0,
0, 0,
...@@ -1012,20 +1318,82 @@ ...@@ -1012,20 +1318,82 @@
"_is3DNode": false, "_is3DNode": false,
"_groupIndex": 0, "_groupIndex": 0,
"groupIndex": 0, "groupIndex": 0,
"_id": "53LUHHG2pEr79fyrvazXJs" "_id": "b7MYFimtJFk7j7n2He4McM"
},
{
"__type__": "cc.Sprite",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 28
},
"_enabled": true,
"_materials": [
{
"__uuid__": "eca5d2f2-8ef6-41c2-bbe6-f9c79d09c432"
}
],
"_srcBlendFactor": 770,
"_dstBlendFactor": 771,
"_spriteFrame": {
"__uuid__": "65989243-03ad-4572-894a-c1d4712ce82c"
},
"_type": 0,
"_sizeMode": 1,
"_fillType": 0,
"_fillCenter": {
"__type__": "cc.Vec2",
"x": 0,
"y": 0
},
"_fillStart": 0,
"_fillRange": 0,
"_isTrimmedMode": true,
"_atlas": null,
"_id": "f3HU4Zr+JKrYkZypEh60Di"
},
{
"__type__": "cc.Widget",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 28
},
"_enabled": true,
"alignMode": 1,
"_target": null,
"_alignFlags": 32,
"_left": 0,
"_right": 0,
"_top": 0,
"_bottom": 0,
"_verticalCenter": 0,
"_horizontalCenter": 0,
"_isAbsLeft": true,
"_isAbsRight": true,
"_isAbsTop": true,
"_isAbsBottom": true,
"_isAbsHorizontalCenter": true,
"_isAbsVerticalCenter": true,
"_originalWidth": 0,
"_originalHeight": 0,
"_id": "64EsoeEF5BsYPgaBKs5n9+"
}, },
{ {
"__type__": "cc.Node", "__type__": "cc.Node",
"_name": "icon", "_name": "bg_move",
"_objFlags": 0, "_objFlags": 0,
"_parent": { "_parent": {
"__id__": 18 "__id__": 21
}, },
"_children": [], "_children": [],
"_active": true, "_active": false,
"_components": [ "_components": [
{ {
"__id__": 20 "__id__": 32
},
{
"__id__": 33
} }
], ],
"_prefab": null, "_prefab": null,
...@@ -1039,8 +1407,8 @@ ...@@ -1039,8 +1407,8 @@
}, },
"_contentSize": { "_contentSize": {
"__type__": "cc.Size", "__type__": "cc.Size",
"width": 138, "width": 14,
"height": 141 "height": 1280
}, },
"_anchorPoint": { "_anchorPoint": {
"__type__": "cc.Vec2", "__type__": "cc.Vec2",
...@@ -1052,12 +1420,136 @@ ...@@ -1052,12 +1420,136 @@
"ctor": "Float64Array", "ctor": "Float64Array",
"array": [ "array": [
0, 0,
368.418,
0, 0,
0, 0,
0, 0,
0.7071067811865475,
0.7071067811865476,
1,
1,
1
]
},
"_eulerAngles": {
"__type__": "cc.Vec3",
"x": 0,
"y": 0,
"z": 90
},
"_skewX": 0,
"_skewY": 0,
"_is3DNode": false,
"_groupIndex": 0,
"groupIndex": 0,
"_id": "dc73Fb5SlD7J/vFGJ1/xcP"
},
{
"__type__": "cc.Widget",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 31
},
"_enabled": true,
"alignMode": 1,
"_target": null,
"_alignFlags": 41,
"_left": 633,
"_right": 633,
"_top": -648.418,
"_bottom": 0,
"_verticalCenter": 0,
"_horizontalCenter": 0,
"_isAbsLeft": true,
"_isAbsRight": true,
"_isAbsTop": true,
"_isAbsBottom": true,
"_isAbsHorizontalCenter": true,
"_isAbsVerticalCenter": true,
"_originalWidth": 14,
"_originalHeight": 0,
"_id": "60dJ16FZlGEYegzpqEv8gI"
},
{
"__type__": "cc.Sprite",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 31
},
"_enabled": true,
"_materials": [
{
"__uuid__": "eca5d2f2-8ef6-41c2-bbe6-f9c79d09c432"
}
],
"_srcBlendFactor": 770,
"_dstBlendFactor": 771,
"_spriteFrame": {
"__uuid__": "65989243-03ad-4572-894a-c1d4712ce82c"
},
"_type": 2,
"_sizeMode": 0,
"_fillType": 0,
"_fillCenter": {
"__type__": "cc.Vec2",
"x": 0,
"y": 0
},
"_fillStart": 0,
"_fillRange": 0,
"_isTrimmedMode": true,
"_atlas": null,
"_id": "fdbhfWO25KXaUT3pi6g/DW"
},
{
"__type__": "cc.Node",
"_name": "bg_move",
"_objFlags": 0,
"_parent": {
"__id__": 21
},
"_children": [],
"_active": false,
"_components": [
{
"__id__": 35
},
{
"__id__": 36
}
],
"_prefab": null,
"_opacity": 255,
"_color": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_contentSize": {
"__type__": "cc.Size",
"width": 14,
"height": 1280
},
"_anchorPoint": {
"__type__": "cc.Vec2",
"x": 0.5,
"y": 0.5
},
"_trs": {
"__type__": "TypedArray",
"ctor": "Float64Array",
"array": [
0, 0,
-369.556,
0, 0,
1, 0,
0,
0.7071067811865475,
0.7071067811865476,
1, 1,
1, 1,
1 1
...@@ -1067,31 +1559,62 @@ ...@@ -1067,31 +1559,62 @@
"__type__": "cc.Vec3", "__type__": "cc.Vec3",
"x": 0, "x": 0,
"y": 0, "y": 0,
"z": 0 "z": 90
}, },
"_skewX": 0, "_skewX": 0,
"_skewY": 0, "_skewY": 0,
"_is3DNode": false, "_is3DNode": false,
"_groupIndex": 0, "_groupIndex": 0,
"groupIndex": 0, "groupIndex": 0,
"_id": "1blU2OArJIfoC9XfupGxJG" "_id": "90trfmqXlIi62ExYNzN4I5"
},
{
"__type__": "cc.Widget",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 34
},
"_enabled": true,
"alignMode": 1,
"_target": null,
"_alignFlags": 41,
"_left": 633,
"_right": 633,
"_top": 89.55599999999998,
"_bottom": 0,
"_verticalCenter": 0,
"_horizontalCenter": 0,
"_isAbsLeft": true,
"_isAbsRight": true,
"_isAbsTop": true,
"_isAbsBottom": true,
"_isAbsHorizontalCenter": true,
"_isAbsVerticalCenter": true,
"_originalWidth": 14,
"_originalHeight": 0,
"_id": "5cVY3BafxL3pwuCJufNQJg"
}, },
{ {
"__type__": "cc.Sprite", "__type__": "cc.Sprite",
"_name": "", "_name": "",
"_objFlags": 0, "_objFlags": 0,
"node": { "node": {
"__id__": 19 "__id__": 34
}, },
"_enabled": true, "_enabled": true,
"_materials": [], "_materials": [
{
"__uuid__": "eca5d2f2-8ef6-41c2-bbe6-f9c79d09c432"
}
],
"_srcBlendFactor": 770, "_srcBlendFactor": 770,
"_dstBlendFactor": 771, "_dstBlendFactor": 771,
"_spriteFrame": { "_spriteFrame": {
"__uuid__": "6fbc30a8-3c49-44ae-8ba4-7f56f385b78a" "__uuid__": "65989243-03ad-4572-894a-c1d4712ce82c"
}, },
"_type": 0, "_type": 2,
"_sizeMode": 1, "_sizeMode": 0,
"_fillType": 0, "_fillType": 0,
"_fillCenter": { "_fillCenter": {
"__type__": "cc.Vec2", "__type__": "cc.Vec2",
...@@ -1102,18 +1625,18 @@ ...@@ -1102,18 +1625,18 @@
"_fillRange": 0, "_fillRange": 0,
"_isTrimmedMode": true, "_isTrimmedMode": true,
"_atlas": null, "_atlas": null,
"_id": "03GEWUEZJGyKormWgIWCtM" "_id": "4c/3rfzz1AkLG+k9qBfc0h"
}, },
{ {
"__type__": "cc.Node", "__type__": "cc.Node",
"_name": "audio", "_name": "pic_temp",
"_objFlags": 0, "_objFlags": 0,
"_parent": { "_parent": {
"__id__": 14 "__id__": 2
}, },
"_children": [ "_children": [
{ {
"__id__": 22 "__id__": 38
} }
], ],
"_active": true, "_active": true,
...@@ -1129,8 +1652,8 @@ ...@@ -1129,8 +1652,8 @@
}, },
"_contentSize": { "_contentSize": {
"__type__": "cc.Size", "__type__": "cc.Size",
"width": 0, "width": 650,
"height": 0 "height": 410
}, },
"_anchorPoint": { "_anchorPoint": {
"__type__": "cc.Vec2", "__type__": "cc.Vec2",
...@@ -1141,7 +1664,7 @@ ...@@ -1141,7 +1664,7 @@
"__type__": "TypedArray", "__type__": "TypedArray",
"ctor": "Float64Array", "ctor": "Float64Array",
"array": [ "array": [
0, -1274,
0, 0,
0, 0,
0, 0,
...@@ -1150,7 +1673,7 @@ ...@@ -1150,7 +1673,7 @@
1, 1,
1, 1,
1, 1,
1 0
] ]
}, },
"_eulerAngles": { "_eulerAngles": {
...@@ -1164,20 +1687,23 @@ ...@@ -1164,20 +1687,23 @@
"_is3DNode": false, "_is3DNode": false,
"_groupIndex": 0, "_groupIndex": 0,
"groupIndex": 0, "groupIndex": 0,
"_id": "b823DIVC9L+Ihc3T9Bt7m3" "_id": "f5uVe6L1lNmYEspgnFI0dX"
}, },
{ {
"__type__": "cc.Node", "__type__": "cc.Node",
"_name": "btn", "_name": "icon",
"_objFlags": 0, "_objFlags": 0,
"_parent": { "_parent": {
"__id__": 21 "__id__": 37
}, },
"_children": [], "_children": [],
"_active": true, "_active": true,
"_components": [ "_components": [
{ {
"__id__": 23 "__id__": 39
},
{
"__id__": 40
} }
], ],
"_prefab": null, "_prefab": null,
...@@ -1191,8 +1717,8 @@ ...@@ -1191,8 +1717,8 @@
}, },
"_contentSize": { "_contentSize": {
"__type__": "cc.Size", "__type__": "cc.Size",
"width": 0, "width": 636,
"height": 0 "height": 396
}, },
"_anchorPoint": { "_anchorPoint": {
"__type__": "cc.Vec2", "__type__": "cc.Vec2",
...@@ -1212,7 +1738,7 @@ ...@@ -1212,7 +1738,7 @@
1, 1,
1, 1,
1, 1,
1 0
] ]
}, },
"_eulerAngles": { "_eulerAngles": {
...@@ -1226,25 +1752,64 @@ ...@@ -1226,25 +1752,64 @@
"_is3DNode": false, "_is3DNode": false,
"_groupIndex": 0, "_groupIndex": 0,
"groupIndex": 0, "groupIndex": 0,
"_id": "3d0p0/uJZJIoRva5Br2iqv" "_id": "e759xQxcRBDZCN5l4fsqO0"
}, },
{ {
"__type__": "cc.AudioSource", "__type__": "cc.Sprite",
"_name": "", "_name": "",
"_objFlags": 0, "_objFlags": 0,
"node": { "node": {
"__id__": 22 "__id__": 38
}, },
"_enabled": true, "_enabled": true,
"_clip": { "_materials": [
"__uuid__": "f0680ae0-c079-45ef-abd7-9e63d90b982b" {
"__uuid__": "eca5d2f2-8ef6-41c2-bbe6-f9c79d09c432"
}
],
"_srcBlendFactor": 1,
"_dstBlendFactor": 771,
"_spriteFrame": null,
"_type": 0,
"_sizeMode": 0,
"_fillType": 0,
"_fillCenter": {
"__type__": "cc.Vec2",
"x": 0,
"y": 0
}, },
"_volume": 1, "_fillStart": 0,
"_mute": false, "_fillRange": 0,
"_loop": false, "_isTrimmedMode": true,
"playOnLoad": false, "_atlas": null,
"preload": false, "_id": "0eSa63fVNKKLV/1Jn+eg8n"
"_id": "0adN50f61DlbmppsPkOnjX" },
{
"__type__": "cc.Widget",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 38
},
"_enabled": true,
"alignMode": 2,
"_target": null,
"_alignFlags": 45,
"_left": 7,
"_right": 7,
"_top": 7,
"_bottom": 7,
"_verticalCenter": 0,
"_horizontalCenter": 0,
"_isAbsLeft": true,
"_isAbsRight": true,
"_isAbsTop": true,
"_isAbsBottom": true,
"_isAbsHorizontalCenter": true,
"_isAbsVerticalCenter": true,
"_originalWidth": 650,
"_originalHeight": 410,
"_id": "fbCrzYGGRFTKesyrZuyvHE"
}, },
{ {
"__type__": "cc.Canvas", "__type__": "cc.Canvas",
...@@ -1291,13 +1856,31 @@ ...@@ -1291,13 +1856,31 @@
"_id": "29zXboiXFBKoIV4PQ2liTe" "_id": "29zXboiXFBKoIV4PQ2liTe"
}, },
{ {
"__type__": "f4edeRi+NdAabqAkVYRwFjK", "__type__": "c238bwNxXtAHqIXQECY4nQz",
"_name": "", "_name": "",
"_objFlags": 0, "_objFlags": 0,
"node": { "node": {
"__id__": 2 "__id__": 2
}, },
"_enabled": true, "_enabled": true,
"_id": "e687yyoRBIzZAOVRL8Sseh" "picNode": {
"__id__": 21
},
"picTempNode": {
"__id__": 37
},
"leftNode": {
"__id__": 11
},
"rightNode": {
"__id__": 15
},
"btnClip": {
"__uuid__": "39ef1939-3bf9-4d21-a67a-bc1dede521a9"
},
"tipClip": {
"__uuid__": "e0bcf4cc-35a7-4d61-b202-8dd49299c2c0"
},
"_id": "a1ibU1vO9Nwbfwjsm/NgGR"
} }
] ]
\ No newline at end of file
...@@ -9,7 +9,34 @@ const { ccclass, property } = cc._decorator; ...@@ -9,7 +9,34 @@ const { ccclass, property } = cc._decorator;
@ccclass @ccclass
export default class NewClass extends cc.Component { export default class NewClass extends cc.Component {
onLoad() {
console.log('测试ts脚本能否正常使用') @property(cc.Label)
label: cc.Label = null;
@property
text: string = 'hello';
// LIFE-CYCLE CALLBACKS:
// onLoad () {}
start() {
cc.color()
this.node.off(cc.Node.EventType.MOUSE_DOWN)
} }
// update (dt) {}
onEnable() {
let one = new cc.Animation()
one.currentClip.speed
one.play().wrapMode
one.defaultClip.wrapMode = cc.WrapMode.Reverse
cc.Node.EventType.MOUSE_LEAVE
cc.tween(this.node).to(1,{opacity:1}).to
cc.assetManager.loadRemote
this.node.
}
} }
{ {
"ver": "1.0.8", "ver": "1.0.8",
"uuid": "ade7af40-d56d-4087-bbc6-2888fef55353", "uuid": "81db3e2c-d815-4891-a77d-5651d54dc92d",
"isPlugin": false, "isPlugin": false,
"loadPluginInWeb": true, "loadPluginInWeb": true,
"loadPluginInNative": true, "loadPluginInNative": true,
......
import { onHomeworkFinish } from "../script/util"; import { tools } from "./tools";
import { defaultData } from "../script/defaultData";
cc.Class({ cc.Class({
extends: cc.Component, extends: cc.Component,
properties: { properties: {
picNode: {
type: cc.Node,
default: null
},
picTempNode: {
type: cc.Node,
default: null
},
leftNode: {
type: cc.Node,
default: null
},
rightNode: {
type: cc.Node,
default: null
},
btnClip: cc.AudioClip,
tipClip: cc.AudioClip,
}, },
// 生命周期 onLoad // 生命周期 onLoad
...@@ -49,6 +64,7 @@ cc.Class({ ...@@ -49,6 +64,7 @@ cc.Class({
sy = frameSize.height / this._designSize.height; sy = frameSize.height / this._designSize.height;
this._mapScaleMin = Math.min(sx, sy) * this._cocosScale; this._mapScaleMin = Math.min(sx, sy) * this._cocosScale;
this._mapScaleMax = Math.max(sx, sy) * this._cocosScale; this._mapScaleMax = Math.max(sx, sy) * this._cocosScale;
this.originRect = cc.size(1280, 720)
}, },
...@@ -61,53 +77,64 @@ cc.Class({ ...@@ -61,53 +77,64 @@ cc.Class({
getData((data) => { getData((data) => {
console.log('data:', data); console.log('data:', data);
this.data = data || this.getDefaultData(); this.data = data.length ? data : this.getDefaultData();
this.data = JSON.parse(JSON.stringify(this.data)) this.data = JSON.parse(JSON.stringify(this.data))
this.preloadItem() this.preloadItem()
}) })
//init show
this.picNode.opacity = 0
this.leftNode.active = false
this.rightNode.active = false
}, },
getData(func) { onEnable() {
if (window && window.courseware) { this.rightNode.on(cc.Node.EventType.MOUSE_DOWN, this.changeIcon.bind(this, this.rightNode, true))
window.courseware.getData(func, 'scene'); this.rightNode.on(cc.Node.EventType.MOUSE_UP, this.changeIcon.bind(this, this.rightNode, false))
return; this.rightNode.on(cc.Node.EventType.MOUSE_LEAVE, this.changeIcon.bind(this, this.rightNode, false))
} this.leftNode.on(cc.Node.EventType.MOUSE_DOWN, this.changeIcon.bind(this, this.leftNode, true))
this.leftNode.on(cc.Node.EventType.MOUSE_UP, this.changeIcon.bind(this, this.leftNode, false))
const middleLayer = cc.find('middleLayer'); this.leftNode.on(cc.Node.EventType.MOUSE_UP, this.changeIcon.bind(this, this.leftNode, false))
if (middleLayer) { cc.systemEvent.on('playAudio', this.onPlayAudio, this)
const middleLayerComponent = middleLayer.getComponent('middleLayer');
middleLayerComponent.getData(func);
return;
}
func(this.getDefaultData());
}, },
getDefaultData() { onDisable() {
return defaultData; this.rightNode.off(cc.Node.EventType.MOUSE_DOWN)
this.rightNode.off(cc.Node.EventType.MOUSE_UP)
this.rightNode.off(cc.Node.EventType.MOUSE_LEAVE)
this.leftNode.off(cc.Node.EventType.MOUSE_DOWN)
this.leftNode.off(cc.Node.EventType.MOUSE_UP)
this.leftNode.off(cc.Node.EventType.MOUSE_LEAVE)
cc.systemEvent.off('playAudio', this.onPlayAudio, this)
}, },
preloadItem() { changeIcon(node, bl) {
this.addPreloadImage(); node.children[0].active = !bl
this.addPreloadAudio(); node.children[1].active = bl
this.addPreloadAnima();
this.preload();
}, },
getData(cb) {
addPreloadImage() { cb(this.getDefaultData());
this._imageResList.push({ url: this.data.pic_url });
this._imageResList.push({ url: this.data.pic_url_2 });
}, },
addPreloadAudio() { getDefaultData() {
const dataJson = '[{"bgItem":{"url":"http://staging-teach.cdn.ireadabc.com/807e9f0c160545ec14d5094f258e0c75.png","rect":{"x":249,"y":0,"width":299,"height":299}},"hotZoneItemArr":[{"id":"1620701172440","index":0,"pic_url":"http://staging-teach.cdn.ireadabc.com/d8edc8d8113269b4c97b75a55a5c926c.jpg","audio_url":"http://staging-teach.cdn.ireadabc.com/bd0502e664d0d279ccbec4e22b60f051.mp3","itemType":"pic","fontScale":0.62265625,"imgScale":0.4671875,"mapScale":0.62265625,"gIdx":"1","rect":{"x":29.9,"y":29.9,"width":239.2,"height":239.2}}]},{"bgItem":{"url":"http://staging-teach.cdn.ireadabc.com/807e9f0c160545ec14d5094f258e0c75.png","rect":{"x":249,"y":0,"width":299,"height":299}},"hotZoneItemArr":[{"id":"1620701172440","index":0,"pic_url":"http://staging-teach.cdn.ireadabc.com/d8edc8d8113269b4c97b75a55a5c926c.jpg","audio_url":"http://staging-teach.cdn.ireadabc.com/bd0502e664d0d279ccbec4e22b60f051.mp3","itemType":"pic","fontScale":0.62265625,"imgScale":0.4671875,"mapScale":0.62265625,"gIdx":"1","rect":{"x":29.9,"y":29.9,"width":239.2,"height":239.2}}]}]'
this._audioResList.push({ url: this.data.audio_url }); const data = JSON.parse(dataJson);
return data;
}, },
addPreloadAnima() { preloadItem() {
this.addPreload()
this.preload();
},
addPreload() {
for (let item of this.data) {
this._imageResList.push({ url: item.bgItem.url })
for (let item of item.hotZoneItemArr) {
item.pic_url && this._imageResList.push({ url: item.pic_url })
item.audio_url && this._audioResList.push({ url: item.audio_url })
}
}
}, },
preload() { preload() {
...@@ -127,7 +154,6 @@ cc.Class({ ...@@ -127,7 +154,6 @@ cc.Class({
loadEnd() { loadEnd() {
this.initData(); this.initData();
this.initAudio();
this.initView(); this.initView();
// this.initListener(); // this.initListener();
}, },
...@@ -138,25 +164,9 @@ cc.Class({ ...@@ -138,25 +164,9 @@ cc.Class({
this._cantouch = true; this._cantouch = true;
}, },
audioBtn: null,
initAudio() {
const audioNode = cc.find('Canvas/res/audio');
const getAudioByResName = (resName) => {
return audioNode.getChildByName(resName).getComponent(cc.AudioSource);
}
this.audioBtn = getAudioByResName('btn');
},
initView() { initView() {
this.initBg(); this.initBg();
this.initPic(); this.initPic();
this.initBtn();
this.initIcon();
}, },
initBg() { initBg() {
...@@ -164,203 +174,145 @@ cc.Class({ ...@@ -164,203 +174,145 @@ cc.Class({
bgNode.scale = this._mapScaleMax; bgNode.scale = this._mapScaleMax;
}, },
pic1: null,
pic2: null,
initPic() { initPic() {
const canvas = cc.find('Canvas'); this.picNode.opacity = 0
const maxW = canvas.width * 0.7; cc.Tween.stopAllByTarget(this.picNode)
cc.tween(this.picNode).to(1, { opacity: 255 }, { easing: 'cubicInOut' }).start()
this.getSprNodeByUrl(this.data.pic_url, (sprNode) => { this.curPage = 0
const picNode1 = sprNode; if (this.data.length == 1) {
picNode1.scale = maxW / picNode1.width; this.leftNode.active = false
picNode1.baseX = picNode1.x; this.rightNode.active = false
canvas.addChild(picNode1); } else {
this.pic1 = picNode1; this.leftNode.active = false
this.rightNode.active = true
const labelNode = new cc.Node(); }
labelNode.color = cc.Color.YELLOW; this.setContent(this.picNode, this.data[0])
const label = labelNode.addComponent(cc.Label);
label.string = this.data.text;
label.fontSize = 60;
label.lineHeight = 60;
label.font = cc.find('Canvas/res/font/BRLNSDB').getComponent('cc.Label').font;
picNode1.addChild(labelNode);
});
this.getSprNodeByUrl(this.data.pic_url_2, (sprNode) => {
const picNode2 = sprNode;
picNode2.scale = maxW / picNode2.width;
canvas.addChild(picNode2);
picNode2.x = canvas.width;
picNode2.baseX = picNode2.x;
this.pic2 = picNode2;
const labelNode = new cc.Node();
const label = labelNode.addComponent(cc.RichText);
const size = 60
label.font = cc.find('Canvas/res/font/BRLNSDB').getComponent(cc.Label).font;
label.string = `<outline color=#751e00 width=4><size=${size}><color=#ffffff>${this.data.text}</color></size></outline>`
label.lineHeight = size;
picNode2.addChild(labelNode);
});
},
initIcon() {
const iconNode = this.getSprNode('icon');
iconNode.zIndex = 5;
iconNode.anchorX = 1;
iconNode.anchorY = 1;
iconNode.parent = cc.find('Canvas');
iconNode.x = iconNode.parent.width / 2 - 10;
iconNode.y = iconNode.parent.height / 2 - 10;
iconNode.on(cc.Node.EventType.TOUCH_START, () => {
this.playAudioByUrl(this.data.audio_url);
})
}, },
curPage: null, curPage: null,
initBtn() {
this.curPage = 0; onClickRight() {
const bottomPart = cc.find('Canvas/bottomPart'); if (!this._cantouch) {
bottomPart.zIndex = 5; // 提高层级 return;
}
bottomPart.x = bottomPart.parent.width / 2; this.curPage += 1
bottomPart.y = -bottomPart.parent.height / 2;
const leftBtnNode = bottomPart.getChildByName('btn_left'); if (this.curPage == 1) {
//节点中添加了button组件 则可以添加click事件监听 this.leftNode.active = true
leftBtnNode.on('click', () => { this.leftNode.children[0].active = true
if (!this._cantouch) { this.leftNode.children[1].active = false
return; this.leftNode.scale = 1
} }
if (this.curPage == 0) {
return;
}
this.curPage = 0
this.leftMove();
// 游戏结束时需要调用这个方法通知系统作业完成 if (this.curPage == this.data.length - 1) {
onHomeworkFinish(); this.rightNode.active = false
}
cc.audioEngine.play(this.audioBtn.clip, false, 0.8) this.leftMove()
})
const rightBtnNode = bottomPart.getChildByName('btn_right'); cc.audioEngine.play(this.clickClip, false, 0.5)
//节点中添加了button组件 则可以添加click事件监听 },
rightBtnNode.on('click', () => {
if (!this._cantouch) {
return;
}
if (this.curPage == 1) {
return;
}
this.curPage = 1 onClickLeft() {
this.rightMove(); if (!this._cantouch) {
return;
}
this.curPage -= 1
if (this.curPage == 0) {
this.leftNode.active = false
}
cc.audioEngine.play(this.audioBtn.clip, false, 0.5) if (this.curPage == this.data.length - 2) {
}) this.rightNode.active = true
this.rightNode.children[0].active = true
this.rightNode.children[1].active = false
this.rightNode.scale = 1
}
this.rightMove()
cc.audioEngine.play(this.clickClip, false, 0.8)
}, },
/** 左移动 */
leftMove() { leftMove() {
this.stopAudio()
this._cantouch = false; this._cantouch = false;
const len = this.pic1.parent.width; let width = cc.winSize.width
cc.tween(this.pic1) this.picNode.x = 0
.to(1, { x: this.pic1.baseX }, { easing: 'cubicInOut' }) this.picTempNode.x = width
this.setContent(this.picTempNode, this.data[this.curPage])
cc.tween(this.picNode)
.to(1, { x: -width }, { easing: 'cubicInOut' })
.start(); .start();
cc.tween(this.pic2) cc.tween(this.picTempNode)
.to(1, { x: this.pic2.baseX }, { easing: 'cubicInOut' }) .to(1, { x: 0 }, { easing: 'cubicInOut' })
.call(() => { .call(() => {
let temp = this.picNode
this.picNode = this.picTempNode
this.picTempNode = temp
this._cantouch = true; this._cantouch = true;
}) })
.start(); .start();
}, },
/** 右移动 */
rightMove() { rightMove() {
this.stopAudio()
this._cantouch = false; this._cantouch = false;
const len = this.pic1.parent.width; let width = cc.winSize.width
cc.tween(this.pic1) this.picNode.x = 0
.to(1, { x: this.pic1.baseX - len }, { easing: 'cubicInOut' }) this.picTempNode.x = -width
this.setContent(this.picTempNode, this.data[this.curPage])
cc.tween(this.picNode)
.to(1, { x: width }, { easing: 'cubicInOut' })
.start(); .start();
cc.tween(this.pic2) cc.tween(this.picTempNode)
.to(1, { x: this.pic2.baseX - len }, { easing: 'cubicInOut' }) .to(1, { x: 0 }, { easing: 'cubicInOut' })
.call(() => { .call(() => {
this._cantouch = true; let temp = this.picNode
this.picNode = this.picTempNode
this.picTempNode = temp
this._cantouch = true
}) })
.start(); .start();
}, },
// update (dt) {}, // update (dt) {},
// ------------------------------------------------ // ------------------------------------------------
getSprNode(resName) { /**普通大小 */
const sf = cc.find('Canvas/res/img/' + resName).getComponent(cc.Sprite).spriteFrame; originRect: null,
const node = new cc.Node(); /**设置显示区域内容 */
node.addComponent(cc.Sprite).spriteFrame = sf; setContent(picNode, data) {
return node; if (!data) {
}, console.log('数据错误')
return
}
getSpriteFrimeByUrl(url, cb) { picNode
cc.loader.load({ url }, (err, img) => { let sprite = picNode.getComponentInChildren(cc.Sprite)
const spriteFrame = new cc.SpriteFrame(img) tools.getSpriteFrimeByUrl(data.bgItem.url, (sp) => {
if (cb) { sprite.spriteFrame = sp
cb(spriteFrame); let rect = sp.getRect()
} let scale = rect.width / rect.height
}) let originScale = this.originRect.width / this.originRect.height
}, if (scale < originScale) {
let width = rect.width / (rect.height / this.originRect.height)
getSprNodeByUrl(url, cb) { picNode.width = width
const node = new cc.Node(); picNode.height = this.originRect.height
const spr = node.addComponent(cc.Sprite); } else if (scale > originScale) {
this.getSpriteFrimeByUrl(url, (sf) => { picNode.height = rect.height / (rect.width / this.originRect.width)
spr.spriteFrame = sf; picNode.width = this.originRect.width
if (cb) { } else {
cb(node); picNode.width = this.originRect.width
picNode.height = this.originRect.height
} }
console.log(picNode)
}) })
},
playAudioByUrl(audio_url, cb = null) { }
if (audio_url) {
cc.assetManager.loadRemote(audio_url, (err, audioClip) => {
const audioId = cc.audioEngine.play(audioClip, false, 0.8);
if (cb) {
cc.audioEngine.setFinishCallback(audioId, () => {
cb();
});
}
});
}
},
// ------------------------------------------ // ------------------------------------------
}); });
{ {
"ver": "1.0.8", "ver": "1.0.8",
"uuid": "f4ede462-f8d7-4069-ba80-915611c058ca", "uuid": "c238bc0d-c57b-401e-a217-404098e27433",
"isPlugin": false, "isPlugin": false,
"loadPluginInWeb": true, "loadPluginInWeb": true,
"loadPluginInNative": true, "loadPluginInNative": true,
......
export const tools = {
getSpriteFrimeByUrl(url, cb) {
cc.loader.load({ url }, (err, img) => {
const spriteFrame = new cc.SpriteFrame(img)
if (cb) {
cb(spriteFrame);
}
})
}
}
\ No newline at end of file
{
"ver": "1.0.8",
"uuid": "68947d90-e044-48ff-8bce-670db8633681",
"isPlugin": false,
"loadPluginInWeb": true,
"loadPluginInNative": true,
"loadPluginInEditor": false,
"subMetas": {}
}
\ No newline at end of file
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;
}
// console.log('angle: ', angle);
return angle;
}
export function exchangeNodePos(baseNode, targetNode) {
return baseNode.convertToNodeSpaceAR(targetNode._parent.convertToWorldSpaceAR(cc.v2(targetNode.x, targetNode.y)));
}
export function RandomInt(a, b = 0) {
let max = Math.max(a, b);
let min = Math.min(a, b);
return Math.floor(Math.random() * (max - min) + min);
}
export function randomSortByArr(arr) {
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 setSprNodeMaxLen(sprNode, maxW, maxH) {
const sx = maxW / sprNode.width;
const sy = maxH / sprNode.height;
const s = Math.min(sx, sy);
sprNode.scale = Math.round(s * 1000) / 1000;
}
export function localPosTolocalPos(baseNode, targetNode) {
const worldPos = targetNode.parent.convertToWorldSpaceAR(cc.v2(targetNode.x, targetNode.y));
const localPos = baseNode.parent.convertToNodeSpaceAR(cc.v2(worldPos.x, worldPos.y));
return localPos;
}
export function worldPosToLocalPos(worldPos, baseNode) {
const localPos = baseNode.parent.convertToNodeSpaceAR(cc.v2(worldPos.x, worldPos.y));
return localPos;
}
export function getScaleRateBy2Node(baseNode, targetNode, maxFlag = true) {
const worldRect1 = targetNode.getBoundingBoxToWorld();
const worldRect2 = baseNode.getBoundingBoxToWorld();
const sx = worldRect1.width / worldRect2.width;
const sy = worldRect1.height / worldRect2.height;
if (maxFlag) {
return Math.max(sx, sy);
} else {
return Math.min(sx, sy);
}
}
export function getDistance (start, end){
var pos = cc.v2(start.x - end.x, start.y - end.y);
var dis = Math.sqrt(pos.x*pos.x + pos.y*pos.y);
return dis;
}
export function playAudioByUrl(audio_url, cb=null) {
if (audio_url) {
cc.assetManager.loadRemote(audio_url, (err, audioClip) => {
const audioId = cc.audioEngine.play(audioClip, false, 0.8);
if (cb) {
cc.audioEngine.setFinishCallback(audioId, () => {
cb();
});
}
});
}
}
export function btnClickAnima(btn, time=0.15, rate=1.05) {
btn.tmpScale = btn.scale;
btn.on(cc.Node.EventType.TOUCH_START, () => {
cc.tween(btn)
.to(time / 2, {scale: btn.scale * rate})
.start()
})
btn.on(cc.Node.EventType.TOUCH_CANCEL, () => {
cc.tween(btn)
.to(time / 2, {scale: btn.tmpScale})
.start()
})
btn.on(cc.Node.EventType.TOUCH_END, () => {
cc.tween(btn)
.to(time / 2, {scale: btn.tmpScale})
.start()
})
}
export function getSpriteFrimeByUrl(url, cb) {
cc.loader.load({ url }, (err, img) => {
const spriteFrame = new cc.SpriteFrame(img)
if (cb) {
cb(spriteFrame);
}
})
}
export function getSprNode(resName) {
const sf = cc.find('Canvas/res/img/' + resName).getComponent(cc.Sprite).spriteFrame;
const node = new cc.Node();
node.addComponent(cc.Sprite).spriteFrame = sf;
return node;
}
export function getSprNodeByUrl(url, cb) {
const node = new cc.Node();
const spr = node.addComponent(cc.Sprite);
getSpriteFrimeByUrl(url, (sf) => {
spr.spriteFrame = sf;
if (cb) {
cb(spr);
}
})
}
export function playAudio(audioClip, cb = null) {
if (audioClip) {
const audioId = cc.audioEngine.playEffect(audioClip, false, 0.8);
if (cb) {
cc.audioEngine.setFinishCallback(audioId, () => {
cb();
});
}
}
}
export async function asyncDelay(time) {
return new Promise((resolve, reject) => {
try {
setTimeout(() => {
resolve();
}, time * 1000);
} catch (e) {
reject(e);
}
})
}
export class FireworkSettings {
baseNode; // 父节点
nodeList; // 火花节点的array
pos; // 发射点
side; // 发射方向
range; // 扩散范围
number; // 发射数量
scalseRange; // 缩放范围
constructor(baseNode, nodeList,
pos = cc.v2(0, 0),
side = cc.v2(0, 100),
range = 50,
number = 100,
scalseRange = 0
) {
this.baseNode = baseNode;
this.nodeList = nodeList;
this.pos = pos;
this.side = side;
this.range = range;
this.number = number;
this.scalseRange = scalseRange;
}
static copy(firework) {
return new FireworkSettings(
firework.baseNode,
firework.nodeList,
firework.pos,
firework.side,
firework.range,
firework.number,
);
}
}
export async function showFireworks(fireworkSettings) {
const { baseNode, nodeList, pos, side, range, number, scalseRange } = fireworkSettings;
new Array(number).fill(' ').forEach(async (_, i) => {
let rabbonNode = new cc.Node();
rabbonNode.parent = baseNode;
rabbonNode.x = pos.x;
rabbonNode.y = pos.y;
rabbonNode.angle = 60 * Math.random() - 30;
let node = cc.instantiate(nodeList[RandomInt(nodeList.length)]);
node.parent = rabbonNode;
node.active = true;
node.x = 0;
node.y = 0;
node.angle = 0;
node.scale = (Math.random() - 0.5) * scalseRange + 1;
const rate = Math.random();
const angle = Math.PI * (Math.random() * 2 - 1);
await asyncTweenBy(rabbonNode, 0.3, {
x: side.x * rate + Math.cos(angle) * range * rate,
y: side.y * rate + Math.sin(angle) * range * rate
}, {
easing: 'quadIn'
});
cc.tween(rabbonNode)
.by(8, { y: -2000 })
.start();
cc.tween(rabbonNode)
.to(5, { scale: (Math.random() - 0.5) * scalseRange + 1 })
.start();
rabbonFall(rabbonNode);
await asyncDelay(Math.random());
cc.tween(node)
.by(0.15, { x: -10, angle: -10 })
.by(0.3, { x: 20, angle: 20 })
.by(0.15, { x: -10, angle: -10 })
.union()
.repeatForever()
.start();
cc.tween(rabbonNode)
.delay(5)
.to(0.3, { opacity: 0 })
.call(() => {
node.stopAllActions();
node.active = false;
node.parent = null;
node = null;
})
.start();
});
}
async function rabbonFall(node) {
const time = 1 + Math.random();
const offsetX = RandomInt(-200, 200) * time;
await asyncTweenBy(node, time, { x: offsetX, angle: offsetX * 60 / 200 });
rabbonFall(node);
}
export async function asyncTweenTo(node, duration, obj, ease = undefined) {
return new Promise((resolve, reject) => {
try {
cc.tween(node)
.to(duration, obj, ease)
.call(() => {
resolve();
})
.start();
} catch (e) {
reject(e);
}
});
}
export async function asyncTweenBy(node, duration, obj, ease = undefined) {
return new Promise((resolve, reject) => {
try {
cc.tween(node)
.by(duration, obj, ease)
.call(() => {
resolve();
})
.start();
} catch (e) {
reject(e);
}
});
}
export function showTrebleFirework(baseNode, rabbonList) {
const middle = new FireworkSettings(baseNode, rabbonList);
middle.pos = cc.v2(0, -400);
middle.side = cc.v2(0, 1000);
middle.range = 200;
middle.number = 100;
middle.scalseRange = 0.4;
const left = FireworkSettings.copy(middle);
left.pos = cc.v2(-600, -400);
left.side = cc.v2(200, 1000);
const right = FireworkSettings.copy(middle);
right.pos = cc.v2(600, -400);
right.side = cc.v2(-200, 1000);
showFireworks(middle);
showFireworks(left);
showFireworks(right);
}
export function onHomeworkFinish() {
const middleLayer = cc.find('middleLayer');
if (middleLayer) {
const middleLayerComponent = middleLayer.getComponent('middleLayer');
if (middleLayerComponent.role == 'student') {
middleLayerComponent.onHomeworkFinish(() => { });
}
} else {
console.log('onHomeworkFinish');
}
}
\ No newline at end of file
...@@ -26,8 +26,8 @@ ...@@ -26,8 +26,8 @@
"height": 720, "height": 720,
"rawWidth": 14, "rawWidth": 14,
"rawHeight": 720, "rawHeight": 720,
"borderTop": 0, "borderTop": 22,
"borderBottom": 0, "borderBottom": 33,
"borderLeft": 0, "borderLeft": 0,
"borderRight": 0, "borderRight": 0,
"subMetas": {} "subMetas": {}
......
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