Commit 6ca85b6b authored by limingzhe's avatar limingzhe

feat: 添加左右按钮 spine动画

parent 0dc17b82
No preview for this file type
...@@ -20,10 +20,10 @@ ...@@ -20,10 +20,10 @@
"@angular/platform-browser": "~9.0.2", "@angular/platform-browser": "~9.0.2",
"@angular/platform-browser-dynamic": "~9.0.2", "@angular/platform-browser-dynamic": "~9.0.2",
"@angular/router": "~9.0.2", "@angular/router": "~9.0.2",
"@fortawesome/angular-fontawesome": "^0.6.0", "@fortawesome/angular-fontawesome": "0.6.0",
"@fortawesome/fontawesome-svg-core": "^1.2.27", "@fortawesome/fontawesome-svg-core": "1.2.27",
"@fortawesome/free-regular-svg-icons": "^5.12.1", "@fortawesome/free-regular-svg-icons": "5.12.1",
"@fortawesome/free-solid-svg-icons": "^5.12.1", "@fortawesome/free-solid-svg-icons": "5.12.1",
"@tweenjs/tween.js": "~18.5.0", "@tweenjs/tween.js": "~18.5.0",
"ali-oss": "^6.5.1", "ali-oss": "^6.5.1",
"cnpm": "^6.1.1", "cnpm": "^6.1.1",
......
...@@ -1959,6 +1959,8 @@ export class HotZoneItem extends MySprite { ...@@ -1959,6 +1959,8 @@ export class HotZoneItem extends MySprite {
text; text;
gIdx; gIdx;
isAnimaStyle = false;
private _itemType; private _itemType;
private shapeRect: ShapeRect; private shapeRect: ShapeRect;
...@@ -2059,7 +2061,10 @@ export class HotZoneItem extends MySprite { ...@@ -2059,7 +2061,10 @@ export class HotZoneItem extends MySprite {
this.hideLabel(); this.hideLabel();
} }
setAnimaStyle(isAnimaStyle) {
this.isAnimaStyle = isAnimaStyle;
console.log('in setAnimaStyle ')
}
drawArrow() { drawArrow() {
if (!this.arrow) { return; } if (!this.arrow) { return; }
...@@ -2071,13 +2076,16 @@ export class HotZoneItem extends MySprite { ...@@ -2071,13 +2076,16 @@ export class HotZoneItem extends MySprite {
this.arrow.update(); this.arrow.update();
this.arrowTop.x = rect.x + rect.width / 2; if (!this.isAnimaStyle) {
this.arrowTop.y = rect.y; this.arrowTop.x = rect.x + rect.width / 2;
this.arrowTop.update(); 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.x = rect.x + rect.width;
this.arrowRight.update(); this.arrowRight.y = rect.y + rect.height / 2;
this.arrowRight.update();
}
} }
drawFrame() { drawFrame() {
...@@ -2200,10 +2208,155 @@ export class HotZoneLabel extends Label { ...@@ -2200,10 +2208,155 @@ export class HotZoneLabel extends Label {
this.drawFrame(); 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 DragItem extends MySprite {
lineDashFlag = true;
item;
init() {
this.anchorX = 0.5;
this.anchorY = 0.5;
this.initCenterCircle();
}
setSize(w, h) {
this.anchorX = 0.5;
this.anchorY = 0.5;
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 = '#000000';
// rect.alpha = 0.1;
// this.addChild(rect);
}
initCenterCircle() {
const circle = new ShapeCircle(this.ctx);
circle.setRadius(10);
circle.fillColor = '#ffa568'
this.addChild(circle);
this.width = circle.width;
this.height = circle.height;
}
getPosition() {
return {x: this.x, y: this.y};
}
drawLine() {
if (!this.item) {
return;
}
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([4, 4]);
this.ctx.lineWidth = 1;
this.ctx.strokeStyle = '#ffa568';
this.ctx.beginPath();
this.ctx.moveTo( x + w / 2 , y + h / 2 );
this.ctx.lineTo(this.item.x, this.item.y);
// this.ctx.fill();
this.ctx.stroke();
this.ctx.restore();
}
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([4, 4]);
this.ctx.lineWidth = 2;
this.ctx.strokeStyle = '#ffa568';
// 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.drawLine();
// this.drawFrame();
// this.drawArrow();
}
}
}
export class EditorItem extends MySprite { export class EditorItem extends MySprite {
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<h5 style="margin-left: 2.5%;"> preview: </h5> <h5 style="margin-left: 2.5%;"> preview: </h5>
<div class="preview-box" #wrap> <div class="preview-box" [style.height]="isRotate ? '95vw' : '35vw'" #wrap>
<canvas id="canvas" #canvas></canvas> <canvas id="canvas" #canvas></canvas>
</div> </div>
...@@ -69,13 +69,36 @@ ...@@ -69,13 +69,36 @@
</div> </div>
<div *ngIf="customTypeGroupArr[it.gIdx].anima" align="center" style="margin-top: 5px"> <div *ngIf="customTypeGroupArr[it.gIdx].anima" align="center" style="margin-top: 5px">
<button nz-button (click)="setAnimaBtnClick(i)" > <!-- <button nz-button (click)="setAnimaBtnClick(i)" >
<i nz-icon nzType="tool" nzTheme="outline"></i> <i nz-icon nzType="tool" nzTheme="outline"></i>
配置龙骨动画 配置龙骨动画
</button> </button> -->
<app-upload-dragon-bone
[skeJsonData]="it.skeJsonData || {}"
[texJsonData]="it.texJsonData || {}"
[texPngData]="it.texPngData || {}"
[animType]="it.animType || 'dragonBone'"
(save)="saveAnim($event, it)">
</app-upload-dragon-bone>
</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> -->
<app-upload-dragon-bone
[skeJsonData]="it.skeJsonData || {}"
[texJsonData]="it.texJsonData || {}"
[texPngData]="it.texPngData || {}"
(save)="saveAnim($event, it)">
</app-upload-dragon-bone>
</div> </div>
<div *ngIf="customTypeGroupArr[it.gIdx].audio" style="display: flex;align-items: center; margin-top: 5px"> <div *ngIf="customTypeGroupArr[it.gIdx].audio" style="display: flex;align-items: center; margin-top: 5px">
<app-audio-recorder <app-audio-recorder
...@@ -85,8 +108,51 @@ ...@@ -85,8 +108,51 @@
></app-audio-recorder> ></app-audio-recorder>
</div> </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 *ngIf="customTypeGroupArr[it.gIdx]?.isShowPos" style="display: flex; align-items: center; justify-content: center; margin-top: 5px;">
x: <input type="text" nz-input [(ngModel)]="it.posX" style="width: 50px; margin-right: 15px;" (blur)="saveItemPos(it)">
y: <input type="text" nz-input [(ngModel)]="it.posY" style="width: 50px" (blur)="saveItemPos(it)">
</div>
<div *ngIf="customTypeGroupArr[it.gIdx]?.select" align="center" >
<nz-select [(ngModel)]="it.selectType" nzAllowClear nzPlaceHolder="Choose" style="width: 70%; margin-top: 5px;">
<nz-option *ngFor="let s of customTypeGroupArr[it.gIdx]?.select" [nzValue]="s.value" [nzLabel]="s.label">
</nz-option>
</nz-select>
</div>
<div *ngIf="customTypeGroupArr[it.gIdx]?.label" align="center" style="margin-top: 5px; display: flex; align-items: center; justify-content: center;">
<span style="width: 30%;">{{customTypeGroupArr[it.gIdx].label + ':'}}</span>
<input type="text" nz-input [(ngModel)]="it.labelText" (blur)="saveText(it)">
</div>
<!-- <div *ngIf="customTypeGroupArr[it.gIdx]?.mathLabel" align="center" style="margin-top: 5px; display: flex; align-items: center; justify-content: center;">
<span style="width: 30%;">{{customTypeGroupArr[it.gIdx].mathLabel + ':'}}</span>
<app-formula-input [(ngfModel)]="it.mathLabel" ></app-formula-input>
</div> -->
<div *ngIf="customTypeGroupArr[it.gIdx]?.isCopy" align="center" style="margin-top: 5px; display: flex; align-items: center; justify-content: center;">
<button nz-button (click)="copyItem(it)" >
<i nz-icon nzType="copy" nzTheme="outline"></i>
复制粘贴
</button>
</div>
</div> </div>
<!-- <div *ngIf="!customTypeGroupArr"> <!-- <div *ngIf="!customTypeGroupArr">
<div *ngIf="it.itemType == 'pic'"> <div *ngIf="it.itemType == 'pic'">
...@@ -177,6 +243,7 @@ ...@@ -177,6 +243,7 @@
<!--龙骨面板--> <!--龙骨面板-->
<!--
<nz-modal [(nzVisible)]="animaPanelVisible" nzTitle="配置资源文件" (nzAfterClose)="closeAfterPanel()" (nzOnCancel)="animaPanelCancel()" (nzOnOk)="animaPanelOk()" nzOkText="保存"> <nz-modal [(nzVisible)]="animaPanelVisible" nzTitle="配置资源文件" (nzAfterClose)="closeAfterPanel()" (nzOnCancel)="animaPanelCancel()" (nzOnOk)="animaPanelOk()" nzOkText="保存">
<div class="anima-upload-btn"> <div class="anima-upload-btn">
...@@ -222,6 +289,6 @@ ...@@ -222,6 +289,6 @@
提示:需包含以下动画: {{customTypeGroupArr[curDragonBoneGIdx].animaNames.toString()}} 提示:需包含以下动画: {{customTypeGroupArr[curDragonBoneGIdx].animaNames.toString()}}
</div> </div>
</nz-modal> </nz-modal> -->
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
border: 2px solid #ddd; border: 2px solid #ddd;
.preview-box { .preview-box {
margin: auto; margin: auto;
...@@ -90,12 +90,12 @@ h5 { ...@@ -90,12 +90,12 @@ h5 {
} }
//
//@font-face @font-face
//{ {
// font-family: 'BRLNSR_1'; font-family: 'ahronbd-1';
// src: url("/assets/font/BRLNSR_1.TTF") ; src: url("/assets/font/ahronbd-1.ttf") ;
//} }
......
...@@ -14,7 +14,7 @@ import { ...@@ -14,7 +14,7 @@ import {
} from '@angular/core'; } from '@angular/core';
import {Subject} from 'rxjs'; import {Subject} from 'rxjs';
import {debounceTime} from 'rxjs/operators'; import {debounceTime} from 'rxjs/operators';
import {EditorItem, HotZoneImg, HotZoneItem, HotZoneLabel, Label, MySprite, removeItemFromArr} from './Unit'; import {DragItem, EditorItem, HotZoneImg, HotZoneItem, HotZoneLabel, Label, MySprite, removeItemFromArr, ShapeRect, ShapeRectNew} from './Unit';
import TWEEN from '@tweenjs/tween.js'; import TWEEN from '@tweenjs/tween.js';
import {getMinScale} from '../../play/Unit'; import {getMinScale} from '../../play/Unit';
import {tar} from 'compressing'; import {tar} from 'compressing';
...@@ -49,13 +49,17 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -49,13 +49,17 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
@Input() @Input()
customTypeGroupArr; // [{name:string, rect:boolean, pic:boolean, text:boolean, audio:boolean, anima:boolean, animaNames:['name1', ..]}, ...] customTypeGroupArr; // [{name:string, rect:boolean, pic:boolean, text:boolean, audio:boolean, anima:boolean, animaNames:['name1', ..]}, ...]
@Input() @Input()
hotZoneFontObj; // hotZoneFontObj;
@Input() @Input()
isCopyData = false; isCopyData = false;
@Input()
isRotate = false;
hotZoneFontObj;
// hotZoneFontObj = { // hotZoneFontObj = {
// size: 50, // size: 50,
// name: 'BRLNSR_1', // name: 'ahronbd-1',
// color: '#8f3758' // color: '#8f3758'
// } // }
@Input() @Input()
...@@ -99,7 +103,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -99,7 +103,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
changeSizeFlag = false; changeSizeFlag = false;
changeTopSizeFlag = false; changeTopSizeFlag = false;
changeRightSizeFlag = false; changeRightSizeFlag = false;
animaPanelVisible = false; // animaPanelVisible = false;
uploadUrl; uploadUrl;
uploadData; uploadData;
...@@ -115,7 +119,22 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -115,7 +119,22 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
isTexJsonLoading = false; isTexJsonLoading = false;
isTexPngLoading = false; isTexPngLoading = false;
isAnimaSmall = false;
savePropertyArr = [
'id',
'gIdx',
'selectType',
'labelText',
'posX',
'posY',
'mathLabel',
'skeJsonData',
'texJsonData',
'texPngData',
'animType',
]
constructor(private nzMessageService: NzMessageService, private appRef: ApplicationRef, private changeDetectorRef: ChangeDetectorRef) { constructor(private nzMessageService: NzMessageService, private appRef: ApplicationRef, private changeDetectorRef: ChangeDetectorRef) {
...@@ -141,8 +160,11 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -141,8 +160,11 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
this.init(); this.init();
} }
onResize(event) { onResize(event) {
this.winResizeEventStream.next(); // this.winResizeEventStream.next();
} }
...@@ -151,7 +173,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -151,7 +173,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
this.initListener(); this.initListener();
// this.init(); this.init();
this.update(); this.update();
this.refresh(); this.refresh();
...@@ -171,7 +193,9 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -171,7 +193,9 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
onBackgroundUploadSuccess(e) { onBackgroundUploadSuccess(e) {
console.log('e: ', e); console.log('e: ', e);
this.bgItem.url = e.url; this.bgItem.url = e.url;
this.refreshBackground();
this.init();
// this.refreshBackground();
} }
onItemImgUploadSuccess(e, item) { onItemImgUploadSuccess(e, item) {
...@@ -206,11 +230,23 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -206,11 +230,23 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
const rate = Math.min(rate1, rate2); const rate = Math.min(rate1, rate2);
bg.setScaleXY(rate); bg.setScaleXY(rate);
bg.x = this.canvasWidth / 2; bg.x = this.canvasWidth / 2;
bg.y = this.canvasHeight / 2; bg.y = this.canvasHeight / 2;
bg.removeChildren();
const bgBorder = new ShapeRectNew(this.ctx);
bgBorder.setSize(bg.width, bg.height, 0);
bgBorder.fillColor = '#ff0000';
bgBorder.fill = false;
bgBorder.stroke = true;
bgBorder.x = -bg.width / 2;
bgBorder.y = -bg.height / 2;
bgBorder.lineWidth = 0.5;
bg.addChild(bgBorder);
if (callBack) { if (callBack) {
callBack(); callBack();
} }
...@@ -223,14 +259,19 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -223,14 +259,19 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
} }
addBtnClick() { addBtnClick(data=null) {
// this.imgArr.push({}); // this.imgArr.push({});
// this.hotZoneArr.push({}); // this.hotZoneArr.push({});
const item = this.getHotZoneItem(); const item = this.getHotZoneItem(data);
this.hotZoneArr.push(item); this.hotZoneArr.push(item);
this.refreshItem(item);
if (this.customTypeGroupArr) {
this.refreshCustomItem(item);
} else {
this.refreshItem(item);
}
this.refreshHotZoneId(); this.refreshHotZoneId();
...@@ -241,6 +282,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -241,6 +282,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
const item = this.hotZoneArr.splice(index, 1)[0]; const item = this.hotZoneArr.splice(index, 1)[0];
removeItemFromArr(this.renderArr, item.pic); removeItemFromArr(this.renderArr, item.pic);
removeItemFromArr(this.renderArr, item.textLabel); removeItemFromArr(this.renderArr, item.textLabel);
removeItemFromArr(this.renderArr, item.drag);
this.refreshHotZoneId(); this.refreshHotZoneId();
...@@ -289,7 +331,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -289,7 +331,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
getHotZoneItem(saveData = null) { getHotZoneItem(saveData = null) {
const itemW = 200; const itemW = 200;
const itemH = 200; const itemH = 200;
const item = new HotZoneItem(this.ctx); const item = new HotZoneItem(this.ctx);
...@@ -304,7 +345,9 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -304,7 +345,9 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
item.itemType = this.getDefaultItemType(); item.itemType = this.getDefaultItemType();
item.gIdx = '0'; item.gIdx = '0';
item['id'] = new Date().getTime().toString();
item['id'] = this.createItemId() // new Date().getTime().toString();
item['data'] = saveData;
console.log('item.x: ', item.x); console.log('item.x: ', item.x);
...@@ -318,9 +361,20 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -318,9 +361,20 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
item.gIdx = saveData.gIdx; item.gIdx = saveData.gIdx;
item['id'] = saveData.id; item['id'] = saveData.id;
item['skeJsonData'] = saveData.skeJsonData; // item['skeJsonData'] = saveData.skeJsonData;
item['texJsonData'] = saveData.texJsonData; // item['texJsonData'] = saveData.texJsonData;
item['texPngData'] = saveData.texPngData; // item['texPngData'] = saveData.texPngData;
item['actionData_' + item.gIdx] = saveData['actionData_' + item.gIdx];
this.savePropertyArr.forEach((key) => {
if (saveData[key]) {
item[key] = saveData[key];
}
})
} }
console.log('item.x:~~ ', item.x); console.log('item.x:~~ ', item.x);
...@@ -328,19 +382,124 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -328,19 +382,124 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
item.showLineDash(); item.showLineDash();
// const pic = new HotZoneImg(this.ctx); // const pic = new HotZoneImg(this.ctx);
this.setItemPic(item, saveData);
this.setItemLabel(item, saveData);
this.setItemAnima(item, saveData);
this.setItemDrag(item, saveData);
return item;
}
setItemPic(item, saveData) {
console.log('in setItemPic ', saveData);
const pic = new EditorItem(this.ctx); const pic = new EditorItem(this.ctx);
pic.visible = false; pic.visible = false;
item['pic'] = pic; item['pic'] = pic;
if (saveData && saveData.pic_url) { if (saveData) {
this.loadHotZonePic(pic, saveData.pic_url, saveData.imgScale);
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);
}
} }
pic.x = item.x; pic.x = item.x;
pic.y = item.y; pic.y = item.y;
this.renderArr.push(pic); this.renderArr.push(pic);
}
setItemDrag(item, saveData) {
console.log('in setItemDrag ', saveData);
const dragItem = new DragItem(this.ctx);
dragItem.init();
dragItem.item = item;
item['drag'] = dragItem;
dragItem.visible = false;
dragItem.x = item.x;
dragItem.y = item.y;
this.renderArr.push(dragItem);
if (saveData) {
if (saveData.dragDot) {
dragItem.x = saveData.dragDot.x / saveData.mapScale * this.mapScale;
dragItem.y = saveData.dragDot.y / saveData.mapScale * this.mapScale;
}
}
// console.log('item.itemType: ', item.itemType);
// let w = item.width;
// let h = item.height;
// if (saveData) {
// switch (saveData.itemType) {
// case 'rect':
// w = saveData.rect.width;
// h = saveData.rect.height;
// break;
// case 'pic':
// w = saveData.imgSizeW * saveData.imgScale;
// h = saveData.imgSizeH * saveData.imgScale;;
// break;
// case 'text':
// w = saveData.rect.width;
// h = saveData.rect.height;
// break;
// }
// }
// dragItem.setSize(w, h);
}
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('item.x:~~~~~~ ', item.x); // console.log('saveData: ', saveData);
console.log('item.:~~~~~~ ', item); // 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); const textLabel = new HotZoneLabel(this.ctx);
if (this.hotZoneFontObj) { if (this.hotZoneFontObj) {
...@@ -353,15 +512,31 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -353,15 +512,31 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
// textLabel.setOutline(); // textLabel.setOutline();
item['textLabel'] = textLabel; item['textLabel'] = textLabel;
textLabel.setScaleXY(this.mapScale); textLabel.setScaleXY(this.mapScale);
if (saveData && saveData.text && this.hotZoneFontObj) { if (saveData) {
textLabel.text = saveData.text;
if (saveData.text && this.hotZoneFontObj) {
textLabel.text = saveData.text
}
this.setActionFont(textLabel, saveData['actionData_' + item.gIdx]);
textLabel.refreshSize(); textLabel.refreshSize();
} }
textLabel.x = item.x; textLabel.x = item.x;
textLabel.y = item.y; textLabel.y = item.y;
this.renderArr.push(textLabel); this.renderArr.push(textLabel);
}
return item; 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];
}
}
} }
getDefaultItemType() { getDefaultItemType() {
...@@ -438,23 +613,27 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -438,23 +613,27 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
this.refreshHotZoneId(); this.refreshHotZoneId();
this.refresh(); this.refresh();
} }
radioChange(e, item) { // radioChange(e, item) {
item.itemType = e; // item.itemType = e;
this.refreshItem(item); // this.refreshItem(item);
this.refresh(); // this.refresh();
// console.log(' in radioChange e: ', e); // // console.log(' in radioChange e: ', e);
} // }
customRadioChange(e, item) { customRadioChange(e, item) {
console.log('in customRadioChange', e); console.log('in customRadioChange', e);
item.gIdx = e; item.gIdx = -1;
this.refreshCustomItem(item); setTimeout(() => {
item.gIdx = e;
this.refresh(); this.refreshCustomItem(item);
this.refresh();
}, 1);
// const curGroup = this.customTypeGroupArr[e]; // const curGroup = this.customTypeGroupArr[e];
} }
...@@ -467,22 +646,70 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -467,22 +646,70 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
} }
if (group.text) { if (group.text) {
item.textLabel.visible = true; this.showItemLabel(item);
item.itemType = 'text';
} }
if (group.rect) { if (group.rect) {
item.visible = true; this.showItemRect(item, !group.isFixed);
item.itemType = 'rect';
} }
if (group.pic && !group.anima) { if (group.pic && !group.anima) {
item.pic.visible = true; this.showItemPic(item);
item.itemType = 'pic'; }
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.drag.visible = group.drag;
item.setAnimaStyle(group.animaSmall)
}
showItemDrag(item) {
item.drag.visible = true;
// item.dragBody.visible = true;
// item.itemType = 'pic';
// this.showArrowTop(item)
}
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) { hideHotZoneItem(item) {
...@@ -511,9 +738,13 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -511,9 +738,13 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
init() { init() {
console.log('init'); console.log('init');
// if (this.isInit) {
// return;
// }
// this.isInit = true;
this.initData(); this.initData();
this.initCtx(); this.initCtx();
this.initItem(); this.initItem();
} }
...@@ -526,8 +757,8 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -526,8 +757,8 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
this.bgItem = {}; this.bgItem = {};
} else { } else {
this.refreshBackground(() => { this.refreshBackground(() => {
if (!this.hotZoneItemArr) { if (!this.hotZoneItemArr) {
this.hotZoneItemArr = []; this.hotZoneItemArr = [];
} else { } else {
...@@ -592,7 +823,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -592,7 +823,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
} }
console.log('item: ', item); console.log('1 item: ', item);
this.hotZoneArr.push(item); this.hotZoneArr.push(item);
} }
...@@ -606,6 +837,8 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -606,6 +837,8 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
initData() { initData() {
console.log(' in initData')
this.canvasWidth = this.wrap.nativeElement.clientWidth; this.canvasWidth = this.wrap.nativeElement.clientWidth;
this.canvasHeight = this.wrap.nativeElement.clientHeight; this.canvasHeight = this.wrap.nativeElement.clientHeight;
this.mapScale = this.canvasWidth / this.canvasBaseW; this.mapScale = this.canvasWidth / this.canvasBaseW;
...@@ -627,9 +860,27 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -627,9 +860,27 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
this.oldPos = {x: this.mx, y: this.my}; this.oldPos = {x: this.mx, y: this.my};
// 先检测拖拽点
for (let i = this.hotZoneArr.length - 1; i >= 0; i--) { for (let i = this.hotZoneArr.length - 1; i >= 0; i--) {
const item = this.hotZoneArr[i]; const item = this.hotZoneArr[i];
if (item && item.drag && item.drag.visible) {
if (this.checkClickTarget(item.drag)) {
this.clickedDragPoint(item.drag);
return;
}
}
}
for (let i = this.hotZoneArr.length - 1; i >= 0; i--) {
const item = this.hotZoneArr[i];
console.log('mapDown item: ', item); console.log('mapDown item: ', item);
let callback; let callback;
let target; let target;
...@@ -678,6 +929,9 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -678,6 +929,9 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
const addY = this.my - this.oldPos.y; const addY = this.my - this.oldPos.y;
this.curItem.x += addX; this.curItem.x += addX;
this.curItem.y += addY; this.curItem.y += addY;
this.curItem.posX = this.curItem.x;
this.curItem.posY = this.curItem.y;
} }
this.oldPos = {x: this.mx, y: this.my}; this.oldPos = {x: this.mx, y: this.my};
...@@ -686,7 +940,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -686,7 +940,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
} }
mapUp(event) { mapUp(event=null) {
this.curItem = null; this.curItem = null;
this.changeSizeFlag = false; this.changeSizeFlag = false;
this.changeTopSizeFlag = false; this.changeTopSizeFlag = false;
...@@ -785,10 +1039,13 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -785,10 +1039,13 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
changeCurItem(item) { changeCurItem(item) {
console.log(' in changeCurItem', item)
this.hideAllLineDash(); this.hideAllLineDash();
this.curItem = item; this.curItem = item;
this.curItem.showLineDash(); this.curItem.showLineDash();
} }
hideAllLineDash() { hideAllLineDash() {
...@@ -811,9 +1068,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -811,9 +1068,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
// 清除画布内容 // 清除画布内容
this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight); 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++) { // for (let i = 0; i < this.imgArr.length; i++) {
// const picItem = this.imgArr[i].picItem; // const picItem = this.imgArr[i].picItem;
...@@ -822,10 +1077,18 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -822,10 +1077,18 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
// } // }
// } // }
for (let i = 0; i < this.renderArr.length; i++) {
this.renderArr[i].update(this);
}
this.updateArr(this.hotZoneArr); this.updateArr(this.hotZoneArr);
this.updatePos(); this.updatePos();
TWEEN.update(); TWEEN.update();
} }
...@@ -846,11 +1109,11 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -846,11 +1109,11 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
initListener() { initListener() {
this.winResizeEventStream // this.winResizeEventStream
.pipe(debounceTime(500)) // .pipe(debounceTime(500))
.subscribe(data => { // .subscribe(data => {
this.renderAfterResize(); // this.renderAfterResize();
}); // });
if (this.IsPC()) { if (this.IsPC()) {
...@@ -933,7 +1196,9 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -933,7 +1196,9 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
checkClickTarget(target) { checkClickTarget(target) {
if (!target || !target.visible) {
return;
}
const rect = target.getBoundingBox(); const rect = target.getBoundingBox();
if (this.checkPointInRect(this.mx, this.my, rect)) { if (this.checkPointInRect(this.mx, this.my, rect)) {
return true; return true;
...@@ -990,13 +1255,28 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -990,13 +1255,28 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
itemType: hotZoneArr[i].itemType, itemType: hotZoneArr[i].itemType,
fontScale: hotZoneArr[i].textLabel ? hotZoneArr[i].textLabel.scaleX : 1, fontScale: hotZoneArr[i].textLabel ? hotZoneArr[i].textLabel.scaleX : 1,
imgScale: hotZoneArr[i].pic ? hotZoneArr[i].pic.scaleX : 1, imgScale: hotZoneArr[i].pic ? hotZoneArr[i].pic.scaleX : 1,
imgSizeW: hotZoneArr[i].pic ? hotZoneArr[i].pic.width : 0,
imgSizeH: hotZoneArr[i].pic ? hotZoneArr[i].pic.height : 0,
mapScale: this.mapScale, mapScale: this.mapScale,
skeJsonData: hotZoneArr[i].skeJsonData, // skeJsonData: hotZoneArr[i].skeJsonData,
texJsonData: hotZoneArr[i].texJsonData, // texJsonData: hotZoneArr[i].texJsonData,
texPngData: hotZoneArr[i].texPngData, // texPngData: hotZoneArr[i].texPngData,
gIdx: hotZoneArr[i].gIdx dragDot: hotZoneArr[i].drag.getPosition(),
gIdx: hotZoneArr[i].gIdx,
}; };
console.log("~~hotZoneArr[i]: ", hotZoneArr[i]);
this.savePropertyArr.forEach((key) => {
if (hotZoneArr[i][key]) {
hotZoneItem[key] = hotZoneArr[i][key];
}
})
hotZoneItem['actionData_' + hotZoneItem.gIdx] = hotZoneArr[i]['actionData_' + hotZoneArr[i].gIdx]
if (this.hotZoneFontObj) { if (this.hotZoneFontObj) {
hotZoneItem['fontSize'] = this.hotZoneFontObj.size; hotZoneItem['fontSize'] = this.hotZoneFontObj.size;
hotZoneItem['fontName'] = this.hotZoneFontObj.name; hotZoneItem['fontName'] = this.hotZoneFontObj.name;
...@@ -1006,6 +1286,12 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -1006,6 +1286,12 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
if (hotZoneArr[i].itemType == 'pic') { if (hotZoneArr[i].itemType == 'pic') {
hotZoneItem['rect'] = hotZoneArr[i].pic.getBoundingBox(); 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 { } else {
hotZoneItem['rect'] = hotZoneArr[i].getBoundingBox(); hotZoneItem['rect'] = hotZoneArr[i].getBoundingBox();
} }
...@@ -1030,100 +1316,271 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -1030,100 +1316,271 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
} }
} }
saveItemPos(item) {
console.log('item.posX: ', item.posX)
console.log('item.posY: ', item.posY)
item.x = Number(item.posX || 0)
item.y = Number(item.posY || 0)
this.changeCurItem(item);
setAnimaBtnClick(index) {
this.curDragonBoneIndex = index;
this.curDragonBoneGIdx = Number(this.hotZoneArr[index].gIdx);
const {skeJsonData, texJsonData, texPngData} = this.hotZoneArr[index]; this.curItem.x = item.posX || 0;
this.curItem.y = item.posY || 0;
this.mapUp();
this.skeJsonData = skeJsonData || {}; }
this.texJsonData = texJsonData || {};
this.texPngData = texPngData || {};
this.animaPanelVisible = true; onSaveCustomAction(e, item) {
const data = e;
item['actionData_' + item.gIdx] = data;
this.refresh(); 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() {
animaPanelCancel() {
this.animaPanelVisible = false;
this.refresh();
} }
animaPanelOk() { // setAnimaBtnClick(index) {
this.setItemDragonBoneData(this.hotZoneArr[this.curDragonBoneIndex]); // console.log('aaaa')
console.log('this.hotZoneArr: ', this.hotZoneArr); // this.isAnimaSmall = false;
this.animaPanelVisible = false;
this.refresh();
}
setItemDragonBoneData(item) { // this.setCurDragonBone(index);
item['skeJsonData'] = this.skeJsonData;
item['texJsonData'] = this.texJsonData;
item['texPngData'] = this.texPngData;
}
skeJsonHandleChange(e) { // // this.curDragonBoneIndex = index;
console.log('e: ', e); // // this.curDragonBoneGIdx = Number(this.hotZoneArr[index].gIdx);
switch (e.type) {
case 'start':
this.isSkeJsonLoading = true;
break;
case 'success': // // const {skeJsonData, texJsonData, texPngData} = this.hotZoneArr[index];
this.skeJsonData['url'] = e.file.response.url;
this.skeJsonData['name'] = e.file.name;
this.nzMessageService.success('上传成功');
this.isSkeJsonLoading = false;
break;
case 'progress': // // this.skeJsonData = skeJsonData || {};
break; // // 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;
}
}
} }
} }
texJsonHandleChange(e) { // animaPanelCancel() {
console.log('e: ', e); // this.animaPanelVisible = false;
switch (e.type) { // this.refresh();
case 'start': // }
this.isTexJsonLoading = true;
break;
case 'success': // animaPanelOk() {
this.texJsonData['url'] = e.file.response.url;
this.texJsonData['name'] = e.file.name;
this.nzMessageService.success('上传成功');
this.isTexJsonLoading = false;
break;
case 'progress': // this.setItemDragonBoneData(this.hotZoneArr[this.curDragonBoneIndex]);
break; // 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;
// }
// }
copyItem(it) {
const {hotZoneItemArr} = this.getSendData();
let itemData;
hotZoneItemArr.forEach((data) => {
if (data.id == it.id) {
itemData = data;
}
})
let curBgRect;
if (this.bg) {
curBgRect = this.bg.getBoundingBox();
} else {
curBgRect = {x: 0, y: 0, width: this.canvasWidth, height: this.canvasHeight};
} }
}
texPngHandleChange(e) { let oldBgRect = this.bgItem.rect;
console.log('e: ', e); if (!oldBgRect) {
switch (e.type) { oldBgRect = curBgRect;
case 'start': }
this.isTexPngLoading = true;
break;
case 'success': const rate = curBgRect.width / oldBgRect.width;
this.texPngData['url'] = e.file.response.url;
this.texPngData['name'] = e.file.name;
this.nzMessageService.success('上传成功');
this.isTexPngLoading = false;
break;
case 'progress': console.log('rate: ', rate);
break;
const data = itemData
data.rect.x *= rate;
data.rect.y *= rate;
data.rect.width *= rate;
data.rect.height *= rate;
data.rect.x += curBgRect.x;
data.rect.y += curBgRect.y;
const item = this.getHotZoneItem(data);
item.audio_url = data.audio_url;
item.pic_url = data.pic_url;
item.text = data.text;
item.itemType = data.itemType;
this.hotZoneArr.push(item);
if (this.customTypeGroupArr) {
this.refreshCustomItem(item);
} else {
this.refreshItem(item);
} }
this.refreshHotZoneId();
item['id'] = this.createItemId();
}
createItemId() {
return new Date().getTime().toString();
} }
copyHotZoneData() { copyHotZoneData() {
...@@ -1301,30 +1758,50 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -1301,30 +1758,50 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
} }
} }
private loadHotZonePic(pic: HotZoneImg, url, scale = null) { clickedDragPoint(item) {
this.curItem = item;
}
private loadHotZonePic(pic: HotZoneImg, url, saveData = null) {
let baseLen; let baseLen;
if (this.hotZoneImgSize) { if (this.hotZoneImgSize) {
baseLen = this.hotZoneImgSize * this.mapScale; baseLen = this.hotZoneImgSize * this.mapScale;
} }
let scale;
pic.load(url).then(() => { pic.load(url).then(() => {
if (!scale) { if (!saveData) {
if (baseLen) { if (baseLen) {
scale = getMinScale(pic, baseLen); scale = getMinScale(pic, baseLen);
} else { } else {
scale = this.bg.scaleX; scale = this.bg.scaleX;
} }
} } else {
scale = getMinScale(pic, saveData.rect.width);
}
pic.setScaleXY(scale); pic.setScaleXY(scale);
}); });
} }
closeAfterPanel() {
this.refresh();
saveAnim(e, item) {
console.log(" in saveAnim e:", e);
item.skeJsonData = e.skeJsonData;
item.texJsonData = e.texJsonData;
item.texPngData = e.texPngData;
item.animType = e.animType;
} }
// closeAfterPanel() {
// this.refresh();
// }
/** /**
* 刷新 渲染页面 * 刷新 渲染页面
*/ */
......
...@@ -8,11 +8,20 @@ ...@@ -8,11 +8,20 @@
<!--配置龙骨面板--> <!--配置龙骨面板-->
<nz-modal [(nzVisible)]="animaPanelVisible" (nzAfterClose)="closePanel()" nzTitle="配置资源文件" <nz-modal [(nzVisible)]="animaPanelVisible" (nzAfterOpen)="openPanel()" (nzAfterClose)="closePanel()" nzTitle="配置资源文件"
(nzOnCancel)="animaPanelCancel()" (nzOnOk)="animaPanelOk()" nzOkText="保存"> (nzOnCancel)="animaPanelCancel()" (nzOnOk)="animaPanelOk()" nzOkText="保存">
<nz-radio-group [ngModel]="animType" (ngModelChange)="animRadioChange($event)" style="display: flex; align-items: center; justify-content: center; flex-wrap: wrap;">
<div style="display: flex; ">
<label nz-radio nzValue="dragonBone">龙骨</label>
<label nz-radio nzValue="spine">spine</label>
</div>
</nz-radio-group>
<div class="anima-upload-btn"> <div class="anima-upload-btn">
<span style="margin-right: 10px">上传 ske_json 文件: </span> <span *ngIf="animType == 'dragonBone'" style="margin-right: 10px">上传 ske_json 文件: </span>
<span *ngIf="animType == 'spine'" style="margin-right: 10px">上传 json 文件: </span>
<nz-upload [nzShowUploadList]="false" nzAccept="application/json" [nzAction]="uploadUrl" [nzData]="uploadData" <nz-upload [nzShowUploadList]="false" nzAccept="application/json" [nzAction]="uploadUrl" [nzData]="uploadData"
(nzChange)="skeJsonHandleChange($event)"> (nzChange)="skeJsonHandleChange($event)">
<button nz-button><i nz-icon nzType="upload"></i><span>Upload</span></button> <button nz-button><i nz-icon nzType="upload"></i><span>Upload</span></button>
...@@ -22,8 +31,9 @@ ...@@ -22,8 +31,9 @@
</div> </div>
<div class="anima-upload-btn"> <div class="anima-upload-btn">
<span style="margin-right: 10px">上传 tex_json 文件: </span> <span *ngIf="animType == 'dragonBone'" style="margin-right: 10px">上传 tex_json 文件: </span>
<nz-upload [nzShowUploadList]="false" nzAccept="application/json" [nzAction]="uploadUrl" [nzData]="uploadData" <span *ngIf="animType == 'spine'" style="margin-right: 10px">上传 atlas 文件: </span>
<nz-upload [nzShowUploadList]="false" [nzAccept]="animType == 'dragonBone' ? '.json' : '.atlas'" [nzAction]="uploadUrl" [nzData]="uploadData"
(nzChange)="texJsonHandleChange($event)"> (nzChange)="texJsonHandleChange($event)">
<button nz-button><i nz-icon nzType="upload"></i><span>Upload</span></button> <button nz-button><i nz-icon nzType="upload"></i><span>Upload</span></button>
</nz-upload> </nz-upload>
...@@ -32,7 +42,8 @@ ...@@ -32,7 +42,8 @@
</div> </div>
<div class="anima-upload-btn"> <div class="anima-upload-btn">
<span style="margin-right: 10px">上传 tex_png 文件: </span> <span *ngIf="animType == 'dragonBone'" style="margin-right: 10px">上传 tex_png 文件: </span>
<span *ngIf="animType == 'spine'" style="margin-right: 10px">上传 png 文件: </span>
<nz-upload [nzShowUploadList]="false" nzAccept="image/*" [nzAction]="uploadUrl" [nzData]="uploadData" <nz-upload [nzShowUploadList]="false" nzAccept="image/*" [nzAction]="uploadUrl" [nzData]="uploadData"
(nzChange)="texPngHandleChange($event)"> (nzChange)="texPngHandleChange($event)">
<button nz-button><i nz-icon nzType="upload"></i><span>Upload</span></button> <button nz-button><i nz-icon nzType="upload"></i><span>Upload</span></button>
......
...@@ -11,7 +11,7 @@ export class UploadDragonBoneComponent implements OnDestroy, OnChanges { ...@@ -11,7 +11,7 @@ export class UploadDragonBoneComponent implements OnDestroy, OnChanges {
uploading = false; uploading = false;
progress = 0; progress = 0;
@Input() @Input()
btnName = '配置龙骨动画'; btnName = '配置骨骼动画';
@Input() @Input()
animaNames = []; animaNames = [];
...@@ -21,32 +21,16 @@ export class UploadDragonBoneComponent implements OnDestroy, OnChanges { ...@@ -21,32 +21,16 @@ export class UploadDragonBoneComponent implements OnDestroy, OnChanges {
texJsonData = {}; texJsonData = {};
@Input() @Input()
texPngData = {}; texPngData = {};
@Input()
animType;
@Output() @Output()
save = new EventEmitter(); save = new EventEmitter();
@Output() @Output()
refreshEmitter = new EventEmitter(); refreshEmitter = new EventEmitter();
// @Input()
// picUrl;
// @Input()
// canDelete = false;
// @Output()
// imageUploaded = new EventEmitter();
// @Output()
// imageUploadFailure = new EventEmitter();
// @Output()
// delete = new EventEmitter();
// @Input()
// picItem = null;
// @Input()
// iconSize = 2;
// @Input()
// TIP = 'Click here to upload image';
// @Input()
// disableUpload = false;
uploadUrl; uploadUrl;
uploadData; uploadData;
...@@ -57,6 +41,11 @@ export class UploadDragonBoneComponent implements OnDestroy, OnChanges { ...@@ -57,6 +41,11 @@ export class UploadDragonBoneComponent implements OnDestroy, OnChanges {
isTexJsonLoading = false; isTexJsonLoading = false;
isTexPngLoading = false; isTexPngLoading = false;
oldSkeJsonData;
oldTexJsonData;
oldTexPngData;
oldAnimType;
constructor(private appRef: ApplicationRef, private nzMessageService: NzMessageService) { constructor(private appRef: ApplicationRef, private nzMessageService: NzMessageService) {
this.uploadUrl = (<any> window).courseware.uploadUrl(); this.uploadUrl = (<any> window).courseware.uploadUrl();
...@@ -77,12 +66,28 @@ export class UploadDragonBoneComponent implements OnDestroy, OnChanges { ...@@ -77,12 +66,28 @@ export class UploadDragonBoneComponent implements OnDestroy, OnChanges {
this.refresh(); this.refresh();
} }
openPanel() {
this.oldSkeJsonData = JSON.parse( JSON.stringify(this.skeJsonData) );
this.oldTexJsonData = JSON.parse( JSON.stringify(this.texJsonData));
this.oldTexPngData = JSON.parse( JSON.stringify(this.texPngData));
this.oldAnimType = this.animType;
}
animaPanelCancel() { animaPanelCancel() {
console.log("in animaPanelCancel");
this.skeJsonData = this.oldSkeJsonData
this.texJsonData = this.oldTexJsonData
this.texPngData = this.oldTexPngData
this.animType = this.oldAnimType
this.animaPanelVisible = false; this.animaPanelVisible = false;
this.refresh(); this.refresh();
} }
animaPanelOk() { animaPanelOk() {
console.log("in animaPanelOk");
this.sendItemDragonBoneData(); this.sendItemDragonBoneData();
this.animaPanelVisible = false; this.animaPanelVisible = false;
this.refresh(); this.refresh();
...@@ -93,6 +98,7 @@ export class UploadDragonBoneComponent implements OnDestroy, OnChanges { ...@@ -93,6 +98,7 @@ export class UploadDragonBoneComponent implements OnDestroy, OnChanges {
data['skeJsonData'] = this.skeJsonData; data['skeJsonData'] = this.skeJsonData;
data['texJsonData'] = this.texJsonData; data['texJsonData'] = this.texJsonData;
data['texPngData'] = this.texPngData; data['texPngData'] = this.texPngData;
data['animType'] = this.animType;
this.save.emit(data); this.save.emit(data);
} }
...@@ -105,14 +111,8 @@ export class UploadDragonBoneComponent implements OnDestroy, OnChanges { ...@@ -105,14 +111,8 @@ export class UploadDragonBoneComponent implements OnDestroy, OnChanges {
break; break;
case 'success': case 'success':
console.log('e.file.response.url',e.file.response.url); this.skeJsonData['url'] = e.file.response.url;
this.skeJsonData = { this.skeJsonData['name'] = e.file.name;
'url':e.file.response.url,
'name': e.file.name
};
console.log('json',this.skeJsonData);
// this.skeJsonData['name'] = e.file.name;
this.nzMessageService.success('上传成功'); this.nzMessageService.success('上传成功');
this.isSkeJsonLoading = false; this.isSkeJsonLoading = false;
break; break;
...@@ -124,20 +124,14 @@ export class UploadDragonBoneComponent implements OnDestroy, OnChanges { ...@@ -124,20 +124,14 @@ export class UploadDragonBoneComponent implements OnDestroy, OnChanges {
texJsonHandleChange(e) { texJsonHandleChange(e) {
console.log('e: ', e); console.log('e: ', e);
console.log('this',this);
switch (e.type) { switch (e.type) {
case 'start': case 'start':
this.isTexJsonLoading = true; this.isTexJsonLoading = true;
break; break;
case 'success': case 'success':
this.texJsonData = { this.texJsonData['url'] = e.file.response.url;
'url':e.file.response.url, this.texJsonData['name'] = e.file.name;
'name': e.file.name
};
// this.texJsonData['url'] = e.file.response.url;
// this.texJsonData['name'] = e.file.name;
this.nzMessageService.success('上传成功'); this.nzMessageService.success('上传成功');
this.isTexJsonLoading = false; this.isTexJsonLoading = false;
break; break;
...@@ -155,13 +149,8 @@ export class UploadDragonBoneComponent implements OnDestroy, OnChanges { ...@@ -155,13 +149,8 @@ export class UploadDragonBoneComponent implements OnDestroy, OnChanges {
break; break;
case 'success': case 'success':
this.texPngData['url'] = e.file.response.url;
this.texPngData = { this.texPngData['name'] = e.file.name;
'url':e.file.response.url,
'name': e.file.name
};
// this.texPngData['url'] = e.file.response.url;
// this.texPngData['name'] = e.file.name;
this.nzMessageService.success('上传成功'); this.nzMessageService.success('上传成功');
this.isTexPngLoading = false; this.isTexPngLoading = false;
break; break;
...@@ -172,6 +161,11 @@ export class UploadDragonBoneComponent implements OnDestroy, OnChanges { ...@@ -172,6 +161,11 @@ export class UploadDragonBoneComponent implements OnDestroy, OnChanges {
} }
animRadioChange(e) {
console.log(" in animRadioChange: ", e);
this.animType = e;
}
/** /**
* 刷新 渲染页面 * 刷新 渲染页面
...@@ -184,7 +178,6 @@ export class UploadDragonBoneComponent implements OnDestroy, OnChanges { ...@@ -184,7 +178,6 @@ export class UploadDragonBoneComponent implements OnDestroy, OnChanges {
}, 1); }, 1);
} }
closePanel() { closePanel() {
console.log(' in closePanel '); console.log(' in closePanel ');
this.refresh(); this.refresh();
......
...@@ -15,6 +15,7 @@ ...@@ -15,6 +15,7 @@
<span style="height: 30px; font-size: 18px;">选项骨骼动画:</span> <span style="height: 30px; font-size: 18px;">选项骨骼动画:</span>
<app-upload-dragon-bone [btnName]="[['配置骨骼动画']]" [animaNames]="[[['normal']]]" <app-upload-dragon-bone [btnName]="[['配置骨骼动画']]" [animaNames]="[[['normal']]]"
[skeJsonData]=page.pageDragonBone.skeJsonData [texJsonData]=page.pageDragonBone.texJsonData [skeJsonData]=page.pageDragonBone.skeJsonData [texJsonData]=page.pageDragonBone.texJsonData
[animType]="page.pageDragonBone.animType || 'dragonBone'"
[texPngData]=page.pageDragonBone.texPngData (save)="savePageDragonBone($event, page.pageDragonBone)" [texPngData]=page.pageDragonBone.texPngData (save)="savePageDragonBone($event, page.pageDragonBone)"
(refreshEmitter)="refresh()"> (refreshEmitter)="refresh()">
</app-upload-dragon-bone> </app-upload-dragon-bone>
......
...@@ -159,12 +159,14 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -159,12 +159,14 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
group.skeJsonData = e.skeJsonData; group.skeJsonData = e.skeJsonData;
group.texJsonData = e.texJsonData; group.texJsonData = e.texJsonData;
group.texPngData = e.texPngData; group.texPngData = e.texPngData;
group.animType = e.animType;
this.save(); this.save();
} }
savePageDragonBone(e, group) { savePageDragonBone(e, group) {
group.skeJsonData = e.skeJsonData; group.skeJsonData = e.skeJsonData;
group.texJsonData = e.texJsonData; group.texJsonData = e.texJsonData;
group.texPngData = e.texPngData; group.texPngData = e.texPngData;
group.animType = e.animType;
this.save(); this.save();
} }
......
This source diff could not be displayed because it is too large. You can view the blob instead.
...@@ -31,19 +31,22 @@ ...@@ -31,19 +31,22 @@
}, },
{ {
"__id__": 14 "__id__": 14
},
{
"__id__": 17
} }
], ],
"_active": true, "_active": true,
"_components": [ "_components": [
{ {
"__id__": 17 "__id__": 20
}, },
{ {
"__id__": 18 "__id__": 21
} }
], ],
"_prefab": { "_prefab": {
"__id__": 19 "__id__": 22
}, },
"_opacity": 255, "_opacity": 255,
"_color": { "_color": {
...@@ -312,13 +315,13 @@ ...@@ -312,13 +315,13 @@
}, },
{ {
"__type__": "cc.Node", "__type__": "cc.Node",
"_name": "$sprImage", "_name": "$spine",
"_objFlags": 0, "_objFlags": 0,
"_parent": { "_parent": {
"__id__": 1 "__id__": 1
}, },
"_children": [], "_children": [],
"_active": false, "_active": true,
"_components": [ "_components": [
{ {
"__id__": 9 "__id__": 9
...@@ -335,6 +338,121 @@ ...@@ -335,6 +338,121 @@
"b": 255, "b": 255,
"a": 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": [
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__": "sp.Skeleton",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 8
},
"_enabled": true,
"_materials": [
{
"__uuid__": "7afd064b-113f-480e-b793-8817d19f63c3"
}
],
"paused": false,
"defaultSkin": "",
"defaultAnimation": "",
"_preCacheMode": -1,
"_cacheMode": 0,
"loop": true,
"premultipliedAlpha": true,
"timeScale": 1,
"_accTime": 0,
"_playCount": 0,
"_frameCache": null,
"_curFrame": null,
"_skeletonCache": null,
"_animationName": "",
"_animationQueue": [],
"_headAniInfo": null,
"_playTimes": 0,
"_isAniComplete": true,
"_N$skeletonData": null,
"_N$_defaultCacheMode": 0,
"_N$debugSlots": false,
"_N$debugBones": false,
"_N$debugMesh": false,
"_N$useTint": false,
"_N$enableBatch": false,
"_id": ""
},
{
"__type__": "cc.PrefabInfo",
"root": {
"__id__": 1
},
"asset": {
"__uuid__": "85a50052-bdb8-4fa7-8b04-ee33e303f16f"
},
"fileId": "d1HgpAgDdDKY9l6qCBdKKl",
"sync": false
},
{
"__type__": "cc.Node",
"_name": "$sprImage",
"_objFlags": 0,
"_parent": {
"__id__": 1
},
"_children": [],
"_active": false,
"_components": [
{
"__id__": 12
}
],
"_prefab": {
"__id__": 13
},
"_opacity": 255,
"_color": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_contentSize": { "_contentSize": {
"__type__": "cc.Size", "__type__": "cc.Size",
"width": 477, "width": 477,
...@@ -379,7 +497,7 @@ ...@@ -379,7 +497,7 @@
"_name": "", "_name": "",
"_objFlags": 0, "_objFlags": 0,
"node": { "node": {
"__id__": 8 "__id__": 11
}, },
"_enabled": true, "_enabled": true,
"_materials": [ "_materials": [
...@@ -426,11 +544,11 @@ ...@@ -426,11 +544,11 @@
"_active": false, "_active": false,
"_components": [ "_components": [
{ {
"__id__": 12 "__id__": 15
} }
], ],
"_prefab": { "_prefab": {
"__id__": 13 "__id__": 16
}, },
"_opacity": 255, "_opacity": 255,
"_color": { "_color": {
...@@ -484,7 +602,7 @@ ...@@ -484,7 +602,7 @@
"_name": "", "_name": "",
"_objFlags": 0, "_objFlags": 0,
"node": { "node": {
"__id__": 11 "__id__": 14
}, },
"_enabled": true, "_enabled": true,
"_fontFamily": "Arial", "_fontFamily": "Arial",
...@@ -524,11 +642,11 @@ ...@@ -524,11 +642,11 @@
"_active": false, "_active": false,
"_components": [ "_components": [
{ {
"__id__": 15 "__id__": 18
} }
], ],
"_prefab": { "_prefab": {
"__id__": 16 "__id__": 19
}, },
"_opacity": 255, "_opacity": 255,
"_color": { "_color": {
...@@ -582,7 +700,7 @@ ...@@ -582,7 +700,7 @@
"_name": "", "_name": "",
"_objFlags": 0, "_objFlags": 0,
"node": { "node": {
"__id__": 14 "__id__": 17
}, },
"_enabled": true, "_enabled": true,
"_fontFamily": "Arial", "_fontFamily": "Arial",
...@@ -622,6 +740,9 @@ ...@@ -622,6 +740,9 @@
"dragonBone": { "dragonBone": {
"__id__": 6 "__id__": 6
}, },
"skeleton": {
"__id__": 9
},
"_id": "" "_id": ""
}, },
{ {
......
...@@ -121,24 +121,30 @@ ...@@ -121,24 +121,30 @@
}, },
{ {
"__id__": 71 "__id__": 71
},
{
"__id__": 73
},
{
"__id__": 75
} }
], ],
"_active": true, "_active": true,
"_components": [ "_components": [
{ {
"__id__": 73 "__id__": 77
}, },
{ {
"__id__": 74 "__id__": 78
}, },
{ {
"__id__": 75 "__id__": 79
}, },
{ {
"__id__": 76 "__id__": 80
}, },
{ {
"__id__": 77 "__id__": 81
} }
], ],
"_prefab": null, "_prefab": null,
...@@ -3669,6 +3675,194 @@ ...@@ -3669,6 +3675,194 @@
"_atlas": null, "_atlas": null,
"_id": "9bhXN0utBB7rbbxZ+pfdnE" "_id": "9bhXN0utBB7rbbxZ+pfdnE"
}, },
{
"__type__": "cc.Node",
"_name": "left_arrow",
"_objFlags": 0,
"_parent": {
"__id__": 2
},
"_children": [],
"_active": true,
"_components": [
{
"__id__": 74
}
],
"_prefab": null,
"_opacity": 255,
"_color": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_contentSize": {
"__type__": "cc.Size",
"width": 124,
"height": 128
},
"_anchorPoint": {
"__type__": "cc.Vec2",
"x": 0.5,
"y": 0.5
},
"_trs": {
"__type__": "TypedArray",
"ctor": "Float64Array",
"array": [
-573.506,
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": "cf9ky3xqVDGqllJioK4q4P"
},
{
"__type__": "cc.Sprite",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 73
},
"_enabled": true,
"_materials": [
{
"__uuid__": "eca5d2f2-8ef6-41c2-bbe6-f9c79d09c432"
}
],
"_srcBlendFactor": 770,
"_dstBlendFactor": 771,
"_spriteFrame": {
"__uuid__": "4054aeea-5ce1-42d0-a5ab-906386cf9b1b"
},
"_type": 0,
"_sizeMode": 1,
"_fillType": 0,
"_fillCenter": {
"__type__": "cc.Vec2",
"x": 0,
"y": 0
},
"_fillStart": 0,
"_fillRange": 0,
"_isTrimmedMode": true,
"_atlas": null,
"_id": "9eq6yiZi5PP4QvnNwFq2fM"
},
{
"__type__": "cc.Node",
"_name": "right_arrow",
"_objFlags": 0,
"_parent": {
"__id__": 2
},
"_children": [],
"_active": true,
"_components": [
{
"__id__": 76
}
],
"_prefab": null,
"_opacity": 255,
"_color": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_contentSize": {
"__type__": "cc.Size",
"width": 122,
"height": 130
},
"_anchorPoint": {
"__type__": "cc.Vec2",
"x": 0.5,
"y": 0.5
},
"_trs": {
"__type__": "TypedArray",
"ctor": "Float64Array",
"array": [
573.506,
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": "19XRFgN2dGJb2bHJQA/y4u"
},
{
"__type__": "cc.Sprite",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 75
},
"_enabled": true,
"_materials": [
{
"__uuid__": "eca5d2f2-8ef6-41c2-bbe6-f9c79d09c432"
}
],
"_srcBlendFactor": 770,
"_dstBlendFactor": 771,
"_spriteFrame": {
"__uuid__": "2efdbe43-b4fd-4b2f-b281-290b0013cf19"
},
"_type": 0,
"_sizeMode": 1,
"_fillType": 0,
"_fillCenter": {
"__type__": "cc.Vec2",
"x": 0,
"y": 0
},
"_fillStart": 0,
"_fillRange": 0,
"_isTrimmedMode": true,
"_atlas": null,
"_id": "06n40lTnFFMIVZfYeCXMJv"
},
{ {
"__type__": "cc.Canvas", "__type__": "cc.Canvas",
"_name": "", "_name": "",
...@@ -3757,7 +3951,7 @@ ...@@ -3757,7 +3951,7 @@
"__id__": 71 "__id__": 71
}, },
"capture": { "capture": {
"__id__": 77 "__id__": 81
}, },
"_id": "76pKAVQpBDVby2iIHB3LLz" "_id": "76pKAVQpBDVby2iIHB3LLz"
}, },
......
const saveKey = "DataKey_Cocos_FT14"; const saveKey = "DataKey_Cocos_FT14";
const BaseUI = require('BaseUI'); const BaseUI = require('BaseUI');
import { DefaultData } from '../script/DefaultData'; import { DefaultData } from '../script/DefaultData';
import { onHomeworkFinish } from "../script/utils"; import { jelly, onHomeworkFinish } from "../script/utils";
const POS = { const POS = {
LeftPage: { x: -239, y: -5 }, LeftPage: { x: -239, y: -5 },
...@@ -85,7 +85,9 @@ cc.Class({ ...@@ -85,7 +85,9 @@ cc.Class({
getDefaultData() { getDefaultData() {
let data = DefaultData; let data = DefaultData;
return data; // return data;
return {"haveCover":false,"coverType":"Image","coverImage":"","coverAudio":"","coverText":"","coverDragonBone":{"skeJsonData":{"url":""},"texJsonData":{"url":""},"texPngData":{"url":""}},"titleAudio":"","titleText":"","titleTextColor":"A","pageList":[{"pageType":"Image","pageAudio":"http://staging-teach.cdn.ireadabc.com/cc5b1a8730bc275ecac85185d5ce2c5b.mp3","pageText":"","pageImage":"","textColor":"A","pageDragonBone":{"skeJsonData":{"url":"http://staging-teach.cdn.ireadabc.com/679fed26daa464819d553de6331b3552.json","name":"alien-pro.json"},"texJsonData":{"url":"http://staging-teach.cdn.ireadabc.com/65d8214c6b5c5d0496e17adb0408276a.atlas","name":"alien-pro.atlas"},"texPngData":{"url":"http://staging-teach.cdn.ireadabc.com/a319b372899239325b90bb4ec07b4970.png","name":"alien-pro.png"},"animType":"spine"}},{"pageType":"Image","pageAudio":"http://staging-teach.cdn.ireadabc.com/fd877ad376fdffdb0dfc62122065a78f.mp3","pageText":"","pageImage":"","textColor":"A","pageDragonBone":{"skeJsonData":{"url":"http://staging-teach.cdn.ireadabc.com/d1f859d3fba84bd03565e543c986fb28.json","name":"6_4_ske.json"},"texJsonData":{"url":"http://staging-teach.cdn.ireadabc.com/70f96e1cc7f013e27ed1952c503fb750.json","name":"6_4_tex.json"},"texPngData":{"url":"http://staging-teach.cdn.ireadabc.com/b06f9b90018a6eb0175a01e355b9ced6.png","name":"6_4_tex.png"},"animType":"dragonBone"}},{"pageType":"Image","pageAudio":"http://staging-teach.cdn.ireadabc.com/dff6748c93f6bf3de8cb7105fa9ba5de.mp3","pageText":"","pageImage":"","textColor":"A","pageDragonBone":{"skeJsonData":{"url":"http://staging-teach.cdn.ireadabc.com/a278a56fe77dfade7366829e9c65c815.json","name":"6_3_ske.json"},"texJsonData":{"url":"http://staging-teach.cdn.ireadabc.com/96680527a570cec4d7c9818c91ec434a.json","name":"6_3_tex.json"},"texPngData":{"url":"http://staging-teach.cdn.ireadabc.com/5c441810b0a5bc73248c50d8c32b4899.png","name":"6_3_tex.png"},"animType":"dragonBone"}}]}
}, },
preloadItem() { preloadItem() {
...@@ -203,11 +205,33 @@ cc.Class({ ...@@ -203,11 +205,33 @@ cc.Class({
startGame() { startGame() {
// this.playAudioEntrer(); // this.playAudioEntrer();
this.initPageUI(); this.initPageUI();
this.initArrowBtn();
this.initPages().then(() => { this.initPages().then(() => {
this.updateBtnStatus(); this.updateBtnStatus();
this.autoPlay(); this.autoPlay();
}); });
}, },
initArrowBtn() {
const lastBtn = this.lastBtn = cc.find("Canvas/left_arrow");
const nextBtn = this.nextBtn = cc.find("Canvas/right_arrow");
lastBtn.on("touchstart", () => {
const isSuccess = this.onTouchPanelLeft();
isSuccess && jelly(lastBtn);
})
nextBtn.on("touchstart", () => {
const isSuccess = this.onTouchPanelRight();
isSuccess && jelly(nextBtn);
})
},
checkShowArrowBtn() {
setTimeout(() => {
this.lastBtn.active = !this.nodeDict.btnLast.children[1].active;
this.nextBtn.active = !this.nodeDict.btnNext.children[1].active;
}, 220);
},
autoPlay() { autoPlay() {
//自动开始播放动画,及触发动画效果 //自动开始播放动画,及触发动画效果
this.inited = false; this.inited = false;
...@@ -318,28 +342,30 @@ cc.Class({ ...@@ -318,28 +342,30 @@ cc.Class({
onTouchPanelLeft() { onTouchPanelLeft() {
if (this.isTruning) { if (this.isTruning) {
return; return false;
} }
if (GameData.isPlaying) { if (GameData.isPlaying) {
return; return false;
} }
this.onTurnLast(); this.onTurnLast();
this._timeoutIds.push(setTimeout(() => { this._timeoutIds.push(setTimeout(() => {
this.autoPlay(); this.autoPlay();
}, 1000)); }, 1000));
return true;
}, },
onTouchPanelRight() { onTouchPanelRight() {
if (this.isTruning) { if (this.isTruning) {
return; return false;
} }
if (GameData.isPlaying) { if (GameData.isPlaying) {
return; return false;
} }
this.onTurnNext(); this.onTurnNext();
this._timeoutIds.push(setTimeout(() => { this._timeoutIds.push(setTimeout(() => {
this.autoPlay(); this.autoPlay();
}, 1000)); }, 1000));
return true;
}, },
...@@ -399,6 +425,7 @@ cc.Class({ ...@@ -399,6 +425,7 @@ cc.Class({
} else { } else {
this.nodeDict.btnNext.children[1].active = false; this.nodeDict.btnNext.children[1].active = false;
} }
this.checkShowArrowBtn();
}, },
checkCover() { checkCover() {
......
const { loadSpine } = require('./utils');
const colorMap = { const colorMap = {
"A": ["#1f356b", "#ffffff", "#bd2c37"], "A": ["#1f356b", "#ffffff", "#bd2c37"],
"B": ["#fff8d0", "#000000", "#ffb93b"] "B": ["#fff8d0", "#000000", "#ffb93b"]
...@@ -7,6 +9,7 @@ cc.Class({ ...@@ -7,6 +9,7 @@ cc.Class({
properties: { properties: {
dragonBone: dragonBones.ArmatureDisplay, dragonBone: dragonBones.ArmatureDisplay,
skeleton: sp.Skeleton
}, },
onLoad() { onLoad() {
...@@ -24,19 +27,42 @@ cc.Class({ ...@@ -24,19 +27,42 @@ cc.Class({
this.isCover = isCover; this.isCover = isCover;
this.labText.string = ''; this.labText.string = '';
this.labTextTitle.string = ''; this.labTextTitle.string = '';
this.loadSpine().then(() => {
resolve(''); if (this.data.pageDragonBone.animType == 'spine') {
}) this.loadSpineAnim().then(() => {
resolve('');
})
} else {
this.loadDragonBoneAnim().then(() => {
resolve('');
})
}
}); });
}, },
playSpine() { playSpine() {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
this.dragonBone.playAnimation(this.animationName, 1);
this.dragonBone.on(dragonBones.EventObject.COMPLETE, (evt) => { if (this.data.pageDragonBone.animType == 'spine') {
GameData.isPlaying = false; const skeleton = this.skeleton;
resolve(''); skeleton.setToSetupPose();
}); setTimeout(() => {
skeleton.setAnimation(0, this.animationName, false);
skeleton.setCompleteListener(() => {
GameData.isPlaying = false;
resolve('');
})
}, 1);
} else {
this.dragonBone.playAnimation(this.animationName, 1);
this.dragonBone.on(dragonBones.EventObject.COMPLETE, (evt) => {
GameData.isPlaying = false;
resolve('');
});
}
}); });
}, },
...@@ -64,7 +90,31 @@ cc.Class({ ...@@ -64,7 +90,31 @@ cc.Class({
this.setBgScale(); this.setBgScale();
}) })
}, },
loadSpine() {
loadSpineAnim() {
return new Promise((resolve, reject) => {
const tex = this.data.pageDragonBone.texPngData.url;
const atlas = this.data.pageDragonBone.texJsonData.url;
const ske = this.data.pageDragonBone.skeJsonData.url;
loadSpine(this.skeleton, this.data.pageDragonBone.texPngData.name, {tex, atlas, ske}).then(({width, height}) => {
this.skeleton.node.width = width;
this.skeleton.node.height = height;
resolve('');
this.animationName = this.skeleton.animationNames[0];
console.log('width: ', this.skeleton.node.width);
console.log('height~~~: ', this.skeleton.node.height);
console.log('this.skeleton.node: ', this.skeleton.node);
this.setSpineScale(this.skeleton.node, this.skeleton.node);
})
});
},
loadDragonBoneAnim() {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
var imageUrl = this.data.pageDragonBone.texPngData.url; var imageUrl = this.data.pageDragonBone.texPngData.url;
var skeUrl = this.data.pageDragonBone.skeJsonData.url; var skeUrl = this.data.pageDragonBone.skeJsonData.url;
...@@ -92,7 +142,10 @@ cc.Class({ ...@@ -92,7 +142,10 @@ cc.Class({
// this.dragonBone.premultipliedAlpha = true; // this.dragonBone.premultipliedAlpha = true;
// atlas.texture.setPremultiplyAlpha(true); // atlas.texture.setPremultiplyAlpha(true);
this.setSpineScale(data.canvas);
console.log('data.canvas:', data.canvas);
this.setSpineScale(data.canvas, this.dragonBone.node);
return resolve(''); return resolve('');
}); });
}); });
...@@ -113,7 +166,7 @@ cc.Class({ ...@@ -113,7 +166,7 @@ cc.Class({
} }
} }
}, },
setSpineScale(size) { setSpineScale(size, node) {
// return; // return;
if (!size) { if (!size) {
return; return;
...@@ -124,9 +177,9 @@ cc.Class({ ...@@ -124,9 +177,9 @@ cc.Class({
let designScale = bgWidth / bgHeight; let designScale = bgWidth / bgHeight;
let scale = size.width / size.height; let scale = size.width / size.height;
if (scale > designScale) { if (scale > designScale) {
this.dragonBone.node.scale = bgWidth / size.width; node.scale = bgWidth / size.width;
} else { } else {
this.dragonBone.node.scale = bgHeight / size.height; node.scale = bgHeight / size.height;
} }
} }
}, },
......
...@@ -197,6 +197,70 @@ async function rabbonFall(node) { ...@@ -197,6 +197,70 @@ async function rabbonFall(node) {
await asyncTweenBy(node, time, { x: offsetX, angle: offsetX * 60 / 200 }); await asyncTweenBy(node, time, { x: offsetX, angle: offsetX * 60 / 200 });
rabbonFall(node); rabbonFall(node);
} }
export function loadSpine(skeleton, picName, {tex, atlas, ske}) {
return new Promise((resolve, reject) => {
// cc.loader.load({ url: tex, type: 'png' }, (error, texture) => {
cc.assetManager.loadRemote(tex, (error, texture) => {
if (error) {
reject();
return;
}
// cc.loader.load({ url: atlas, type: 'txt' }, (error, atlasJson) => {
cc.assetManager.loadAny({ url: atlas }, (error, atlasJson) => {
if (error) {
reject();
return;
}
// cc.loader.load({ url: ske, type: 'txt' }, (error, dragonBonesJson) => {
cc.assetManager.loadAny({ url: ske }, (error, dragonBonesJson) => {
if (error) {
reject();
return;
}
var asset = new sp.SkeletonData();
asset._uuid = ske;
asset.skeletonJson = JSON.stringify( dragonBonesJson );
asset.atlasText = atlasJson;
asset.textures = [texture];
asset.textureNames = [picName];
console.log('picName: ', picName);
skeleton.skeletonData = asset;
const jsonObj = dragonBonesJson //JSON.parse( assets[1]);
const animationNameObj = jsonObj.animations;
let animationNames = [];
for (let name in animationNameObj) {
console.log('name~~: ', name);
animationNames.push(name);
}
console.log("skeleton.animation: ", skeleton.animation);
skeleton.animationNames = animationNames;
skeleton.loop = false;
console.log("jsonObj : ", jsonObj)
console.log("jsonObj['skeleton'] : ", jsonObj['skeleton'])
resolve(jsonObj['skeleton']);
});
});
});
});
}
export function onHomeworkFinish() { export function onHomeworkFinish() {
const middleLayer = cc.find('middleLayer'); const middleLayer = cc.find('middleLayer');
if (middleLayer) { if (middleLayer) {
......
{
"ver": "2.3.5",
"uuid": "eeaecb8d-8dd7-4e74-85b3-1cecfbdcafac",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": false,
"genMipmaps": false,
"packable": true,
"width": 124,
"height": 128,
"platformSettings": {},
"subMetas": {
"left_arrow": {
"ver": "1.0.4",
"uuid": "4054aeea-5ce1-42d0-a5ab-906386cf9b1b",
"rawTextureUuid": "eeaecb8d-8dd7-4e74-85b3-1cecfbdcafac",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0,
"offsetY": 0,
"trimX": 0,
"trimY": 0,
"width": 124,
"height": 128,
"rawWidth": 124,
"rawHeight": 128,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}
\ No newline at end of file
{
"ver": "2.3.5",
"uuid": "df459e67-251a-434b-b024-aa5389ad7425",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": false,
"genMipmaps": false,
"packable": true,
"width": 122,
"height": 130,
"platformSettings": {},
"subMetas": {
"right_arrow": {
"ver": "1.0.4",
"uuid": "2efdbe43-b4fd-4b2f-b281-290b0013cf19",
"rawTextureUuid": "df459e67-251a-434b-b024-aa5389ad7425",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0,
"offsetY": 0,
"trimX": 0,
"trimY": 0,
"width": 122,
"height": 130,
"rawWidth": 122,
"rawHeight": 130,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}
\ No newline at end of file
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