Commit 8092cd0a authored by Chen Jiping's avatar Chen Jiping

fix:修复动画展示,采用龙骨动画

parent 64764173
......@@ -14,7 +14,7 @@ import {Subject} from 'rxjs';
import {debounceTime} from 'rxjs/operators';
import {EditorItem, HotZoneImg, HotZoneItem, HotZoneLabel, Label, MySprite, removeItemFromArr} from './Unit';
import TWEEN from '@tweenjs/tween.js';
import {getMinScale} from "../../play/Unit";
import {getMinScale, ShapeRect} from "../../play/Unit";
import {tar} from "compressing";
......@@ -396,14 +396,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
} else {
this.refreshBackground(() => {
// if (!this.imgItemArr) {
// this.imgItemArr = [];
// } else {
// this.initImgArr();
// }
// console.log('aaaaa');
if (!this.hotZoneItemArr) {
this.hotZoneItemArr = [];
} else {
......@@ -411,6 +403,8 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
}
refreshBg();
});
}
......@@ -447,8 +441,8 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
data.rect.width *= rate;
data.rect.height *= rate;
data.rect.x += curBgRect.x;
data.rect.y += curBgRect.y;
//data.rect.x += curBgRect.x;
//data.rect.y += curBgRect.y;
// img['picItem'] = this.getPicItem(img, data);
// img['audio_url'] = arr[i].audio_url;
......@@ -517,9 +511,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
initData() {
this.canvasWidth = this.wrap.nativeElement.clientWidth;
this.canvasHeight = this.wrap.nativeElement.clientHeight;
this.mapScale = this.canvasWidth / this.canvasBaseW;
this.renderArr = [];
this.bg = null;
......@@ -528,6 +520,18 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
}
initCtx() {
let canvasWidth = this.wrap.nativeElement.clientWidth;
let canvasHeight = this.wrap.nativeElement.clientHeight;
this.canvasWidth = canvasWidth;
this.canvasHeight = canvasHeight;
console.log(canvasWidth, canvasHeight);
const sx = this.canvasWidth / this.canvasBaseW;
const sy = this.canvasHeight / this.canvasBaseH;
const s = Math.min(sx, sy);
this.mapScale = s;
this.ctx = this.canvas.nativeElement.getContext('2d');
this.canvas.nativeElement.width = this.canvasWidth;
this.canvas.nativeElement.height = this.canvasHeight;
......@@ -890,15 +894,16 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
fontColor: this.hotZoneFontObj.color,
fontScale: hotZoneArr[i].textLabel ? hotZoneArr[i].textLabel.scaleX : 1,
imgScale: hotZoneArr[i].pic ? hotZoneArr[i].pic.scaleX : 1,
mapScale: this.mapScale
mapScale: this.mapScale,
picX:hotZoneArr[i].pic ?hotZoneArr[i].pic.x : 0,
picY: hotZoneArr[i].pic ?hotZoneArr[i].pic.y : 0
};
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'].x = Math.round((hotZoneItem['rect'].x) * 100) / 100;
hotZoneItem['rect'].y = Math.round((hotZoneItem['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);
}
......
......@@ -59,27 +59,15 @@
<app-custom-hot-zone [bgItem]="item.bg" [hotZoneItemArr]="data.hotZoneItemArr"
(save)="saveData($event, i)"></app-custom-hot-zone>
<nz-form-item>
<nz-form-label [nzSpan]="6">序列帧动画</nz-form-label>
<nz-form-label [nzSpan]="6">动画</nz-form-label>
<nz-form-control [nzSpan]="6">
<button nz-button nzType="dashed" class="add-btn" id="add-btn"
(click)="addFrame(data, 'frames')">
<i nz-icon nzType="plus-circle" nzTheme="outline"></i>添加
<button nz-button nzType="dashed" (click)="setAnimaBtnClick(data)" nzSize="large" style="margin-top: 10px" >
<i nz-icon nzType="tool" nzTheme="outline"></i>
配置龙骨动画
</button>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-control [nzOffset]="2" [nzSpan]="18">
<div nz-col [nzSpan]="6" *ngFor="let frame of data.frames;let m = index">
<app-upload-image-with-preview style="width: 100%" [picUrl]="frame.picUrl"
(imageUploaded)="onImageUploadSuccess($event,frame, 'picUrl')">
</app-upload-image-with-preview>
<button style="margin: 10px;" nz-button nzType="danger"
(click)="delFrame(data, 'frames', m)">
<span>删除</span>
</button>
</div>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="6">备选答案</nz-form-label>
<nz-form-control [nzSpan]="6">
......@@ -135,4 +123,50 @@
</div>
</div>
</div>
<!--龙骨面板-->
<nz-modal [(nzVisible)]="animaPanelVisible" nzTitle="配置资源文件" (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>
</nz-modal>
</div>
\ No newline at end of file
import { Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, ApplicationRef, ChangeDetectorRef } from '@angular/core';
import { JsonPipe } from '@angular/common';
import { Answer, Frame, getDefaultExercises, getDefaultItem } from '../bean/ObjBean';
import {NzMessageService} from 'ng-zorro-antd';
@Component({
selector: 'app-form',
......@@ -14,10 +14,27 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
saveKey = "FT-01";
// 储存对象
item;
constructor(private appRef: ApplicationRef, private changeDetectorRef: ChangeDetectorRef) {
isShowPicPanel = false;
curGroup = null;
skeJsonData = {};
texJsonData = {};
texPngData = {};
animaPanelVisible = false;
isSkeJsonLoading = false;
isTexJsonLoading = false;
isTexPngLoading = false;
uploadUrl;
uploadData;
constructor(private appRef: ApplicationRef, private changeDetectorRef: ChangeDetectorRef,private nzMessageService: NzMessageService) {
this.uploadUrl = (<any> window).courseware.uploadUrl();
this.uploadData = (<any> window).courseware.uploadData();
window['air'].getUploadCallback = (url, data) => {
this.uploadUrl = url;
this.uploadData = data;
};
}
ngOnInit() {
......@@ -135,29 +152,112 @@ onAudioUploadSuccess(e, item, key) {
}
}
addFrame(exercises, key){
let frame = new Frame();
exercises[key] = [...exercises[key], frame];
saveData(e, i) {
console.log('savedata e:', e);
this.item.bg = e.bgItem;
this.item.exercisesArr[i].hotZoneItemArr = e.hotZoneItemArr;
this.save();
}
handleOk() {
this.isShowPicPanel = false;
}
delFrame(exercises, key, index) {
if (index !== -1) {
exercises[key].splice(index, 1);
exercises[key] = [...exercises[key]];
this.save();
}
handleCancel() {
this.isShowPicPanel = false;
}
saveData(e, i) {
console.log('savedata e:', e);
setAnimaBtnClick(group) {
this.item.bg = e.bgItem;
this.item.exercisesArr[i].hotZoneItemArr = e.hotZoneItemArr;
console.log(' in setAnimaBtnClick');
this.curGroup = group;
const {skeJsonData, texJsonData, texPngData} = group;
this.skeJsonData = skeJsonData || {};
this.texJsonData = texJsonData || {};
this.texPngData = texPngData || {};
this.animaPanelVisible = true;
this.refresh();
}
animaPanelCancel() {
this.animaPanelVisible = false;
}
animaPanelOk() {
this.animaPanelVisible = false;
this.setItemDragonBoneData(this.curGroup);
this.save();
}
setItemDragonBoneData(item) {
item['skeJsonData'] = this.skeJsonData;
item['texJsonData'] = this.texJsonData;
item['texPngData'] = this.texPngData;
}
skeJsonHandleChange(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) {
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) {
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;
}
}
}
\ No newline at end of file
This diff is collapsed.
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