Commit 532952f4 authored by Chen Jiping's avatar Chen Jiping

perf:每个练习题增加背景图片

parent 7bced400
...@@ -25,6 +25,8 @@ export class Exercises extends Obj{ ...@@ -25,6 +25,8 @@ export class Exercises extends Obj{
frames : Array<Frame> = []; frames : Array<Frame> = [];
hotZoneItemArr = []; hotZoneItemArr = [];
bg : Backgroud;
} }
export class Frame extends Obj{ export class Frame extends Obj{
...@@ -40,7 +42,7 @@ export class Title extends Obj{ ...@@ -40,7 +42,7 @@ export class Title extends Obj{
} }
export class Item{ export class Item{
bg : Backgroud;
title : Title; title : Title;
...@@ -52,7 +54,7 @@ export function getDefaultItem(){ ...@@ -52,7 +54,7 @@ export function getDefaultItem(){
const item = new Item(); const item = new Item();
item.bg = new Backgroud();
item.title = new Title(); item.title = new Title();
...@@ -65,6 +67,8 @@ export function getDefaultExercises(){ ...@@ -65,6 +67,8 @@ export function getDefaultExercises(){
const exercises = new Exercises(); const exercises = new Exercises();
exercises.bg = new Backgroud();
for(let i = 0; i < 3; ++ i){ for(let i = 0; i < 3; ++ i){
const answer = new Answer(); const answer = new Answer();
answer.isRight = '0'; answer.isRight = '0';
......
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
</div> </div>
<div nz-row nzType="flex" nzAlign="middle"> <div nz-row nzType="flex" nzAlign="middle">
<!--
<div nz-col nzSpan="5" nzOffset="1"> <div nz-col nzSpan="5" nzOffset="1">
<h5> add background: </h5> <h5> add background: </h5>
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
</app-upload-image-with-preview> </app-upload-image-with-preview>
</div> </div>
</div> </div>
-->
<div nz-col nzSpan="5" nzOffset="1" class="img-box" <div nz-col nzSpan="5" nzOffset="1" class="img-box"
*ngFor="let it of hotZoneArr; let i = index"> *ngFor="let it of hotZoneArr; let i = index">
......
...@@ -145,15 +145,17 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -145,15 +145,17 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
refreshBackground(callBack = null) { refreshBackground(callBack = null) {
if (!this.bg) {
this.bg = new MySprite(this.ctx);
this.renderArr.push(this.bg);
}
const bg = this.bg;
if (this.bgItem.picUrl) { if (this.bgItem.picUrl) {
if (!this.bg) {
this.bg = new MySprite(this.ctx);
this.renderArr.push(this.bg);
}
const bg = this.bg;
bg.load(this.bgItem.picUrl).then(() => { bg.load(this.bgItem.picUrl).then(() => {
const rate1 = this.canvasWidth / bg.width; const rate1 = this.canvasWidth / bg.width;
const rate2 = this.canvasHeight / bg.height; const rate2 = this.canvasHeight / bg.height;
...@@ -170,6 +172,11 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -170,6 +172,11 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
} }
}); });
} }
else{
if (callBack) {
callBack();
}
}
} }
...@@ -383,12 +390,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -383,12 +390,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
initItem() { initItem() {
//定时刷新背景图片
const refreshBg = () => {
setInterval(() => {
this.refreshBackground();
}, 2000);
}
if (!this.bgItem) { if (!this.bgItem) {
this.bgItem = {}; this.bgItem = {};
...@@ -401,8 +403,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -401,8 +403,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
this.initHotZoneArr(); this.initHotZoneArr();
} }
refreshBg();
}); });
} }
......
...@@ -25,6 +25,7 @@ ...@@ -25,6 +25,7 @@
</app-audio-recorder> </app-audio-recorder>
</nz-form-control> </nz-form-control>
</nz-form-item> </nz-form-item>
<!--
<nz-form-item> <nz-form-item>
<nz-form-label [nzSpan]="3">背景图片</nz-form-label> <nz-form-label [nzSpan]="3">背景图片</nz-form-label>
<nz-form-control [nzSpan]="6"> <nz-form-control [nzSpan]="6">
...@@ -33,6 +34,7 @@ ...@@ -33,6 +34,7 @@
</app-upload-image-with-preview> </app-upload-image-with-preview>
</nz-form-control> </nz-form-control>
</nz-form-item> </nz-form-item>
-->
</div> </div>
</div> </div>
</div> </div>
...@@ -56,7 +58,7 @@ ...@@ -56,7 +58,7 @@
<span>删除</span> <span>删除</span>
</button> </button>
</div> </div>
<app-custom-hot-zone [bgItem]="item.bg" [hotZoneItemArr]="data.hotZoneItemArr" <app-custom-hot-zone [bgItem]="data.bg" [hotZoneItemArr]="data.hotZoneItemArr"
(save)="saveData($event, i)"></app-custom-hot-zone> (save)="saveData($event, i)"></app-custom-hot-zone>
<nz-form-item> <nz-form-item>
<nz-form-label [nzSpan]="6">动画</nz-form-label> <nz-form-label [nzSpan]="6">动画</nz-form-label>
......
import { Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, ApplicationRef, ChangeDetectorRef } from '@angular/core'; import { Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, ApplicationRef, ChangeDetectorRef } from '@angular/core';
import { JsonPipe } from '@angular/common'; import { JsonPipe } from '@angular/common';
import { Answer, Frame, getDefaultExercises, getDefaultItem } from '../bean/ObjBean'; import { Answer, Backgroud, Frame, getDefaultExercises, getDefaultItem } from '../bean/ObjBean';
import {NzMessageService} from 'ng-zorro-antd'; import {NzMessageService} from 'ng-zorro-antd';
@Component({ @Component({
...@@ -64,6 +64,14 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -64,6 +64,14 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
init() { init() {
console.log(JSON.stringify(this.item)); console.log(JSON.stringify(this.item));
for(let i = 0; i < this.item.exercisesArr.length; ++ i ){
let exercises = this.item.exercisesArr[i];
if(!exercises.bg){
exercises.bg = new Backgroud();
}
}
} }
...@@ -176,7 +184,7 @@ onAudioUploadSuccess(e, item, key) { ...@@ -176,7 +184,7 @@ onAudioUploadSuccess(e, item, key) {
saveData(e, i) { saveData(e, i) {
console.log('savedata e:', e); console.log('savedata e:', e);
this.item.bg = e.bgItem; this.item.exercisesArr[i].bg = e.bgItem;
this.item.exercisesArr[i].hotZoneItemArr = e.hotZoneItemArr; this.item.exercisesArr[i].hotZoneItemArr = e.hotZoneItemArr;
this.save(); this.save();
} }
......
...@@ -80,7 +80,7 @@ cc.Class({ ...@@ -80,7 +80,7 @@ cc.Class({
getDefaultData() { getDefaultData() {
const dataJson = '{"exercisesArr":[{"answers":[{"isRight":"0","audioUrl":"http://staging-teach.cdn.ireadabc.com/afdd23cc154d515a3afff15ccc775502.mp3","picUrl":"http://staging-teach.cdn.ireadabc.com/10dab2d49188db958a6a6e6b3ab7b5f5.png"},{"isRight":"1","picUrl":"http://staging-teach.cdn.ireadabc.com/cb6a2f948c3febbb7881e6b6a7417811.png","audioUrl":"http://staging-teach.cdn.ireadabc.com/b29f241c5c90a7276bfc53252bb6ffa4.mp3"},{"isRight":"0","picUrl":"http://staging-teach.cdn.ireadabc.com/a886b150e8792d433ced3672f4df7dfb.jpg","audioUrl":"http://staging-teach.cdn.ireadabc.com/b44fa51172b19b555fda30717c773027.mp3"}],"frames":[{"picUrl":"http://staging-teach.cdn.ireadabc.com/824c94f5e363c351e24dde9325731ab7.png"},{"picUrl":"http://staging-teach.cdn.ireadabc.com/95638e0ab356b51f960e800e3fa5aacb.png"},{"picUrl":"http://staging-teach.cdn.ireadabc.com/3d330a49df81ae964a705048f8ea0e0d.png"},{"picUrl":"http://staging-teach.cdn.ireadabc.com/3023da8f58edfa36a0a9c34e68902ef7.png"}],"hotZoneItemArr":[{"index":0,"pic_url":"http://staging-teach.cdn.ireadabc.com/00254362880b14c443e533331db4e2bf.png","audio_url":"http://staging-teach.cdn.ireadabc.com/518441578f9d37076d87ef067c70a734.mp3","itemType":"pic","fontSize":50,"fontName":"BRLNSR_1","fontColor":"#8f3758","fontScale":0.9,"imgScale":0.4584450402144772,"mapScale":0.9,"picX":0,"picY":58.86499999999998,"rect":{"x":638.69,"y":55.73,"width":313.77,"height":313.77}}],"skeJsonData":{"url":"http://staging-teach.cdn.ireadabc.com/d74f4a1fff340bf4cf02101d5bfda7e8.json","name":"女孩_ske.json"},"texJsonData":{"url":"http://staging-teach.cdn.ireadabc.com/66d2f8e8c531a4a8583e5faf2cf35e41.json","name":"女孩_tex.json"},"texPngData":{"url":"http://staging-teach.cdn.ireadabc.com/546d11d5c1abbe2a0e442fe4816718b7.png","name":"女孩_tex.png"}},{"answers":[{"isRight":"0","audioUrl":"http://staging-teach.cdn.ireadabc.com/b62600fd1e72b54d1d1c3bc71b7361af.mp3","picUrl":"http://staging-teach.cdn.ireadabc.com/cb6dfd436c533f44e8e9fdd594458576.png"},{"isRight":"1","audioUrl":"http://staging-teach.cdn.ireadabc.com/cc089823e40579aaece0d31e118672ae.mp3","picUrl":"http://staging-teach.cdn.ireadabc.com/b2b296923e5fd09e77cd29fd3883f78e.png"},{"isRight":"0","picUrl":"http://staging-teach.cdn.ireadabc.com/3fed3a7bacc07dfb84de7196a50d39ab.png","audioUrl":"http://staging-teach.cdn.ireadabc.com/919b2c150b41b3306869ebe78ecb70b3.mp3"},{"picUrl":"http://staging-teach.cdn.ireadabc.com/9f9361601b4f2dbd60f037c6996a5af6.png","isRight":"0","audioUrl":"http://staging-teach.cdn.ireadabc.com/a252c069d04f8e04f91b2a1394072f30.mp3"},{"picUrl":"http://staging-teach.cdn.ireadabc.com/2f65d31e390318626fce1180bb09b2ea.png","isRight":"0","audioUrl":"http://staging-teach.cdn.ireadabc.com/8b5ecca5d4509e1b8a7e81e69d8db615.mp3"}],"frames":[{"picUrl":"http://staging-teach.cdn.ireadabc.com/25a82fd9d55b026a76d2caaeed754a02.png"},{"picUrl":"http://staging-teach.cdn.ireadabc.com/25a82fd9d55b026a76d2caaeed754a02.png"},{"picUrl":"http://staging-teach.cdn.ireadabc.com/3d8d02f661a45283aa4eef1b6faed704.png"},{"picUrl":"http://staging-teach.cdn.ireadabc.com/8c1833c5a38efea3394ad78a44cd8801.png"},{"picUrl":"http://staging-teach.cdn.ireadabc.com/3d8d02f661a45283aa4eef1b6faed704.png"}],"hotZoneItemArr":[{"index":0,"pic_url":"http://staging-teach.cdn.ireadabc.com/59a3efbfa3df99100e8810cbcddef107.png","audio_url":"http://staging-teach.cdn.ireadabc.com/71eb8fcc0895873363840db7bc0c5883.mp3","itemType":"pic","fontSize":50,"fontName":"BRLNSR_1","fontColor":"#8f3758","fontScale":0.9,"imgScale":0.9447513812154696,"mapScale":0.9,"picX":691.6899999999999,"picY":97.28000000000002,"rect":{"x":585.15,"y":144.49,"width":213.08,"height":213.08}}],"skeJsonData":{"url":"http://staging-teach.cdn.ireadabc.com/6db25cc732cb592dd26295aaefdd016a.json","name":"FT01测试_ske.json"},"texJsonData":{"url":"http://staging-teach.cdn.ireadabc.com/9223e48368163e5d2bd556aa869b4610.json","name":"FT01测试_tex.json"},"texPngData":{"url":"http://staging-teach.cdn.ireadabc.com/f7314ee89b8f27dc6b7cfcd6831ed728.png","name":"FT01测试_tex.png"}}],"bg":{"rect":{"x":0,"y":-153.75,"width":1152,"height":841.5},"picUrl":"http://staging-teach.cdn.ireadabc.com/3883964c48ea76d6a08386dfe1bf1204.jpg"},"title":{"val":"Find Body Part","audioUrl":"http://staging-teach.cdn.ireadabc.com/8f5559c935b390efdea299ad568d3bd9.mp3"}}'; const dataJson = '{"exercisesArr":[{"answers":[{"isRight":"0","audioUrl":"http://staging-teach.cdn.ireadabc.com/f95fd3997cdd67abd51a1ab45efd855d.mp3","picUrl":"http://staging-teach.cdn.ireadabc.com/10dab2d49188db958a6a6e6b3ab7b5f5.png"},{"isRight":"1","picUrl":"http://staging-teach.cdn.ireadabc.com/cb6a2f948c3febbb7881e6b6a7417811.png","audioUrl":"http://staging-teach.cdn.ireadabc.com/b44fa51172b19b555fda30717c773027.mp3"},{"isRight":"0","picUrl":"http://staging-teach.cdn.ireadabc.com/a886b150e8792d433ced3672f4df7dfb.jpg","audioUrl":"http://staging-teach.cdn.ireadabc.com/b62600fd1e72b54d1d1c3bc71b7361af.mp3"}],"frames":[{"picUrl":"http://staging-teach.cdn.ireadabc.com/824c94f5e363c351e24dde9325731ab7.png"},{"picUrl":"http://staging-teach.cdn.ireadabc.com/95638e0ab356b51f960e800e3fa5aacb.png"},{"picUrl":"http://staging-teach.cdn.ireadabc.com/3d330a49df81ae964a705048f8ea0e0d.png"},{"picUrl":"http://staging-teach.cdn.ireadabc.com/3023da8f58edfa36a0a9c34e68902ef7.png"}],"hotZoneItemArr":[{"index":0,"pic_url":"http://staging-teach.cdn.ireadabc.com/28c3a876b5d0bbbb43f1b118bbe40df6.png","audio_url":"http://staging-teach.cdn.ireadabc.com/afdd23cc154d515a3afff15ccc775502.mp3","itemType":"pic","fontSize":50,"fontName":"BRLNSR_1","fontColor":"#8f3758","fontScale":0.9,"imgScale":0.5089285714285714,"mapScale":0.9,"picX":0,"picY":168.00142857142856,"rect":{"x":779,"y":146.19,"width":200,"height":200}}],"skeJsonData":{"url":"http://staging-teach.cdn.ireadabc.com/d74f4a1fff340bf4cf02101d5bfda7e8.json","name":"女孩_ske.json"},"texJsonData":{"url":"http://staging-teach.cdn.ireadabc.com/66d2f8e8c531a4a8583e5faf2cf35e41.json","name":"女孩_tex.json"},"texPngData":{"url":"http://staging-teach.cdn.ireadabc.com/546d11d5c1abbe2a0e442fe4816718b7.png","name":"女孩_tex.png"},"bg":{"rect":{"x":0,"y":-78.18857142857144,"width":1152,"height":690.3771428571429},"picUrl":"http://staging-teach.cdn.ireadabc.com/c5b8cb01164ef0e5770de54080ea6cad.jpg"}},{"answers":[{"isRight":"0","audioUrl":"http://staging-teach.cdn.ireadabc.com/b62600fd1e72b54d1d1c3bc71b7361af.mp3","picUrl":"http://staging-teach.cdn.ireadabc.com/cb6dfd436c533f44e8e9fdd594458576.png"},{"isRight":"1","audioUrl":"http://staging-teach.cdn.ireadabc.com/8b5ecca5d4509e1b8a7e81e69d8db615.mp3","picUrl":"http://staging-teach.cdn.ireadabc.com/b2b296923e5fd09e77cd29fd3883f78e.png"},{"isRight":"0","picUrl":"http://staging-teach.cdn.ireadabc.com/3fed3a7bacc07dfb84de7196a50d39ab.png","audioUrl":"http://staging-teach.cdn.ireadabc.com/919b2c150b41b3306869ebe78ecb70b3.mp3"},{"picUrl":"http://staging-teach.cdn.ireadabc.com/9f9361601b4f2dbd60f037c6996a5af6.png","isRight":"0","audioUrl":"http://staging-teach.cdn.ireadabc.com/a252c069d04f8e04f91b2a1394072f30.mp3"},{"picUrl":"http://staging-teach.cdn.ireadabc.com/2f65d31e390318626fce1180bb09b2ea.png","isRight":"0","audioUrl":"http://staging-teach.cdn.ireadabc.com/b44fa51172b19b555fda30717c773027.mp3"}],"frames":[{"picUrl":"http://staging-teach.cdn.ireadabc.com/25a82fd9d55b026a76d2caaeed754a02.png"},{"picUrl":"http://staging-teach.cdn.ireadabc.com/25a82fd9d55b026a76d2caaeed754a02.png"},{"picUrl":"http://staging-teach.cdn.ireadabc.com/3d8d02f661a45283aa4eef1b6faed704.png"},{"picUrl":"http://staging-teach.cdn.ireadabc.com/8c1833c5a38efea3394ad78a44cd8801.png"},{"picUrl":"http://staging-teach.cdn.ireadabc.com/3d8d02f661a45283aa4eef1b6faed704.png"}],"hotZoneItemArr":[{"index":0,"pic_url":"http://staging-teach.cdn.ireadabc.com/28c3a876b5d0bbbb43f1b118bbe40df6.png","audio_url":"http://staging-teach.cdn.ireadabc.com/518441578f9d37076d87ef067c70a734.mp3","itemType":"pic","fontSize":50,"fontName":"BRLNSR_1","fontColor":"#8f3758","fontScale":0.9,"imgScale":0.5089285714285714,"mapScale":0.9,"picX":793,"picY":160,"rect":{"x":693,"y":117,"width":200,"height":200}}],"skeJsonData":{"url":"http://staging-teach.cdn.ireadabc.com/6db25cc732cb592dd26295aaefdd016a.json","name":"FT01测试_ske.json"},"texJsonData":{"url":"http://staging-teach.cdn.ireadabc.com/9223e48368163e5d2bd556aa869b4610.json","name":"FT01测试_tex.json"},"texPngData":{"url":"http://staging-teach.cdn.ireadabc.com/f7314ee89b8f27dc6b7cfcd6831ed728.png","name":"FT01测试_tex.png"},"bg":{"rect":{"x":0,"y":-57,"width":1152,"height":648},"picUrl":"http://staging-teach.cdn.ireadabc.com/0b6497174aed7ae05127d1eb8c29d94a.jpg"}}],"bg":{"rect":{"x":0,"y":-153.75,"width":1152,"height":841.5},"picUrl":"http://staging-teach.cdn.ireadabc.com/3883964c48ea76d6a08386dfe1bf1204.jpg"},"title":{"val":"Find Body Part","audioUrl":"http://staging-teach.cdn.ireadabc.com/ef597f87e534ab2c73f4f9ed34eb26fa.mp3"}}';
const data = JSON.parse(dataJson); const data = JSON.parse(dataJson);
return data; return data;
}, },
...@@ -96,13 +96,14 @@ cc.Class({ ...@@ -96,13 +96,14 @@ cc.Class({
addPreloadImage() { addPreloadImage() {
if (this.data.bg.picUrl) {
this._imageResList.push({ url: this.data.bg.picUrl });
}
for (let i = 0; i < this.data.exercisesArr.length; ++i) { for (let i = 0; i < this.data.exercisesArr.length; ++i) {
let exercises = this.data.exercisesArr[i]; let exercises = this.data.exercisesArr[i];
if (exercises.bg && exercises.bg.picUrl){
this._imageResList.push({ url: exercises.bg.picUrl });
}
//循环处理备选答案的图片 //循环处理备选答案的图片
let answers = exercises.answers; let answers = exercises.answers;
for (let j = 0; j < answers.length; ++j) { for (let j = 0; j < answers.length; ++j) {
...@@ -225,7 +226,6 @@ cc.Class({ ...@@ -225,7 +226,6 @@ cc.Class({
initView() { initView() {
this.initMaskLayer(); this.initMaskLayer();
this.initBg();
this.initTitle(); this.initTitle();
this.initBtn(); this.initBtn();
this.initExercise(); this.initExercise();
...@@ -263,13 +263,19 @@ cc.Class({ ...@@ -263,13 +263,19 @@ cc.Class({
bgNode.active = true; bgNode.active = true;
bgNode.opacity = 255; bgNode.opacity = 255;
//如果客户自定义背景图片,则进行替换 //如果客户自定义背景图片,则进行替换
if (this.data.bg.picUrl) { if (this._curExercise.bg.picUrl) {
let spr = bgNode.bg;
if(spr){
spr.removeFromParent();
}
const spr = bgNode.getComponent(cc.Sprite) spr = bgNode.getComponent(cc.Sprite)
cc.find('Canvas/decorate').active = false; cc.find('Canvas/decorate').active = false;
this.getSpriteFrimeByUrl(this.data.bg.picUrl, (sf) => { this.getSpriteFrimeByUrl(this._curExercise.bg.picUrl, (sf) => {
spr.spriteFrame = sf; spr.spriteFrame = sf;
bgNode.scaleX = this._frameSize.width / bgNode.width * this._cocosScale; bgNode.scaleX = this._frameSize.width / bgNode.width * this._cocosScale;
...@@ -516,7 +522,7 @@ cc.Class({ ...@@ -516,7 +522,7 @@ cc.Class({
bubbleSpr.node.parent = bubble_bg; bubbleSpr.node.parent = bubble_bg;
let rate = bubble_bg.width / this.data.bg.rect.width; let rate = bubble_bg.width / this._curExercise.bg.rect.width;
let rect = {}; let rect = {};
rect.x = hotZoneItem.rect.x * rate; rect.x = hotZoneItem.rect.x * rate;
...@@ -554,6 +560,8 @@ cc.Class({ ...@@ -554,6 +560,8 @@ cc.Class({
let answers = this._curExercise.answers; let answers = this._curExercise.answers;
this.initBg();
this.initCenterPart(); this.initCenterPart();
const circleArr = this.getCircleArr(answers); const circleArr = this.getCircleArr(answers);
......
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