Commit 6f55fbcd authored by 李维's avatar 李维

dev commit

parent c32632dd
...@@ -375,44 +375,34 @@ export class HotZoneItem extends MySprite { ...@@ -375,44 +375,34 @@ export class HotZoneItem extends MySprite {
this.width = w; this.width = w;
this.height = h; this.height = h;
const rect = new ShapeRect(this.ctx); const rect = new ShapeRect(this.ctx);
rect.x = -w / 2; rect.x = -w / 2;
rect.y = -h / 2; rect.y = -h / 2;
rect.setSize(w, h); rect.setSize(w, h);
rect.fillColor = '#ffffff'; rect.fillColor = '#FFFFFF';
rect.alpha = 0.2; rect.alpha = 0.2;
this.addChild(rect); this.addChild(rect);
} }
showLabel(text = null) { showLabel(text = null) {
if (!this.label) { if (!this.label) {
this.label = new Label(this.ctx); this.label = new Label(this.ctx);
this.label.anchorY = 0; this.label.anchorY = 0;
this.label.fontSize = '40px'; this.label.fontSize = '40px';
this.label.textAlign = 'center'; this.label.textAlign = 'center';
this.addChild(this.label); this.addChild(this.label);
// this.label.scaleX = 1 / this.scaleX;
// this.label.scaleY = 1 / this.scaleY;
this.refreshLabelScale(); this.refreshLabelScale();
} }
if (text) { if (text) {
this.label.text = text; this.label.text = text;
} else if (this.text) { } else if (this.text) {
this.label.text = this.text; this.label.text = this.text;
} }
this.label.visible = true; this.label.visible = true;
} }
hideLabel() { hideLabel() {
if (!this.label) { return; } if (!this.label) { return; }
this.label.visible = false; this.label.visible = false;
} }
...@@ -446,18 +436,14 @@ export class HotZoneItem extends MySprite { ...@@ -446,18 +436,14 @@ export class HotZoneItem extends MySprite {
this.arrowRight.load('assets/common/arrow_right.png', 1, 0.5); this.arrowRight.load('assets/common/arrow_right.png', 1, 0.5);
this.arrowRight.setScaleXY(0.06); this.arrowRight.setScaleXY(0.06);
} }
this.showLabel(); this.showLabel();
} }
hideLineDash() { hideLineDash() {
this.lineDashFlag = false; this.lineDashFlag = false;
if (this.arrow) { if (this.arrow) {
this.arrow.visible = false; this.arrow.visible = false;
} }
this.hideLabel(); this.hideLabel();
} }
...@@ -465,14 +451,11 @@ export class HotZoneItem extends MySprite { ...@@ -465,14 +451,11 @@ export class HotZoneItem extends MySprite {
drawArrow() { drawArrow() {
if (!this.arrow) { return; } if (!this.arrow) { return; }
const rect = this.getBoundingBox(); const rect = this.getBoundingBox();
this.arrow.x = rect.x + rect.width; this.arrow.x = rect.x + rect.width;
this.arrow.y = rect.y; this.arrow.y = rect.y;
this.arrow.update(); this.arrow.update();
this.arrowTop.x = rect.x + rect.width / 2; this.arrowTop.x = rect.x + rect.width / 2;
this.arrowTop.y = rect.y; this.arrowTop.y = rect.y;
this.arrowTop.update(); this.arrowTop.update();
...@@ -483,48 +466,212 @@ export class HotZoneItem extends MySprite { ...@@ -483,48 +466,212 @@ export class HotZoneItem extends MySprite {
} }
drawFrame() { drawFrame() {
this.ctx.save(); this.ctx.save();
const rect = this.getBoundingBox(); const rect = this.getBoundingBox();
const w = rect.width; const w = rect.width;
const h = rect.height; const h = rect.height;
const x = rect.x + w / 2; const x = rect.x + w / 2;
const y = rect.y + h / 2; const y = rect.y + h / 2;
this.ctx.setLineDash([5, 5]); this.ctx.setLineDash([5, 5]);
this.ctx.lineWidth = 2; this.ctx.lineWidth = 2;
this.ctx.strokeStyle = '#1bfff7'; this.ctx.strokeStyle = '#1bfff7';
// this.ctx.fillStyle = '#ffffff';
this.ctx.beginPath(); this.ctx.beginPath();
this.ctx.moveTo( x - w / 2, y - h / 2); this.ctx.moveTo( x - w / 2, y - h / 2);
this.ctx.lineTo(x + w / 2, y - h / 2); this.ctx.lineTo(x + w / 2, y - h / 2);
this.ctx.lineTo(x + w / 2, y + h / 2); this.ctx.lineTo(x + w / 2, y + h / 2);
this.ctx.lineTo(x - w / 2, y + h / 2); this.ctx.lineTo(x - w / 2, y + h / 2);
this.ctx.lineTo(x - w / 2, y - h / 2); this.ctx.lineTo(x - w / 2, y - h / 2);
// this.ctx.fill();
this.ctx.stroke(); this.ctx.stroke();
this.ctx.restore();
}
draw() {
super.draw();
if (this.lineDashFlag) {
this.drawFrame();
this.drawArrow();
}
}
}
export class HotZoneImageItem extends MySprite {
lineDashFlag = false;
arrow: MySprite;
label: Label;
image: MySprite;
imageSrc: String;
labelBox: MySprite;
scale
text;
arrowTop;
arrowRight;
init(imageSrc = null){
this.showImage(imageSrc,(img)=>{
console.log("Init")
this.setSize(img.width*this.image.scaleX, img.height*this.image.scaleY)
this.lineDashFlag = true;
this.showLineDash()
this.showLabel();
this.drawArrow()
})
}
setSize(w, h) {
this.width = w;
this.height = h;
}
showLabel(text = null) {
if (!this.label) {
this.labelBox = new MySprite(this.ctx);
this.labelBox.load('assets/default/bg_50_50.png').then(()=>{
this.labelBox.x = this.labelBox.width/2;
this.labelBox.y = this.labelBox.height/2;
});
this.label = new Label(this.ctx);
// this.label.anchorY = 0;
this.label.fontSize = '30px';
this.label.textAlign = 'center';
this.label.color = "#FFFFFF"
this.labelBox.addChild(this.label);
this.addChild(this.labelBox);
this.refreshLabelScale();
}
if (text) {
this.label.text = text;
} else if (this.text) {
this.label.text = this.text;
}
this.label.visible = true;
}
hideLabel() {
if (!this.label) { return; }
this.label.visible = false;
}
showImage(imageSrc = null, callback) {
this.loadImage(imageSrc).then((img)=>{
if(this.image){
this.removeChild(this.image)
}
this.image = new MySprite(this.ctx);
this.image.init(img)
let scale = Math.min(200/this.image.width, 200/this.image.height)
this.image.x = this.image.width*scale/2
this.image.y = this.image.height*scale/2
this.image.alpha = 0.7;
this.image.setScaleXY(scale);
this.addChild(this.image,-1);
this.imageSrc = img.src;
callback && callback(this.image)
})
}
loadImage(imageSrc = null){
return new Promise((resolve, reject) => {
const img = new Image();
img.onload = () => resolve(img);
img.onerror = reject;
img.src = imageSrc;
})
}
hideImage() {
if (!this.image) { return; }
this.image.visible = false;
}
refreshLabelScale() {
// console.log(this.labelBox.width)
this.labelBox.scaleX = 75 / (this.labelBox.width*this.image.scaleX)
// console.log(this.labelBox.width)
// if (this.scaleX == this.scaleY) {
// this.labelBox.setScaleXY(1);
// }
// if (this.scaleX > this.scaleY) {
// this.labelBox.scaleX = this.scaleY / this.scaleX;
// } else {
// this.labelBox.scaleY = this.scaleX / this.scaleY;
// }
}
showLineDash() {
if (this.arrow) {
this.arrow.visible = true;
} else {
this.arrow = new MySprite(this.ctx);
this.arrow.load('assets/common/arrow.png', 1, 0);
this.arrow.setScaleXY(0.06);
this.arrowTop = new MySprite(this.ctx);
this.arrowTop.load('assets/common/arrow_top.png', 0.5, 0);
this.arrowTop.setScaleXY(0.06);
this.arrowRight = new MySprite(this.ctx);
this.arrowRight.load('assets/common/arrow_right.png', 1, 0.5);
this.arrowRight.setScaleXY(0.06);
}
}
hideLineDash() {
this.lineDashFlag = false;
if (this.arrow) {
this.arrow.visible = false;
}
this.hideLabel();
}
drawArrow() {
if (!this.arrow) { return; }
const rect = this.getBoundingBox();
this.arrow.x = rect.x + rect.width;
this.arrow.y = rect.y;
this.arrow.update();
this.arrowTop.x = rect.x + rect.width / 2;
this.arrowTop.y = rect.y;
this.arrowTop.update();
this.arrowRight.x = rect.x + rect.width;
this.arrowRight.y = rect.y + rect.height / 2;
this.arrowRight.update();
}
drawFrame() {
this.ctx.save();
const rect = this.getBoundingBox();
const w = rect.width;
const h = rect.height;
const x = rect.x + w / 2;
const y = rect.y + h / 2;
this.ctx.setLineDash([5, 5]);
this.ctx.lineWidth = 2;
this.ctx.strokeStyle = '#1bfff7';
this.ctx.beginPath();
this.ctx.moveTo( x - w / 2, y - h / 2);
this.ctx.lineTo(x + w / 2, y - h / 2);
this.ctx.lineTo(x + w / 2, y + h / 2);
this.ctx.lineTo(x - w / 2, y + h / 2);
this.ctx.lineTo(x - w / 2, y - h / 2);
this.ctx.stroke();
this.ctx.restore(); this.ctx.restore();
} }
draw() { draw() {
super.draw(); super.draw();
if (this.lineDashFlag) { if (this.lineDashFlag) {
this.drawFrame(); this.drawFrame();
this.drawArrow(); this.drawArrow();
...@@ -569,14 +716,12 @@ export class EditorItem extends MySprite { ...@@ -569,14 +716,12 @@ export class EditorItem extends MySprite {
showLineDash() { showLineDash() {
this.lineDashFlag = true; this.lineDashFlag = true;
if (this.arrow) { if (this.arrow) {
this.arrow.visible = true; this.arrow.visible = true;
} else { } else {
this.arrow = new MySprite(this.ctx); this.arrow = new MySprite(this.ctx);
this.arrow.load('assets/common/arrow.png', 1, 0); this.arrow.load('assets/common/arrow.png', 1, 0);
this.arrow.setScaleXY(0.06); this.arrow.setScaleXY(0.06);
} }
this.showLabel(); this.showLabel();
......
...@@ -37,12 +37,12 @@ ...@@ -37,12 +37,12 @@
</div> </div>
<!--<div class="img-box-upload">--> <div class="img-box-upload">
<!--<app-upload-image-with-preview--> <app-upload-image-with-preview
<!--[picUrl]="it.pic_url"--> [picUrl]="it.pic_url"
<!--(imageUploaded)="onImgUploadSuccessByImg($event, it)">--> (imageUploaded)="onImgUploadSuccessByImg($event, it, i)">
<!--</app-upload-image-with-preview>--> </app-upload-image-with-preview>
<!--</div>--> </div>
<!--<app-audio-recorder--> <!--<app-audio-recorder-->
......
<div class="model-content"> <div class="model-content">
<div class="card-config"> <div class="card-config">
<div *ngFor="let item of dataArray; let i = index" class="card-item" style="padding: 0.5vw;" > <div class="card-item">
<div class="card-item-content border"> <div class="border">
<div class="card-item-content"> <div class="card-item-content">
<div class="title" > <div class="title">选区设置</div>
第-<strong>{{ i + 1 }}</strong>-题 <div class="section">
<app-custom-hot-zone
[bgItem]="bgItem"
[hotZoneItemArr]="hotZoneItemArr"
(save)="saveData($event)"
></app-custom-hot-zone>
</div> </div>
<div class="section" >
<div class="section-title" >
问题
</div> </div>
<div class="section-content">
<div style="flex:1">
<div style="display: flex; margin-bottom: 10px;">
<div style="flex:1">
文字
</div>
<div style="flex:5">
<input type="text" nz-input placeholder="" [(ngModel)]="item.question.text" (blur)="saveItem()" style="width: 250px;" />
</div> </div>
</div> </div>
<div class="card-item">
<div style="display: flex; margin-bottom: 10px;"> <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 style="flex:1">
音频 音频
</div> </div>
<div style="flex:5"> <div style="flex:5">
<app-audio-recorder [audioUrl]="item.question.audio_url" (audioUploaded)="onAudioUploadSuccessByItem($event, item.question)" ></app-audio-recorder> <app-audio-recorder></app-audio-recorder>
</div> </div>
</div> -->
</div> </div>
<div style="display: flex; margin-bottom: 10px;"> <div class="section">
<div style="flex:1">
时间
</div>
<div style="flex:5">
<input type="text" nz-input placeholder="" [(ngModel)]="item.time" (blur)="saveItem()" style="width: 80px;" /><span style="margin-left: 10px;"></span>
</div>
</div>
</div>
<div style="flex:1">
<div style="display: flex; ">
<div style="flex:1">
图片
</div>
<div style="flex:5">
<app-upload-image-with-preview style="width: 100%;" [picUrl]="item.question.image_url" (imageUploaded)="onImageUploadSuccessByItem($event, item.question)"></app-upload-image-with-preview>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="section" >
<div class="section-title" >
正确选项
</div>
<div class="section-content">
<div style="flex:10">
<div style="display: flex; margin-bottom: 10px;">
<div style="flex:1">
文字
</div>
<div style="flex:5">
<input type="text" nz-input placeholder="" [(ngModel)]="item.choice.correct.text" (blur)="saveItem()" />
</div>
</div>
<div style="display: flex; margin-bottom: 10px;">
<div style="flex:1">
图片
</div>
<div style="flex:5">
<app-upload-image-with-preview style="width: 100%;" [picUrl]="item.choice.correct.image_url" (imageUploaded)="onImageUploadSuccessByItem($event, item.choice.correct)"></app-upload-image-with-preview>
</div>
</div>
<div style="display: flex; ">
<div style="flex:2">
显示选项
</div>
<div style="flex:4">
<nz-radio-group [(ngModel)]="item.choice.correct.isText" (ngModelChange)="saveItem()" >
<label nz-radio [nzValue]="true">文字</label>
<label nz-radio [nzValue]="false">图片</label>
</nz-radio-group>
</div>
</div>
</div>
<div style="flex:20">
</div> </div>
</div>
</div>
<div class="section" >
<div class="section-title" >
错误选项
<div *ngIf="item.choice.incorrect.length<3" style="text-align: center; float: right;">
<button nz-button nzType="primary" (click)="addChoice(i)" >
<i nz-icon nzType="plus-circle" nzTheme="outline"></i>
添加
</button>
</div>
</div>
<div class="section-content">
<div *ngFor="let choiceItem of item.choice.incorrect; let choiceIndex = index" style="width:220px; height:230px; border:1px solid #CCC; padding:5px; border-radius: 5px; margin: 0 10px;">
<div style="display: flex; margin-bottom: 10px;">
<div style="flex:1">
文字
</div>
<div style="flex:5">
<input type="text" nz-input placeholder="" [(ngModel)]="choiceItem.text" (blur)="saveItem()" />
</div>
</div>
<div style="display: flex; margin-bottom: 10px;">
<div style="flex:1">
图片
</div>
<div style="flex:5">
<app-upload-image-with-preview style="width: 100%;" [picUrl]="choiceItem.image_url" (imageUploaded)="onImageUploadSuccessByItem($event, choiceItem)"></app-upload-image-with-preview>
</div>
</div>
<div style="display: flex; ">
<div style="flex:2">
显示选项
</div>
<div style="flex:4">
<nz-radio-group [(ngModel)]="choiceItem.isText" (ngModelChange)="saveItem()" >
<label nz-radio [nzValue]="true">文字</label>
<label nz-radio [nzValue]="false">图片</label>
</nz-radio-group>
</div>
</div>
<div *ngIf="choiceIndex>0" style="text-align: center;">
<button style="margin-top: 10px;" nz-button nzType="danger" (click)="deleteChoice(i, choiceIndex)" >
<span>删除此选项</span>
</button>
</div>
</div>
</div>
</div>
<div class="section" >
<div style="text-align: right; padding-right: 20px;">
<button style="margin-bottom: 10px;" nz-button nzType="danger" (click)="deleteItem(i)" >
<span>删除本题</span>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="card-item" style="padding: 0.5vw;" >
<button nz-button nzType="primary" class="add-btn" (click)="addItem()">
<i nz-icon nzType="plus-circle" nzTheme="outline"></i>
新建卡片组
</button>
</div>
</div>
</div> </div>
@import "../style/common_mixin"; @import "../style/common_mixin";
.model-content { .model-content {
margin: 10px;
.card-config { .card-config {
width: 100%; width: 100%;
height: 100%; height: 100%;
margin-left: 10px;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
box-sizing: border-box;
flex-direction:column;
.card-item{ .card-item{
flex:1; flex:1;
margin-bottom: 40px;
.border { .border {
border-radius: 20px; border-radius: 20px;
border-style: dashed; border-style: dashed;
padding:20px; padding:20px;
width: 800px; width: 100%;
} }
.card-item-content{ .card-item-content{
.title { .title {
......
...@@ -8,9 +8,12 @@ import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, Ap ...@@ -8,9 +8,12 @@ import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, Ap
export class FormComponent implements OnInit, OnChanges, OnDestroy { export class FormComponent implements OnInit, OnChanges, OnDestroy {
dataArray = [];
_item: any; _item: any;
KEY = 'DataKey_MultipleChoice'; dataArray: Array<Object> = [];
hotZoneItemArr: Array<Object> = [];
bgItem: Object;
KEY = 'DataKey_PicturePuzzle';
set item(item) { set item(item) {
this._item = item; this._item = item;
...@@ -30,6 +33,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -30,6 +33,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
this.item.contentObj = {}; this.item.contentObj = {};
const getData = (<any> window).courseware.getData; const getData = (<any> window).courseware.getData;
getData((data) => { getData((data) => {
console.log("读取数据", data)
if (data) { if (data) {
this.item = data; this.item = data;
} else { } else {
...@@ -40,7 +44,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -40,7 +44,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
} }
this.init(); this.init();
this.refresh(); this.refresh();
this.saveItem(); // this.saveItem();
}, this.KEY); }, this.KEY);
} }
ngOnChanges() { ngOnChanges() {
...@@ -50,6 +54,16 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -50,6 +54,16 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
ngOnDestroy() { ngOnDestroy() {
} }
saveData(e){
console.log("HotZone保存", e)
this.bgItem = e.bgItem;
this.hotZoneItemArr.length = 0;
e.hotZoneItemArr.forEach(item => {
console.log(item)
this.hotZoneItemArr.push(item)
});
this.save();
}
init() { init() {
if (this.item.contentObj.dataArray) { if (this.item.contentObj.dataArray) {
...@@ -58,24 +72,27 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -58,24 +72,27 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
this.dataArray = this.getDefaultPicArr(); this.dataArray = this.getDefaultPicArr();
this.item.contentObj.dataArray = this.dataArray; this.item.contentObj.dataArray = this.dataArray;
} }
if (this.item.contentObj.hotZoneItemArr) {
this.hotZoneItemArr = this.item.contentObj.hotZoneItemArr;
} else {
this.hotZoneItemArr = this.getDefaultPicArr();
this.item.contentObj.hotZoneItemArr = this.hotZoneItemArr;
}
if (this.item.contentObj.bgItem) {
this.bgItem = this.item.contentObj.bgItem;
} else {
this.bgItem = {}
this.item.contentObj.bgItem = this.bgItem;
}
} }
cardItemData(){ cardItemData(){
return { return {
time: 3, audio_url: "",
question:{ image_url: "",
text:"", hotZoneIndex: -1
image_url:"",
audio_url:""
},
choice:{
correct:{ isText: true, text: "", image_url: "" },
incorrect:[
{ isText: true, text: "", image_url: "" },
{ isText: true, text: "", image_url: "" },
{ isText: true, text: "", image_url: "" },
]
}
}; };
} }
...@@ -88,23 +105,11 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -88,23 +105,11 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
return arr; return arr;
} }
initData() { initData() {
}
deleteItem(index) {
if (index !== -1) {
this.dataArray.splice(index, 1);
}
this.save();
} }
deleteChoice(questionIndex, choiceIndex){
if (questionIndex !== -1 && choiceIndex !== -1) {
this.dataArray[questionIndex].choice.incorrect.splice(choiceIndex, 1);
}
this.save();
}
addChoice(questionIndex) { addChoice(questionIndex) {
let item = this.cardChoiceData(); let item = this.cardChoiceData();
this.dataArray[questionIndex].choice.incorrect.push(item); this.dataArray[questionIndex].choice.incorrect.push(item);
...@@ -120,10 +125,12 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -120,10 +125,12 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
item.audio_url = e.url; item.audio_url = e.url;
this.save(); this.save();
} }
onTitleAudioUploadSuccess(e) { onTitleAudioUploadSuccess(e) {
this.item.contentObj.titleAudio_url = e.url; this.item.contentObj.titleAudio_url = e.url;
this.save(); this.save();
} }
addItem() { addItem() {
let item = this.cardItemData(); let item = this.cardItemData();
this.dataArray.push(item); this.dataArray.push(item);
...@@ -132,7 +139,6 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -132,7 +139,6 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
radioClick(it, radioValue) { radioClick(it, radioValue) {
it.radioValue = radioValue; it.radioValue = radioValue;
this.saveItem(); this.saveItem();
} }
...@@ -140,7 +146,6 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -140,7 +146,6 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
this.saveItem(); this.saveItem();
} }
saveItem() { saveItem() {
this.save(); this.save();
} }
...@@ -148,7 +153,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -148,7 +153,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
save() { save() {
(<any> window).courseware.setData(this.item, null, this.KEY); (<any> window).courseware.setData(this.item, null, this.KEY);
this.refresh(); this.refresh();
console.log(this.item) console.log("保存", this.item)
} }
refresh() { refresh() {
...@@ -156,6 +161,5 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -156,6 +161,5 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
this.appRef.tick(); this.appRef.tick();
}, 1); }, 1);
} }
} }
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