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

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

parent 7bced400
......@@ -25,6 +25,8 @@ export class Exercises extends Obj{
frames : Array<Frame> = [];
hotZoneItemArr = [];
bg : Backgroud;
}
export class Frame extends Obj{
......@@ -40,7 +42,7 @@ export class Title extends Obj{
}
export class Item{
bg : Backgroud;
title : Title;
......@@ -52,7 +54,7 @@ export function getDefaultItem(){
const item = new Item();
item.bg = new Backgroud();
item.title = new Title();
......@@ -65,6 +67,8 @@ export function getDefaultExercises(){
const exercises = new Exercises();
exercises.bg = new Backgroud();
for(let i = 0; i < 3; ++ i){
const answer = new Answer();
answer.isRight = '0';
......
......@@ -7,7 +7,7 @@
</div>
<div nz-row nzType="flex" nzAlign="middle">
<!--
<div nz-col nzSpan="5" nzOffset="1">
<h5> add background: </h5>
......@@ -19,7 +19,7 @@
</app-upload-image-with-preview>
</div>
</div>
-->
<div nz-col nzSpan="5" nzOffset="1" class="img-box"
*ngFor="let it of hotZoneArr; let i = index">
......
......@@ -145,15 +145,17 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
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.bg) {
this.bg = new MySprite(this.ctx);
this.renderArr.push(this.bg);
}
const bg = this.bg;
bg.load(this.bgItem.picUrl).then(() => {
const rate1 = this.canvasWidth / bg.width;
const rate2 = this.canvasHeight / bg.height;
......@@ -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 {
initItem() {
//定时刷新背景图片
const refreshBg = () => {
setInterval(() => {
this.refreshBackground();
}, 2000);
}
if (!this.bgItem) {
this.bgItem = {};
......@@ -401,8 +403,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
this.initHotZoneArr();
}
refreshBg();
});
}
......
......@@ -25,6 +25,7 @@
</app-audio-recorder>
</nz-form-control>
</nz-form-item>
<!--
<nz-form-item>
<nz-form-label [nzSpan]="3">背景图片</nz-form-label>
<nz-form-control [nzSpan]="6">
......@@ -33,6 +34,7 @@
</app-upload-image-with-preview>
</nz-form-control>
</nz-form-item>
-->
</div>
</div>
</div>
......@@ -56,7 +58,7 @@
<span>删除</span>
</button>
</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>
<nz-form-item>
<nz-form-label [nzSpan]="6">动画</nz-form-label>
......
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 { Answer, Backgroud, Frame, getDefaultExercises, getDefaultItem } from '../bean/ObjBean';
import {NzMessageService} from 'ng-zorro-antd';
@Component({
......@@ -64,6 +64,14 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
init() {
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) {
saveData(e, i) {
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.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