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

dev commit

parent d3aa849e
......@@ -116,14 +116,12 @@ export class MySprite extends Sprite {
load(url, anchorX = 0.5, anchorY = 0.5) {
return new Promise((resolve, reject) => {
const img = new Image();
img.onload = () => resolve(img);
img.onerror = reject;
img.src = url;
}).then(img => {
this.init(img, anchorX, anchorY);
return img;
});
......
<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>
<div class="preview-box" #wrap style="width: 200px; height: 300px;">
<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">
<app-upload-image-with-preview
[picUrl]="bgItem.url"
(imageUploaded)="onBackgroundUploadSuccess($event)">
(imageUploaded)="onBackgroundUploadSuccess($event)"
>
</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" >
<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 style="float: left; width: 70%">
<div nzAlign="middle">
<div class="img-box-upload">
<app-upload-image-with-preview
[picUrl]="it.image_url"
(imageUploaded)="onImgUploadSuccessByImg($event, it)">
</app-upload-image-with-preview>
<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>
<app-audio-recorder
[audioUrl]="it.audio_url? it.audio_url : null "
(audioUploaded)="onAudioUploadSuccess($event, it)">
</app-audio-recorder>
<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>
<div nz-col nzSpan="5" nzOffset="1">
<div class="bg-box">
<button nz-button nzType="dashed" (click)="addBtnClick()"
class="add-btn">
<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>
<nz-divider></nz-divider>
<div class="save-box">
<button class="save-btn" nz-button nzType="primary" [nzSize]="'large'" nzShape="round"
(click)="saveClick()">
<button
class="save-btn"
nz-button
nzType="primary"
[nzSize]="'large'"
nzShape="round"
(click)="saveClick()"
>
<i nz-icon type="save"></i>
Save
</button>
</div>
</div>
// #canvas{
// width: 200px;
// height: 300px;
// }
.p-image-children-editor {
width: 100%;
height: 100%;
border-radius: 0.5rem;
min-width: 850px;
border: 2px solid #ddd;
.preview-box {
margin: auto;
width: 95%;
height: 35vw;
border: 2px dashed #ddd;
border-radius: 0.5rem;
background-color: #fafafa;
text-align: center;
color: #aaa;
.preview-img {
height: 100%;
width: auto;
}
}
.bg-box{
//width: 100%;
.bg-box {
margin-bottom: 1rem;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.img-box {
margin-bottom: 1rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 1rem;
}
.img-box-upload{
width: 80%;
.img-box-upload {
width: 120px;
height: 80px;
}
.add-btn {
margin-top: 1rem;
width: 200px;
height: 90px;
display: flex;
align-items: center;
justify-content: center;
}
}
.save-box {
width: 100%;
......@@ -88,21 +73,6 @@ h5 {
margin-top: 1rem;
}
//@import '../../../style/common_mixin';
//
//.p-image-uploader {
......
......@@ -133,7 +133,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
if (callBack) {
callBack();
}
});
})
}
}
......@@ -142,7 +142,23 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
const item = this.getHotZoneItem();
this.hotZoneArr.push(item);
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) {
......@@ -240,8 +256,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
} else {
item.showLineDash();
}
});
})
return item;
}
......@@ -298,7 +313,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
data.rect.x += curBgRect.x;
data.rect.y += curBgRect.y;
const item = this.getHotZoneItem(data);
console.log("初始化存储数据", data)
// c//onsole.log("初始化存储数据", data)
this.hotZoneArr.push(item);
}
this.refreshHotZoneId();
......@@ -308,7 +323,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
initImgArr() {
console.log('this.imgItemArr: ', this.imgItemArr);
// console.log('this.imgItemArr: ', this.imgItemArr);
let curBgRect;
if (this.bg) {
curBgRect = this.bg.getBoundingBox();
......@@ -323,7 +338,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
const rate = curBgRect.width / oldBgRect.width;
console.log('rate: ', rate);
// console.log('rate: ', rate);
this.imgArr = [];
const arr = this.imgItemArr.concat();
......
......@@ -3,7 +3,7 @@
<div class="card-item">
<div class="border">
<div class="card-item-content">
<div class="title">选区设置</div>
<div class="title">选区 / 题序 设置</div>
<div class="section">
<app-custom-hot-zone
[bgItem]="bgItem"
......@@ -14,28 +14,5 @@
</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>
......@@ -13,7 +13,6 @@ import {
} from "./Unit";
import { CartoonAnimation } from './CartoonAnimation'
import { ConsoleReporter } from 'jasmine';
export class Cartoon {
......
......@@ -33,7 +33,23 @@ import { debounceTime, map } from "rxjs/operators";
import * as _ from "lodash";
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 = {
"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}],
......@@ -119,14 +135,15 @@ export class PlayComponent implements OnInit, OnDestroy {
// 映射预加载图片[网路]资源 返回包含图片路径的数组
mapToImageArray(contentObj){
let array = []
array.push(this.g_data.contentObj.bgItem.url)
if(contentObj){
array.push(contentObj.bgItem.url)
let hotZoneItemArr = contentObj.hotZoneItemArr;
if(hotZoneItemArr){
hotZoneItemArr.forEach(item => {
array.push(item.media.image_url)
});
}
}
return array
}
......
......@@ -17,7 +17,9 @@ const localImages = {
'start': "assets/play/start.png",
'start_down': "assets/play/start_down.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