Commit 6c59cff2 authored by limingzhe's avatar limingzhe

update

parent a970169f
......@@ -13,71 +13,71 @@
}
}
@font-face
{
font-family: 'BRLNSDB';
src: url("../../../assets/font/BRLNSDB.TTF") ;
}
@font-face
{
font-family: 'BRLNSB';
src: url("../../../assets/font/BRLNSB.TTF") ;
}
@font-face
{
font-family: 'BRLNSR';
src: url("../../../assets/font/BRLNSR.TTF") ;
}
@font-face
{
font-family: 'GOTHIC';
src: url("../../../assets/font/GOTHIC.TTF") ;
}
@font-face
{
font-family: 'GOTHICB';
src: url("../../../assets/font/GOTHICB.TTF") ;
}
@font-face
{
font-family: 'GOTHICBI';
src: url("../../../assets/font/GOTHICBI.TTF") ;
}
@font-face
{
font-family: 'GOTHICI';
src: url("../../../assets/font/GOTHICI.TTF") ;
}
@font-face
{
font-family: 'MMTextBook';
src: url("../../../assets/font/MMTextBook.otf") ;
}
@font-face
{
font-family: 'MMTextBook-Bold';
src: url("../../../assets/font/MMTextBook-Bold.otf") ;
}
@font-face
{
font-family: 'MMTextBook-BoldItalic';
src: url("../../../assets/font/MMTextBook-BoldItalic.otf") ;
}
@font-face
{
font-family: 'MMTextBook-Italic';
src: url("../../../assets/font/MMTextBook-Italic.otf") ;
}
//@font-face
//{
// font-family: 'BRLNSDB';
// src: url("../../../assets/font/BRLNSDB.TTF") ;
//}
//
//@font-face
//{
// font-family: 'BRLNSB';
// src: url("../../../assets/font/BRLNSB.TTF") ;
//}
//
//@font-face
//{
// font-family: 'BRLNSR';
// src: url("../../../assets/font/BRLNSR.TTF") ;
//}
//
//@font-face
//{
// font-family: 'GOTHIC';
// src: url("../../../assets/font/GOTHIC.TTF") ;
//}
//
//@font-face
//{
// font-family: 'GOTHICB';
// src: url("../../../assets/font/GOTHICB.TTF") ;
//}
//
//@font-face
//{
// font-family: 'GOTHICBI';
// src: url("../../../assets/font/GOTHICBI.TTF") ;
//}
//
//@font-face
//{
// font-family: 'GOTHICI';
// src: url("../../../assets/font/GOTHICI.TTF") ;
//}
//
//@font-face
//{
// font-family: 'MMTextBook';
// src: url("../../../assets/font/MMTextBook.otf") ;
//}
//
//@font-face
//{
// font-family: 'MMTextBook-Bold';
// src: url("../../../assets/font/MMTextBook-Bold.otf") ;
//}
//
//@font-face
//{
// font-family: 'MMTextBook-BoldItalic';
// src: url("../../../assets/font/MMTextBook-BoldItalic.otf") ;
//}
//
//@font-face
//{
// font-family: 'MMTextBook-Italic';
// src: url("../../../assets/font/MMTextBook-Italic.otf") ;
//}
@mixin tool-btn {
border: 1px solid #ddd;
display: flex;
......
......@@ -6,3 +6,28 @@
height: 100%;
}
.add-btn-box{
margin: 5vw;
width: 20vw;
height: 10vw;
}
.item-box {
margin: 5vw;
width: 50vw;
border: 1px solid #ccc;
border-radius: 10px;
display: flex;
flex-direction: column;
justify-content: center;
}
.item-line{
display: flex;
align-items: center;
margin: 5px
}
......@@ -2,26 +2,79 @@
<div class="model-content">
<div style="position: absolute; left: 200px; top: 100px; width: 800px;">
<input type="text" nz-input [(ngModel)]="item.text" (blur)="save()">
<app-upload-image-with-preview
[picUrl]="item.pic_url"
(imageUploaded)="onImageUploadSuccess($event, 'pic_url')"
></app-upload-image-with-preview>
<app-audio-recorder
[audioUrl]="item.audio_url"
(audioUploaded)="onAudioUploadSuccess($event, 'audio_url')"
></app-audio-recorder>
<app-custom-hot-zone></app-custom-hot-zone>
<app-upload-video></app-upload-video>
<app-lesson-title-config></app-lesson-title-config>
<div *ngFor="let it of wordArr; let i = index">
<div class="item-box" >
<label style="margin:auto; font-size: 20px"> 组-{{i+1}}: </label>
<div class="item-line">
<label style="width: 60px; margin-left: 5px"> 单词: </label>
<input style="width: 70%" type="text" nz-input [(ngModel)]="it.word" (blur)="save()">
<label style="width: 60px; margin-left: 10px"> 时间: </label>
<nz-input-number [(ngModel)]="it.time" [nzMin]="1" [nzMax]="600" [nzStep]="1" (nzBlur)="save()"></nz-input-number>
</div>
<!--<div class="item-line">-->
<!--<label style="width: 60px; margin-left: 5px"> 提示: </label>-->
<!--<input type="text" nz-input [(ngModel)]="it.info" (blur)="save()">-->
<!--</div>-->
<div class="item-line">
<button style=" margin: auto; margin-bottom: 5px; width: 100px; height: 30px;" nz-button nzType="danger"
(click)="deleteItem(i)">
<i nz-icon nzType="close-circle" nzTheme="outline"></i>
删除
</button>
</div>
</div>
</div>
<div class="add-btn-box" >
<button style=" margin: auto; width: 100%; height: 100%;" nz-button nzType="dashed" class="add-btn"
(click)="addItem()">
<i nz-icon nzType="plus-circle" nzTheme="outline"></i>
Add
</button>
</div>
<!--<div style="position: absolute; left: 200px; top: 100px; width: 800px;">-->
<!--<input type="text" nz-input [(ngModel)]="item.text" (blur)="save()">-->
<!--<app-upload-image-with-preview-->
<!--[picUrl]="item.pic_url"-->
<!--(imageUploaded)="onImageUploadSuccess($event, 'pic_url')"-->
<!--&gt;</app-upload-image-with-preview>-->
<!--<app-audio-recorder-->
<!--[audioUrl]="item.audio_url"-->
<!--(audioUploaded)="onAudioUploadSuccess($event, 'audio_url')"-->
<!--&gt;</app-audio-recorder>-->
<!--<app-custom-hot-zone></app-custom-hot-zone>-->
<!--<app-upload-video></app-upload-video>-->
<!--<app-lesson-title-config></app-lesson-title-config>-->
<!--</div>-->
<!-- div style="position: absolute; left: 1000px; top: 100px; width: 300px;">
<input type="text" nz-input [(ngModel)]="item.text_2" (blur)="save()">
......
......@@ -10,10 +10,12 @@ import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, Ap
export class FormComponent implements OnInit, OnChanges, OnDestroy {
// 储存数据用
saveKey = "test_0011";
saveKey = "hw_online_005";
// 储存对象
item;
wordArr = [];
constructor(private appRef: ApplicationRef) {
......@@ -49,8 +51,33 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
init() {
this.wordArr = [];
if (this.item.wordArr) {
this.wordArr = this.item.wordArr;
} else {
this.item.wordArr = this.wordArr;
}
}
addItem() {
const item = {
word: '',
info: '',
time: 20
}
this.wordArr.push(item);
this.save();
}
deleteItem(index) {
this.wordArr.splice(index, 1);
this.save();
}
/**
* 储存图片数据
......@@ -79,6 +106,8 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
*/
save() {
(<any> window).courseware.setData(this.item, null, this.saveKey);
console.log('save data: ', this.item);
this.refresh();
}
......
......@@ -69,6 +69,13 @@ export class MySprite extends Sprite {
img;
_z = 0;
_showRect;
_bitmapFlag = false;
_offCanvas;
_offCtx;
init(imgObj = null, anchorX: number = 0.5, anchorY: number = 0.5) {
......@@ -87,6 +94,10 @@ export class MySprite extends Sprite {
}
setShowRect(rect) {
this._showRect = rect;
}
setShadow(offX, offY, blur, color = 'rgba(0, 0, 0, 0.3)') {
......@@ -103,6 +114,8 @@ export class MySprite extends Sprite {
}
update($event = null) {
if (!this.visible && this.childDepandVisible) {
return;
......@@ -139,21 +152,21 @@ export class MySprite extends Sprite {
if (this._radius) {
const r = this._radius;
const w = this.width;
const h = this.height;
this.ctx.lineTo(-w / 2, h / 2); // 创建水平线
this.ctx.arcTo(-w / 2, -h / 2, -w / 2 + r, -h / 2, r);
this.ctx.arcTo(w / 2, -h / 2, w / 2, -h / 2 + r, r);
this.ctx.arcTo(w / 2, h / 2, w / 2 - r, h / 2, r);
this.ctx.arcTo(-w / 2, h / 2, -w / 2, h / 2 - r, r);
this.ctx.clip();
}
//
// if (this._radius) {
//
// const r = this._radius;
// const w = this.width;
// const h = this.height;
//
// this.ctx.lineTo(-w / 2, h / 2); // 创建水平线
// this.ctx.arcTo(-w / 2, -h / 2, -w / 2 + r, -h / 2, r);
// this.ctx.arcTo(w / 2, -h / 2, w / 2, -h / 2 + r, r);
// this.ctx.arcTo(w / 2, h / 2, w / 2 - r, h / 2, r);
// this.ctx.arcTo(-w / 2, h / 2, -w / 2, h / 2 - r, r);
//
// this.ctx.clip();
// }
}
......@@ -176,7 +189,13 @@ export class MySprite extends Sprite {
if (this.img) {
this.ctx.drawImage(this.img, this._offX, this._offY);
if (this._showRect) {
const rect = this._showRect;
this.ctx.drawImage(this.img, rect.x, rect.y, rect.width, rect.height, this._offX, this._offY + rect.y, this.width, rect.height);
} else {
this.ctx.drawImage(this.img, this._offX, this._offY);
}
}
......@@ -257,6 +276,13 @@ export class MySprite extends Sprite {
}
}
set btimapFlag(v) {
this._bitmapFlag = v;
}
get btimapFlag() {
return this._bitmapFlag;
}
set alpha(v) {
this._alpha = v;
if (this.childDepandAlpha) {
......@@ -354,6 +380,87 @@ export class MySprite extends Sprite {
}
export class RoundSprite extends MySprite {
_newCtx;
init(imgObj = null, anchorX: number = 0.5, anchorY: number = 0.5) {
if (imgObj) {
this.img = imgObj;
this.width = this.img.width;
this.height = this.img.height;
}
this.anchorX = anchorX;
this.anchorY = anchorY;
const canvas = window['curCanvas'];
const w = canvas.nativeElement.width;
const h = canvas.nativeElement.height;
this._offCanvas = document.createElement('canvas');
this._offCanvas.width = w;
this._offCanvas.height = h;
this._offCtx = this._offCanvas.getContext('2d');
// this._newCtx = this.ctx;
// this.ctx = this._offCtx;
}
drawSelf() {
//
// if (this._shadowFlag) {
//
// this.ctx.shadowOffsetX = this._shadowOffsetX;
// this.ctx.shadowOffsetY = this._shadowOffsetY;
// this.ctx.shadowBlur = this._shadowBlur;
// this.ctx.shadowColor = this._shadowColor;
// } else {
// this.ctx.shadowOffsetX = 0;
// this.ctx.shadowOffsetY = 0;
// this.ctx.shadowBlur = null;
// this.ctx.shadowColor = null;
// }
if (this._radius) {
const r = this._radius;
const w = this.width;
const h = this.height;
const x = -this._offX;
const y = -this._offY;
this._offCtx.lineTo(x - w / 2, y + h / 2); // 创建水平线
this._offCtx.arcTo(x - w / 2, y - h / 2, x - w / 2 + r, y - h / 2, r);
this._offCtx.arcTo(x + w / 2, y - h / 2, x + w / 2, y - h / 2 + r, r);
this._offCtx.arcTo(x + w / 2, y + h / 2, x + w / 2 - r, y + h / 2, r);
this._offCtx.arcTo(x - w / 2, y + h / 2, x - w / 2, y + h / 2 - r, r);
this._offCtx.clip();
}
if (this.img) {
this._offCtx.drawImage(this.img, 0, 0);
this.ctx.drawImage(this._offCanvas,this._offX, this._offX);
}
}
}
......@@ -530,7 +637,7 @@ export class Label extends MySprite {
this.ctx.save();
this.ctx.font = `${this.fontSize}px ${this.fontName}`;
this.ctx.font = `${this.fontSize * this.scaleX}px ${this.fontName}`;
this.ctx.textAlign = this.textAlign;
this.ctx.textBaseline = 'middle';
this.ctx.fontWeight = this.fontWeight;
......@@ -903,6 +1010,181 @@ export class ShapeRect extends MySprite {
export class Line extends MySprite {
lineWidth = 5;
lineColor = '#000000';
_pointArr = [];
roundFlag = true;
_pointS = 1;
imgObj;
bitMap;
_offCtx;
_offCanvas;
lastPointIndex = 0;
init() {
const canvas = window['curCanvas'];
const w = canvas.nativeElement.width;
const h = canvas.nativeElement.height;
console.log('w: ', w);
console.log('h: ', h);
this._offCanvas = document.createElement('canvas');
this._offCanvas.width = w;
this._offCanvas.height = h;
// this._offCanvas = _offCanvas;
// this._offCtx = this._offCanvas.getContext('2d');
// this._offCanvas = new OffscreenCanvas(w, h);
this._offCtx = this._offCanvas.getContext('2d');
}
addPoint(x, y) {
this._pointArr.push([x, y]);
if (this._pointArr.length < 2) {
return;
}
//
// const lastP = this._pointArr[this._pointArr.length - 1];
//
//
// const context = this._offCtx;
// context.moveTo (lastP[0], lastP[1]); // 设置起点状态
// context.lineTo (x, y); // 设置末端状态
//
// context.lineWidth = this.lineWidth; //设置线宽状态
// context.strokeStyle = this.lineColor;
// context.stroke();
//
//
// this.bitMap = this._offCanvas.transferToImageBitmap();
// const tmpLine = new MySprite(this._offCtx);
// tmpLine.init(this.imgObj);
// tmpLine.anchorY = 1;
// tmpLine.anchorX = 0.5;
// tmpLine.x = lastP[0];
// tmpLine.y = lastP[1];
//
// const disH = getPosDistance(lastP[0], lastP[1], x, y);
// tmpLine.scaleX = this.lineWidth / tmpLine.width;
// tmpLine.scaleY = disH / tmpLine.height * 1.1;
//
// const angle = getAngleByPos(lastP[0], lastP[1], x, y);
// tmpLine.rotation = angle;
//
// this.addChild(tmpLine);
}
setPointArr(arr, imgObj) {
this.removeChildren();
if (arr.length < 2) {
return;
}
let p1 = arr[0];
let p2;
for (let i = 1; i < arr.length; i++) {
p2 = arr[i];
const tmpLine = new MySprite();
tmpLine.init(imgObj);
tmpLine.anchorY = 1;
tmpLine.anchorX = 0.5;
tmpLine.x = p1[0];
tmpLine.y = p1[1];
const disH = getPosDistance(p1[0], p1[1], p2[0], p2[1]);
tmpLine.scaleX = this.lineWidth / tmpLine.width;
tmpLine.scaleY = disH / tmpLine.height * 1.1;
const angle = getAngleByPos(p1[0], p1[1], p2[0], p2[1]);
tmpLine.rotation = angle;
this.addChild(tmpLine);
p1 = p2;
}
}
drawLine() {
if (this._pointArr.length < 2) {
return;
}
const curMaxPointIndex = this._pointArr.length - 1;
if (curMaxPointIndex > this.lastPointIndex) {
const arr = this._pointArr;
const context = this._offCtx;
context.moveTo (arr[this.lastPointIndex][0] * this._pointS, arr[this.lastPointIndex][1] * this._pointS); // 设置起点状态
for (let i = this.lastPointIndex + 1; i < arr.length; i++) {
context.lineTo (arr[i][0] * this._pointS, arr[i][1] * this._pointS); // 设置末端状态
}
if (this.roundFlag) {
context.lineCap = "round";
}
context.lineWidth = this.lineWidth; //设置线宽状态
context.strokeStyle = this.lineColor;
context.stroke();
this.lastPointIndex = curMaxPointIndex;
// this.bitMap = this._offCanvas.transferToImageBitmap();
}
// this.ctx.drawImage(this.bitMap, this._offX, this._offY);
this.ctx.drawImage(this._offCanvas, this._offX, this._offY);
}
drawSelf() {
super.drawSelf();
this.drawLine();
// if (this.img) {
// this.ctx.drawImage(this._offCanvas, 0, 0, this.width, this.height);
// }
// if (this.bitMap) {
// this.bitMap = this._offCanvas.transferToImageBitmap();
// this.ctx.drawImage(this.bitMap, 0, 0, this.width, this.height);
// }
}
}
export class ShapeCircle extends MySprite {
fillColor = '#FF0000';
......@@ -931,6 +1213,9 @@ export class ShapeCircle extends MySprite {
}
}
export class ShapeRectNew extends MySprite {
......@@ -1365,6 +1650,9 @@ export function showStar(item, time = 0.8, callBack = null, easing = null) {
export function randomSortByArr(arr) {
if (!arr) {
return;
}
const newArr = [];
const tmpArr = arr.concat();
while (tmpArr.length > 0) {
......
This diff is collapsed.
const res = [
// ['bg', "assets/play/bg.jpg"],
['btn_left', "assets/play/btn_left.png"],
['btn_right', "assets/play/btn_right.png"],
['bg', "assets/play/bg.png"],
['title', "assets/play/title.png"],
['clock', "assets/play/clock.png"],
['clock_bg', "assets/play/clock_bg.png"],
['clock_bar_1', "assets/play/clock_bar_1.png"],
['clock_bar_2', "assets/play/clock_bar_2.png"],
['clock_bar_3', "assets/play/clock_bar_3.png"],
['clean_btn', "assets/play/clean_btn.png"],
['artboard', "assets/play/artboard.png"],
['head_bg', "assets/play/head_bg.png"],
['your_turn', "assets/play/your_turn.png"],
['num_1', "assets/play/num/1.png"],
['num_2', "assets/play/num/2.png"],
['num_3', "assets/play/num/3.png"],
['brush_1', "assets/play/brush/1.png"],
['brush_2', "assets/play/brush/2.png"],
['brush_3', "assets/play/brush/3.png"],
['brush_4', "assets/play/brush/4.png"],
['brush_5', "assets/play/brush/5.png"],
['artboard_guess', "assets/play/artboard_guess.png"],
['text_guess', "assets/play/text_guess.png"],
['text_guess_2', "assets/play/text_guess_2.png"],
['letter_bg', "assets/play/letter_bg.png"],
['btn_cancle', "assets/play/btn_cancle.png"],
['btn_ok', "assets/play/btn_ok.png"],
['text_guess_wrong', "assets/play/text_guess_wrong.png"],
['text_guess_right', "assets/play/text_guess_right.png"],
['me', "assets/play/me.png"],
['default_icon', "assets/play/default_icon.png"],
['cover', "assets/play/cover.jpg"],
['start_btn', "assets/play/start_btn.png"],
['right_icon', "assets/play/right_icon.png"],
['petal_1', "assets/play/petal_1.png"],
['petal_2', "assets/play/petal_2.png"],
['petal_3', "assets/play/petal_3.png"],
['head_1', "assets/play/head/1.png"],
['head_2', "assets/play/head/2.png"],
['head_3', "assets/play/head/3.png"],
['head_4', "assets/play/head/4.png"],
['head_5', "assets/play/head/5.png"],
['head_6', "assets/play/head/6.png"],
['head_7', "assets/play/head/7.png"],
['head_8', "assets/play/head/8.png"],
['head_9', "assets/play/head/9.png"],
['t_right', "assets/play/teacher/right.png"],
['t_arrow', "assets/play/teacher/arrow.png"],
['brush_line', "assets/play/brush_line.jpg"],
// ['text_bg', "assets/play/text_bg.png"],
];
......@@ -11,7 +75,14 @@ const res = [
const resAudio = [
['click', "assets/play/music/click.mp3"],
// ['click', "assets/play/music/click.mp3"],
['brush_change', "assets/play/music/brush_change.mp3"],
['clean', "assets/play/music/clean.mp3"],
['countdown', "assets/play/music/countdown.mp3"],
['finish', "assets/play/music/finish.mp3"],
['right', "assets/play/music/right.mp3"],
['wrong', "assets/play/music/wrong.mp3"],
['tip', "assets/play/music/tip.mp3"],
];
......
......@@ -7,7 +7,7 @@
<!-- <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<script type="text/javascript" src="https://staging-teach.cdn.ireadabc.com/h5template/h5-static-lib/js/air.js"></script>
<script type="text/javascript" src="https://staging-teach.cdn.ireadabc.com/h5template/h5-static-lib/js/air_online.js"></script>
</head>
<body>
......
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