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

dev commit

parent c32632dd
......@@ -375,44 +375,34 @@ export class HotZoneItem extends MySprite {
this.width = w;
this.height = h;
const rect = new ShapeRect(this.ctx);
rect.x = -w / 2;
rect.y = -h / 2;
rect.setSize(w, h);
rect.fillColor = '#ffffff';
rect.fillColor = '#FFFFFF';
rect.alpha = 0.2;
this.addChild(rect);
}
showLabel(text = null) {
if (!this.label) {
this.label = new Label(this.ctx);
this.label.anchorY = 0;
this.label.fontSize = '40px';
this.label.textAlign = 'center';
this.addChild(this.label);
// this.label.scaleX = 1 / this.scaleX;
// this.label.scaleY = 1 / this.scaleY;
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;
}
......@@ -446,18 +436,14 @@ export class HotZoneItem extends MySprite {
this.arrowRight.load('assets/common/arrow_right.png', 1, 0.5);
this.arrowRight.setScaleXY(0.06);
}
this.showLabel();
}
hideLineDash() {
this.lineDashFlag = false;
if (this.arrow) {
this.arrow.visible = false;
}
this.hideLabel();
}
......@@ -465,14 +451,11 @@ export class HotZoneItem extends MySprite {
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();
......@@ -483,48 +466,212 @@ export class HotZoneItem extends MySprite {
}
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.fillStyle = '#ffffff';
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.fill();
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();
}
draw() {
super.draw();
if (this.lineDashFlag) {
this.drawFrame();
this.drawArrow();
......@@ -569,14 +716,12 @@ export class EditorItem extends MySprite {
showLineDash() {
this.lineDashFlag = true;
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.showLabel();
......
......@@ -37,12 +37,12 @@
</div>
<!--<div class="img-box-upload">-->
<!--<app-upload-image-with-preview-->
<!--[picUrl]="it.pic_url"-->
<!--(imageUploaded)="onImgUploadSuccessByImg($event, it)">-->
<!--</app-upload-image-with-preview>-->
<!--</div>-->
<div class="img-box-upload">
<app-upload-image-with-preview
[picUrl]="it.pic_url"
(imageUploaded)="onImgUploadSuccessByImg($event, it, i)">
</app-upload-image-with-preview>
</div>
<!--<app-audio-recorder-->
......
<div class="model-content">
<div class="card-config">
<div *ngFor="let item of dataArray; let i = index" class="card-item" style="padding: 0.5vw;" >
<div class="card-item-content border">
<div class="card-item">
<div class="border">
<div class="card-item-content">
<div class="title" >
第-<strong>{{ i + 1 }}</strong>-题
<div class="title">选区设置</div>
<div class="section">
<app-custom-hot-zone
[bgItem]="bgItem"
[hotZoneItemArr]="hotZoneItemArr"
(save)="saveData($event)"
></app-custom-hot-zone>
</div>
<div class="section" >
<div class="section-title" >
问题
</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 style="display: flex; margin-bottom: 10px;">
<div style="flex:1">
音频
</div>
<div style="flex:5">
<app-audio-recorder [audioUrl]="item.question.audio_url" (audioUploaded)="onAudioUploadSuccessByItem($event, item.question)" ></app-audio-recorder>
</div>
</div>
<div style="display: flex; margin-bottom: 10px;">
<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>
</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 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 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 style="flex:5">
<app-audio-recorder></app-audio-recorder>
</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 class="section">
<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";
.model-content {
margin: 10px;
.card-config {
width: 100%;
height: 100%;
margin-left: 10px;
display: flex;
flex-wrap: wrap;
box-sizing: border-box;
flex-direction:column;
.card-item{
flex:1;
margin-bottom: 40px;
.border {
border-radius: 20px;
border-style: dashed;
padding:20px;
width: 800px;
width: 100%;
}
.card-item-content{
.title {
......
......@@ -8,9 +8,12 @@ import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, Ap
export class FormComponent implements OnInit, OnChanges, OnDestroy {
dataArray = [];
_item: any;
KEY = 'DataKey_MultipleChoice';
_item: any;
dataArray: Array<Object> = [];
hotZoneItemArr: Array<Object> = [];
bgItem: Object;
KEY = 'DataKey_PicturePuzzle';
set item(item) {
this._item = item;
......@@ -30,6 +33,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
this.item.contentObj = {};
const getData = (<any> window).courseware.getData;
getData((data) => {
console.log("读取数据", data)
if (data) {
this.item = data;
} else {
......@@ -40,7 +44,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
}
this.init();
this.refresh();
this.saveItem();
// this.saveItem();
}, this.KEY);
}
ngOnChanges() {
......@@ -50,6 +54,16 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
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() {
if (this.item.contentObj.dataArray) {
......@@ -58,24 +72,27 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
this.dataArray = this.getDefaultPicArr();
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(){
return {
time: 3,
question:{
text:"",
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: "" },
]
}
audio_url: "",
image_url: "",
hotZoneIndex: -1
};
}
......@@ -88,23 +105,11 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
return arr;
}
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) {
let item = this.cardChoiceData();
this.dataArray[questionIndex].choice.incorrect.push(item);
......@@ -120,10 +125,12 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
item.audio_url = e.url;
this.save();
}
onTitleAudioUploadSuccess(e) {
this.item.contentObj.titleAudio_url = e.url;
this.save();
}
addItem() {
let item = this.cardItemData();
this.dataArray.push(item);
......@@ -132,7 +139,6 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
radioClick(it, radioValue) {
it.radioValue = radioValue;
this.saveItem();
}
......@@ -140,7 +146,6 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
this.saveItem();
}
saveItem() {
this.save();
}
......@@ -148,7 +153,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
save() {
(<any> window).courseware.setData(this.item, null, this.KEY);
this.refresh();
console.log(this.item)
console.log("保存", this.item)
}
refresh() {
......@@ -156,6 +161,5 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
this.appRef.tick();
}, 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