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,6 +145,9 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -145,6 +145,9 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
refreshBackground(callBack = null) { refreshBackground(callBack = null) {
if (this.bgItem.picUrl) {
if (!this.bg) { if (!this.bg) {
this.bg = new MySprite(this.ctx); this.bg = new MySprite(this.ctx);
this.renderArr.push(this.bg); this.renderArr.push(this.bg);
...@@ -152,7 +155,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -152,7 +155,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
} }
const bg = this.bg; const bg = this.bg;
if (this.bgItem.picUrl) {
bg.load(this.bgItem.picUrl).then(() => { bg.load(this.bgItem.picUrl).then(() => {
const rate1 = this.canvasWidth / bg.width; const rate1 = this.canvasWidth / bg.width;
...@@ -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();
} }
......
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