Commit ada42ef3 authored by Chen Jiping's avatar Chen Jiping

完成课件18开发

parent a7e92ed4
This diff is collapsed.
{ {
"name": "ng-template-generator", "name": "ng-template-generator",
"version": "0.0.1", "version": "0.0.1",
"scripts": { "scripts": {
"start": "ng serve", "start": "ng serve",
"build": "ng build --build--optimizer --aot --base-href /JGT/v3/", "build": "ng build --build--optimizer --aot --base-href /JGT/v3/",
"publish": "node ./bin/publish.js" "publish": "node ./bin/publish.js"
}, },
"private": true, "private": true,
"dependencies": { "dependencies": {
...@@ -43,6 +43,7 @@ ...@@ -43,6 +43,7 @@
"nedb": "^1.8.0", "nedb": "^1.8.0",
"ng-lottie": "^0.3.1", "ng-lottie": "^0.3.1",
"ng-zorro-antd": "^7.2.0", "ng-zorro-antd": "^7.2.0",
"node-sass": "^4.13.1",
"npm": "^6.5.0", "npm": "^6.5.0",
"rxjs": "^6.3.3", "rxjs": "^6.3.3",
"rxjs-compat": "^6.3.3", "rxjs-compat": "^6.3.3",
......
<div class="model-content"> <div class="model-content">
<div nz-row>
<div nz-col nzOffset="2" [nzSpan]="16">
<div style="position: absolute; left: 200px; top: 100px; width: 300px;"> <div nz-row>
<div nz-col nzOffset='4' [nzSpan]="12"><h1 nz-title>课程内容编辑</h1></div>
<input type="text" nz-input [(ngModel)]="item.text" (blur)="save()"> </div>
<div nz-form>
<app-upload-image-with-preview <div id='title-anchor'>
[picUrl]="item.pic_url" <nz-divider nzText="课程名称" nzOrientation="left"></nz-divider>
(imageUploaded)="onImageUploadSuccess($event, 'pic_url')" <nz-form-item>
></app-upload-image-with-preview> <nz-form-label [nzSpan]="3" nzFor="t_val1">标题</nz-form-label>
<nz-form-control [nzSpan]="6">
<app-audio-recorder <nz-input-group nzAddOnBefore="Lesson">
[audioUrl]="item.audio_url" <input type="text" id="t_val1" nz-input [(ngModel)]="item.title.t_val" (blur)="save()">
(audioUploaded)="onAudioUploadSuccess($event, 'audio_url')" </nz-input-group>
></app-audio-recorder> </nz-form-control>
</nz-form-item>
</div> <nz-form-item>
<nz-form-label [nzSpan]="3" nzFor="t_audio_url">发音</nz-form-label>
<nz-form-control [nzSpan]="6">
<app-audio-recorder
<div style="position: absolute; left: 1000px; top: 100px; width: 300px;"> [audioUrl]="item.title.t_audio_url" id="t_audio_url"
(audioUploaded)="onAudioUploadSuccess($event, item.title, 't_audio_url')">
<input type="text" nz-input [(ngModel)]="item.text_2" (blur)="save()"> </app-audio-recorder>
</nz-form-control>
<app-upload-image-with-preview </nz-form-item>
[picUrl]="item.pic_url_2" </div>
(imageUploaded)="onImageUploadSuccess($event, 'pic_url_2')" <div id='word-anchor'>
></app-upload-image-with-preview> <nz-divider nzText="单词信息" nzOrientation="left"></nz-divider>
<nz-form-item>
<app-audio-recorder <nz-form-control [nzSpan]="6" nzOffset="3" class="add-btn-box">
[audioUrl]="item.audio_url_2" <nz-affix [nzOffsetTop]="120">
(audioUploaded)="onAudioUploadSuccess($event, 'audio_url_2')" <button nz-button nzType="dashed" nzTooltipTitle="添加单词" nzTooltipPlacement="right" class="add-btn" id="add-btn"
></app-audio-recorder> (click)="addWordItem()" nz-tooltip>
<i nz-icon nzType="plus-circle" nzTheme="outline"></i>添加
</div> </button>
</nz-affix>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-control [nzSpan]="10" nzOffset="3">
<div *ngFor="let it of item.words; let i = index">
<nz-card nzType="inner" style="margin-top:16px;" nzTitle="单词 {{i + 1}}" [nzExtra]="delWordTemplate">
<div nz-form id="word-anchor-{{i + 1}}">
<nz-form-item>
<nz-form-label [nzSpan]="6" nzFor="word_val">单词</nz-form-label>
<nz-form-control [nzSpan]="12">
<input type="text" nz-input placeholder="Please input word" [(ngModel)]="it.word_val" (blur)="save()">
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="6" nzFor="word_pic_url">发音</nz-form-label>
<nz-form-control [nzSpan]="12">
<app-audio-recorder id="it.word_audio_url"
[audioUrl]="it.word_audio_url"
(audioUploaded)="onAudioUploadSuccess($event, it, 'word_audio_url')">
</app-audio-recorder>
</nz-form-control>
</nz-form-item>
</div>
</nz-card>
<ng-template #delWordTemplate>
<button nz-button nzType="danger" id="del-word-btn"
(click)="deleteArrItem(item.words, i)">
<i nz-icon nzType="delete" nzTheme="outline"></i>删除
</button>
</ng-template>
</div>
</nz-form-control>
</nz-form-item>
</div>
</div>
</div>
<div nz-col nzOffset="2" [nzSpan]="4">
<nz-affix style="position: absolute; margin-top: 100px;margin-right: 10px;">
<nz-anchor>
<nz-link nzHref="#title-anchor" nzTitle="标题"></nz-link>
<nz-link nzHref="#word-anchor" nzTitle="单词信息">
<nz-link *ngFor="let it of item.words; let i = index" nzHref="#word-anchor-{{i}}" nzTitle="单词 {{i + 1}}">
</nz-link>
</nz-link>
</nz-anchor>
</nz-affix>
</div>
</div>
</div> </div>
......
...@@ -10,10 +10,11 @@ import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, Ap ...@@ -10,10 +10,11 @@ import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, Ap
export class FormComponent implements OnInit, OnChanges, OnDestroy { export class FormComponent implements OnInit, OnChanges, OnDestroy {
// 储存数据用 // 储存数据用
saveKey = "test_0011"; saveKey = "ym_018";
// 储存对象 // 储存对象
item; item;
word_arr = [];
constructor(private appRef: ApplicationRef) { constructor(private appRef: ApplicationRef) {
...@@ -31,6 +32,8 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -31,6 +32,8 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
this.item = data; this.item = data;
} }
console.log('item', this.item);
this.init(); this.init();
this.refresh(); this.refresh();
...@@ -49,6 +52,19 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -49,6 +52,19 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
init() { init() {
//标题
if(!this.item.title){
this.item.title = {
t_val:'1'
};
}
if(!this.item.words){
this.item.words = this.word_arr;
}
else{
this.word_arr = this.item.words;
}
} }
...@@ -56,9 +72,9 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -56,9 +72,9 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
* 储存图片数据 * 储存图片数据
* @param e * @param e
*/ */
onImageUploadSuccess(e, key) { onImageUploadSuccess(e, item, key) {
this.item[key] = e.url; item[key] = e.url;
this.save(); this.save();
} }
...@@ -66,9 +82,9 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -66,9 +82,9 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
* 储存音频数据 * 储存音频数据
* @param e * @param e
*/ */
onAudioUploadSuccess(e, key) { onAudioUploadSuccess(e, item, key) {
this.item[key] = e.url; item[key] = e.url;
this.save(); this.save();
} }
...@@ -78,6 +94,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -78,6 +94,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
* 储存数据 * 储存数据
*/ */
save() { save() {
console.log('item', this.item);
(<any> window).courseware.setData(this.item, null, this.saveKey); (<any> window).courseware.setData(this.item, null, this.saveKey);
this.refresh(); this.refresh();
} }
...@@ -91,5 +108,34 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -91,5 +108,34 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
}, 1); }, 1);
} }
wordItemData(){
return {
word_val: "",
word_audio_url: ""
};
}
/**
* 添加单词项
*/
addWordItem(){
let word = this.wordItemData();
this.word_arr.push(word);
this.save();
}
/**
* 删除数组指定索引项
* @param arrItem 数组对象
* @param index 索引
*/
deleteArrItem(arrItem, index){
if (index !== -1) {
arrItem.splice(index, 1);
}
this.save();
}
} }
...@@ -864,8 +864,84 @@ export class ShapeRect extends MySprite { ...@@ -864,8 +864,84 @@ export class ShapeRect extends MySprite {
} }
} }
export class ShapeRoundRect extends MySprite {
radius = 0;
fillColor = '#ffffff';
strokeColor = '#000000';
fill = true;
stroke = false;
lineWidth = 1;
setSize(w, h, r) {
this.width = w;
this.height = h;
this.radius = r;
}
setOutLine(color, lineWidth) {
this.stroke = true;
this.strokeColor = color;
this.lineWidth = lineWidth;
}
drawShape() {
const ctx = this.ctx;
const width = this.width;
const height = this.height;
const radius = this.radius;
ctx.save();
ctx.beginPath(0);
// 从右下角顺时针绘制,弧度从0到1/2PI
ctx.arc(width - radius, height - radius, radius, 0, Math.PI / 2);
// 矩形下边线
ctx.lineTo(radius, height);
// 左下角圆弧,弧度从1/2PI到PI
ctx.arc(radius, height - radius, radius, Math.PI / 2, Math.PI);
// 矩形左边线
ctx.lineTo(0, radius);
// 左上角圆弧,弧度从PI到3/2PI
ctx.arc(radius, radius, radius, Math.PI, Math.PI * 3 / 2);
// 上边线
ctx.lineTo(width - radius, 0);
// 右上角圆弧
ctx.arc(width - radius, radius, radius, Math.PI * 3 / 2, Math.PI * 2);
// 右边线
ctx.lineTo(width, height - radius);
ctx.closePath();
if (this.fill) {
ctx.fillStyle = this.fillColor;
ctx.fill();
}
if (this.stroke) {
ctx.lineWidth = this.lineWidth;
ctx.strokeStyle = this.strokeColor;
ctx.stroke();
}
ctx.restore();
}
drawSelf() {
super.drawSelf();
this.drawShape();
}
}
export class ShapeCircle extends MySprite { export class ShapeCircle extends MySprite {
fillColor = '#FF0000'; fillColor = '#FF0000';
......
...@@ -17,3 +17,8 @@ ...@@ -17,3 +17,8 @@
src: url("../../assets/font/BRLNSDB.TTF") ; src: url("../../assets/font/BRLNSDB.TTF") ;
} }
@font-face
{
font-family: 'GOTHICB';
src: url("../../assets/font/GOTHICB.TTF") ;
}
\ No newline at end of file
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