Commit 0624b332 authored by 李维's avatar 李维

dev commit

parent d3aa849e
...@@ -116,14 +116,12 @@ export class MySprite extends Sprite { ...@@ -116,14 +116,12 @@ export class MySprite extends Sprite {
load(url, anchorX = 0.5, anchorY = 0.5) { load(url, anchorX = 0.5, anchorY = 0.5) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
const img = new Image(); const img = new Image();
img.onload = () => resolve(img); img.onload = () => resolve(img);
img.onerror = reject; img.onerror = reject;
img.src = url; img.src = url;
}).then(img => { }).then(img => {
this.init(img, anchorX, anchorY); this.init(img, anchorX, anchorY);
return img; return img;
}); });
......
<div class="p-image-children-editor"> <div class="p-image-children-editor">
<div style="float: left; width: 30%;border-right: 2px solid #ddd; border-bottom: 2px solid #ddd;">
<h5 style="margin-left: 2.5%;">预览:</h5>
<h5 style="margin-left: 2.5%;"> preview: </h5> <div class="preview-box" #wrap style="width: 200px; height: 300px;">
<canvas id="canvas" #canvas></canvas>
<div class="preview-box" #wrap> </div>
<canvas id="canvas" #canvas></canvas>
</div>
<div nz-row nzType="flex" nzAlign="middle">
<div nz-col nzSpan="5" nzOffset="1">
<h5> add background: </h5>
<h5 style="border-top: 2px solid #ddd;">背景图:</h5>
<div style="width: 200px;margin: auto;">
<div class="bg-box"> <div class="bg-box">
<app-upload-image-with-preview <app-upload-image-with-preview
[picUrl]="bgItem.url" [picUrl]="bgItem.url"
(imageUploaded)="onBackgroundUploadSuccess($event)"> (imageUploaded)="onBackgroundUploadSuccess($event)"
>
</app-upload-image-with-preview> </app-upload-image-with-preview>
</div> </div>
</div> </div>
</div>
<div style="float: left; width: 70%">
<div nzAlign="middle">
<div class="img-box clearfix" *ngFor="let it of hotZoneArr; let i = index" style="border-bottom: 1px solid #DDD; padding-bottom: 10px;" >
<div style="float: left; height: 115px; position: relative; width: 250px; ">
<h3> 第-{{ i + 1 }}-题 </h3>
<div style="position: absolute; bottom: 0;">
<app-audio-recorder [audioUrl]="it.audio_url ? it.audio_url : null" (audioUploaded)="onAudioUploadSuccess($event, it)" ></app-audio-recorder>
</div>
</div>
<div style="float: left;">
<div style="width:200px">
<app-upload-image-with-preview [picUrl]="it.image_url" (imageUploaded)="onImgUploadSuccessByImg($event, it)" ></app-upload-image-with-preview>
</div>
</div>
<div style="float: left; display: flex; flex-direction: column; padding-left: 10px;">
<button style="flex:1; margin-bottom: 5px;" nz-button nzType="dashed" (click)="handleMoveItemUp($event, i)">
<i nz-icon nzType="up" nzTheme="outline"></i>
上移
</button>
<button style="flex:1; margin-bottom: 5px;" nz-button nzType="dashed" (click)="handleMoveItemDown($event, i)">
<i nz-icon nzType="down" nzTheme="outline"></i>
下移
</button>
<button style="flex:1; margin-bottom: 5px;" nz-button nzType="danger" (click)="deleteItem($event, i)">
<i nz-icon nzType="delete" nzTheme="outline"></i>
删除
</button>
</div>
<div nz-col nzSpan="5" nzOffset="1" class="img-box"
*ngFor="let it of hotZoneArr; let i = index" >
<div style=" height: 40px;">
<h5> item-{{i+1}}
<i style="margin-left: 20px; margin-top: 2px; float: right; cursor:pointer" (click)="deleteItem($event, i)"
nz-icon [nzTheme]="'twotone'" [nzType]="'close-circle'" [nzTwotoneColor]="'#ff0000'"></i>
</h5>
</div> </div>
<div nz-col nzSpan="5" nzOffset="1">
<div class="img-box-upload"> <div class="bg-box">
<app-upload-image-with-preview <button
[picUrl]="it.image_url" nz-button
(imageUploaded)="onImgUploadSuccessByImg($event, it)"> nzType="dashed"
</app-upload-image-with-preview> (click)="addBtnClick()"
class="add-btn"
>
<i nz-icon nzType="plus-circle" nzTheme="outline"></i>
<!--Add Image-->
Add hot zone
</button>
</div>
</div> </div>
<app-audio-recorder
[audioUrl]="it.audio_url? it.audio_url : null "
(audioUploaded)="onAudioUploadSuccess($event, it)">
</app-audio-recorder>
</div>
<div nz-col nzSpan="5" nzOffset="1">
<div class="bg-box">
<button nz-button nzType="dashed" (click)="addBtnClick()"
class="add-btn">
<i nz-icon nzType="plus-circle" nzTheme="outline"></i>
<!--Add Image-->
Add hot zone
</button>
</div>
</div> </div>
</div> </div>
<nz-divider></nz-divider> <nz-divider></nz-divider>
<div class="save-box"> <div class="save-box">
<button
<button class="save-btn" nz-button nzType="primary" [nzSize]="'large'" nzShape="round" class="save-btn"
(click)="saveClick()"> nz-button
nzType="primary"
[nzSize]="'large'"
nzShape="round"
(click)="saveClick()"
>
<i nz-icon type="save"></i> <i nz-icon type="save"></i>
Save Save
</button> </button>
</div> </div>
</div> </div>
// #canvas{
// width: 200px;
// height: 300px;
// }
.p-image-children-editor { .p-image-children-editor {
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 0.5rem; border-radius: 0.5rem;
min-width: 850px;
border: 2px solid #ddd; border: 2px solid #ddd;
.preview-box { .preview-box {
margin: auto; margin: auto;
width: 95%; width: 95%;
height: 35vw; height: 35vw;
border: 2px dashed #ddd; border: 2px dashed #ddd;
border-radius: 0.5rem; border-radius: 0.5rem;
background-color: #fafafa; background-color: #fafafa;
text-align: center; text-align: center;
color: #aaa; color: #aaa;
.preview-img { .preview-img {
height: 100%; height: 100%;
width: auto; width: auto;
} }
} }
.bg-box {
.bg-box{
//width: 100%;
margin-bottom: 1rem; margin-bottom: 1rem;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
} }
.img-box { .img-box {
margin-bottom: 1rem; margin: 1rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
} }
.img-box-upload{ .img-box-upload {
width: 80%; width: 120px;
height: 80px;
} }
.add-btn { .add-btn {
margin-top: 1rem; margin-top: 1rem;
width: 200px; width: 200px;
height: 90px; height: 90px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
} }
.save-box { .save-box {
width: 100%; width: 100%;
...@@ -88,21 +73,6 @@ h5 { ...@@ -88,21 +73,6 @@ h5 {
margin-top: 1rem; margin-top: 1rem;
} }
//@import '../../../style/common_mixin'; //@import '../../../style/common_mixin';
// //
//.p-image-uploader { //.p-image-uploader {
......
...@@ -133,7 +133,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -133,7 +133,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
if (callBack) { if (callBack) {
callBack(); callBack();
} }
}); })
} }
} }
...@@ -142,7 +142,23 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -142,7 +142,23 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
const item = this.getHotZoneItem(); const item = this.getHotZoneItem();
this.hotZoneArr.push(item); this.hotZoneArr.push(item);
this.refreshHotZoneId(); this.refreshHotZoneId();
console.log('hotZoneArr:', this.hotZoneArr); // console.log('hotZoneArr:', this.hotZoneArr);
}
handleMoveItemUp(event,index){
if(index!=0){
this.hotZoneArr[index] = this.hotZoneArr.splice(index-1, 1, this.hotZoneArr[index])[0];
}else{
this.hotZoneArr.push(this.hotZoneArr.shift());
}
}
handleMoveItemDown(event,index){
if(index!=this.hotZoneArr.length-1){
this.hotZoneArr[index] = this.hotZoneArr.splice(index+1, 1, this.hotZoneArr[index])[0];
}else{
this.hotZoneArr.unshift( this.hotZoneArr.splice(index,1)[0]);
}
} }
onImgUploadSuccessByImg(e, item) { onImgUploadSuccessByImg(e, item) {
...@@ -240,8 +256,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -240,8 +256,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
} else { } else {
item.showLineDash(); item.showLineDash();
} }
})
});
return item; return item;
} }
...@@ -298,7 +313,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -298,7 +313,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
data.rect.x += curBgRect.x; data.rect.x += curBgRect.x;
data.rect.y += curBgRect.y; data.rect.y += curBgRect.y;
const item = this.getHotZoneItem(data); const item = this.getHotZoneItem(data);
console.log("初始化存储数据", data) // c//onsole.log("初始化存储数据", data)
this.hotZoneArr.push(item); this.hotZoneArr.push(item);
} }
this.refreshHotZoneId(); this.refreshHotZoneId();
...@@ -308,7 +323,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -308,7 +323,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
initImgArr() { initImgArr() {
console.log('this.imgItemArr: ', this.imgItemArr); // console.log('this.imgItemArr: ', this.imgItemArr);
let curBgRect; let curBgRect;
if (this.bg) { if (this.bg) {
curBgRect = this.bg.getBoundingBox(); curBgRect = this.bg.getBoundingBox();
...@@ -323,7 +338,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -323,7 +338,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
const rate = curBgRect.width / oldBgRect.width; const rate = curBgRect.width / oldBgRect.width;
console.log('rate: ', rate); // console.log('rate: ', rate);
this.imgArr = []; this.imgArr = [];
const arr = this.imgItemArr.concat(); const arr = this.imgItemArr.concat();
......
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<div class="card-item"> <div class="card-item">
<div class="border"> <div class="border">
<div class="card-item-content"> <div class="card-item-content">
<div class="title">选区设置</div> <div class="title">选区 / 题序 设置</div>
<div class="section"> <div class="section">
<app-custom-hot-zone <app-custom-hot-zone
[bgItem]="bgItem" [bgItem]="bgItem"
...@@ -13,29 +13,6 @@ ...@@ -13,29 +13,6 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="card-item">
<div class="border">
<div class="card-item-content">
<div class="title">题目设置</div>
<div class="section">
<div></div>
<app-audio-recorder></app-audio-recorder>
<!-- <div style="display: flex; margin-bottom: 10px;">
<div style="flex:1">
音频
</div>
<div style="flex:5">
<app-audio-recorder></app-audio-recorder>
</div>
</div> -->
</div>
<div class="section">
</div>
</div>
</div>
</div>
</div> </div>
</div> </div>
...@@ -13,7 +13,6 @@ import { ...@@ -13,7 +13,6 @@ import {
} from "./Unit"; } from "./Unit";
import { CartoonAnimation } from './CartoonAnimation' import { CartoonAnimation } from './CartoonAnimation'
import { ConsoleReporter } from 'jasmine';
export class Cartoon { export class Cartoon {
......
...@@ -33,7 +33,23 @@ import { debounceTime, map } from "rxjs/operators"; ...@@ -33,7 +33,23 @@ import { debounceTime, map } from "rxjs/operators";
import * as _ from "lodash"; import * as _ from "lodash";
import TWEEN from "@tweenjs/tween.js"; import TWEEN from "@tweenjs/tween.js";
const defauleFormData = {} const defauleFormData = {
"bgItem":{
url:"default-background"
},
hotZoneItemArr:[
{
index: 0,
rect: {
x: 1, y: -4, width: 120, height: 120
},
media:{
image_url:"default-header",
audio_url:""
}
}
]
}
const position = { const position = {
"4": [{x:640,y:140},{x:920,y:140},{x:640,y:387},{x:920,y:387}], "4": [{x:640,y:140},{x:920,y:140},{x:640,y:387},{x:920,y:387}],
"6": [{x:604,y:184},{x:791,y:184},{x:983,y:184},{x:604,y:364},{x:791,y:364},{x:983,y:364}], "6": [{x:604,y:184},{x:791,y:184},{x:983,y:184},{x:604,y:364},{x:791,y:364},{x:983,y:364}],
...@@ -119,13 +135,14 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -119,13 +135,14 @@ export class PlayComponent implements OnInit, OnDestroy {
// 映射预加载图片[网路]资源 返回包含图片路径的数组 // 映射预加载图片[网路]资源 返回包含图片路径的数组
mapToImageArray(contentObj){ mapToImageArray(contentObj){
let array = [] let array = []
if(contentObj){
array.push(this.g_data.contentObj.bgItem.url) array.push(contentObj.bgItem.url)
let hotZoneItemArr = contentObj.hotZoneItemArr; let hotZoneItemArr = contentObj.hotZoneItemArr;
if(hotZoneItemArr){ if(hotZoneItemArr){
hotZoneItemArr.forEach(item => { hotZoneItemArr.forEach(item => {
array.push(item.media.image_url) array.push(item.media.image_url)
}); });
}
} }
return array return array
} }
......
...@@ -17,7 +17,9 @@ const localImages = { ...@@ -17,7 +17,9 @@ const localImages = {
'start': "assets/play/start.png", 'start': "assets/play/start.png",
'start_down': "assets/play/start_down.png", 'start_down': "assets/play/start_down.png",
'restart': "assets/play/restart.png", 'restart': "assets/play/restart.png",
'lvquan': "assets/play/lvquan.png" 'lvquan': "assets/play/lvquan.png",
'default-background': "assets/play/default-background.png",
'default-header': "assets/play/default-header.png"
}; };
......
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