Commit 8eb9b89a authored by 李维's avatar 李维

dev done

parent 8a51c964
......@@ -31,7 +31,8 @@
"rxjs": "~6.5.4",
"spark-md5": "^3.0.0",
"tslib": "^1.10.0",
"zone.js": "~0.10.2"
"zone.js": "~0.10.2",
"node-sass": "^4.0.0"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.900.3",
......
<div class="model-content">
<div style="padding: 30px">
<div style="position: absolute; left: 200px; top: 100px; width: 800px;">
<div style="display: flex; align-items: center; ">
<h2> 题干类型: </h2>
<nz-radio-group [(ngModel)]="item.questionType" style="margin-left: 20px; margin-top: -11px" (ngModelChange)="save()">
<label nz-radio nzValue="text">文本</label>
<label nz-radio nzValue="pic">图片</label>
<label nz-radio nzValue="audio">音频</label>
<label nz-radio nzValue="video">视频</label>
</nz-radio-group>
</div>
<div style="width: 700px">
<div *ngIf="item.questionType == 'text'">
<input type="text" nz-input [(ngModel)]="item.text" (blur)="save()">
</div>
<div *ngIf="item.questionType == 'pic'" style="width: 80%">
<app-upload-image-with-preview
[picUrl]="item.pic_url"
(imageUploaded)="onImageUploadSuccess($event, 'pic_url')"
></app-upload-image-with-preview>
</div>
<div *ngIf="item.questionType == 'text' || item.questionType == 'pic'" style="margin-top: 10px;">
<span>短音频</span>
<app-audio-recorder
[audioUrl]="item.short_audio_url"
(audioUploaded)="onAudioUploadSuccess($event, 'short_audio_url')"
></app-audio-recorder>
</div>
<div *ngIf="item.questionType == 'audio'">
<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>
<div *ngIf="item.questionType == 'video'">
<app-upload-video
(videoUploaded)="onVideoUploadSuccess($event)"
[item]="item"
[videoUrl]="item.video_url"></app-upload-video>
</div>
</div>
</div>
<nz-divider style=" margin-top: 80px; margin-bottom: 80px;"></nz-divider>
<div style="display: flex; align-items: center;">
<h2> 答案类型: </h2>
<nz-radio-group [(ngModel)]="item.answerType" style="margin-left: 20px; margin-top: -11px" (ngModelChange)="save()">
<label nz-radio nzValue="text">文本</label>
<label nz-radio nzValue="pic">图片</label>
<label nz-radio nzValue="pic-text">图片-文字</label>
</nz-radio-group>
</div>
<div *ngFor="let it of item.answerArr; let i = index">
<div style="margin-bottom: 30px; width : 500px; border: 1px solid #ccc; border-radius: 10px; padding: 5px;">
<span> 答案{{i+1}}: </span>
<nz-radio-group style="margin-left: 20px; margin-bottom: 5px;" [(ngModel)]="it.answerRight" (ngModelChange)="save()">
<label nz-radio nzValue="0">错误</label>
<label nz-radio nzValue="1">正确</label>
<button style="margin-left: 200px" nz-button nzType="danger" nzsize="small" (click)="deleteAnswer(i)">删除</button>
</nz-radio-group>
<input *ngIf="item.answerType == 'text' || item.answerType == 'pic-text'" type="text" nz-input [(ngModel)]="it.text" (blur)="save()" style="margin-bottom: 10px;">
<app-upload-image-with-preview
*ngIf="item.answerType == 'pic' || item.answerType == 'pic-text'"
[picUrl]="it.pic_url"
(imageUploaded)="onImageUploadSuccess($event, 'pic_url', it)"
></app-upload-image-with-preview>
</div>
</div>
</div>
<div *ngIf="item.answerArr.length < 4" style="padding: 30px;" (click)="addAnswer()">
<button nz-button nzType="dashed" style="width: 200px; height: 100px; margin-top: -30px">添加答案</button>
</div>
</div>
......@@ -10,7 +10,7 @@ import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, Ap
export class FormComponent implements OnInit, OnChanges, OnDestroy {
// 储存数据用
saveKey = "test_0011";
saveKey = "LST02";
// 储存对象
item;
......@@ -23,7 +23,6 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
ngOnInit() {
this.item = {};
// 获取存储的数据
(<any> window).courseware.getData((data) => {
......@@ -51,6 +50,33 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
init() {
if (!this.item.questionType) {
this.item.questionType = 'text';
this.item.answerType = 'text';
this.item.answerArr = [];
// for (let i = 0; i < 4; i++) {
// this.item.answerArr.push({
// text: '',
// pic_url: '',
// answerRight: '0',
// });
// }
}
}
deleteAnswer(i) {
this.item.answerArr.splice(i, 1);
this.save();
}
addAnswer() {
this.item.answerArr.push({
text: '',
pic_url: '',
answerRight: '0',
});
this.save();
}
......@@ -58,9 +84,12 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
* 储存图片数据
* @param e
*/
onImageUploadSuccess(e, key) {
onImageUploadSuccess(e, key, item = null) {
this.item[key] = e.url;
if (!item) {
item = this.item;
}
item[key] = e.url;
this.save();
}
......@@ -75,6 +104,10 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
}
onVideoUploadSuccess(e) {
this.item.video_url = e.url;
this.save();
}
/**
* 储存数据
......
......@@ -4,6 +4,7 @@ import TWEEN from '@tweenjs/tween.js';
interface AirWindow extends Window {
air: any;
curCtx: any;
curImages: any;
}
declare let window: AirWindow;
......@@ -36,7 +37,6 @@ class Sprite {
export class MySprite extends Sprite {
_width = 0;
......@@ -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,10 +189,14 @@ export class MySprite extends Sprite {
if (this.img) {
if (this._showRect) {
const rect = this._showRect;
this.ctx.drawImage(this.img, rect.x, rect.y, rect.width, rect.height, this._offX + rect.x, this._offY + rect.y, rect.width, rect.height);
} else {
this.ctx.drawImage(this.img, this._offX, this._offY);
}
}
}
......@@ -257,6 +274,13 @@ export class MySprite extends Sprite {
}
}
set bitmapFlag(v) {
this._bitmapFlag = v;
}
get bitmapFlag() {
return this._bitmapFlag;
}
set alpha(v) {
this._alpha = v;
if (this.childDepandAlpha) {
......@@ -305,7 +329,6 @@ export class MySprite extends Sprite {
getBoundingBox() {
const getParentData = (item) => {
let px = item.x;
......@@ -343,11 +366,6 @@ export class MySprite extends Sprite {
const width = this.width * Math.abs(data.sx);
const height = this.height * Math.abs(data.sy);
// const x = this.x + this._offX * Math.abs(this.scaleX);
// const y = this.y + this._offY * Math.abs(this.scaleY);
// const width = this.width * Math.abs(this.scaleX);
// const height = this.height * Math.abs(this.scaleY);
return {x, y, width, height};
}
......@@ -759,6 +777,7 @@ export class RichText extends Label {
disH = 30;
offW = 10;
constructor(ctx?: any) {
super(ctx);
......@@ -788,7 +807,7 @@ export class RichText extends Label {
const chr = this.text.split(' ');
let temp = '';
const row = [];
const w = selfW - 80;
const w = selfW - this.offW * 2;
const disH = (this.fontSize + this.disH) * this.scaleY;
......@@ -1020,7 +1039,7 @@ export class MyAnimation extends MySprite {
loop = false;
playEndFunc;
delayPerUnit = 1;
delayPerUnit = 0.07;
restartFlag = false;
reverseFlag = false;
......@@ -1109,8 +1128,9 @@ export class MyAnimation extends MySprite {
this.frameArr[this.frameIndex].visible = true;
if (this.playEndFunc) {
this.playEndFunc();
const func = this.playEndFunc;
this.playEndFunc = null;
func();
}
}
......@@ -1200,7 +1220,7 @@ export function tweenChange(item, obj, time = 0.8, callBack = null, easing = nul
export function rotateItem(item, rotation, time = 0.8, callBack = null, easing = null) {
export function rotateItem(item, rotation, time = 0.8, callBack = null, easing = null, loop = false) {
const tween = new TWEEN.Tween(item).to({ rotation }, time * 1000);
......@@ -1208,7 +1228,14 @@ export function rotateItem(item, rotation, time = 0.8, callBack = null, easing =
tween.onComplete(() => {
callBack();
});
} else if (loop) {
const speed = (rotation - item.rotation) / time;
tween.onComplete(() => {
item.rotation %= 360;
rotateItem(item, item.rotation + speed * time, time, null, easing, true);
});
}
if (easing) {
tween.easing(easing);
}
......@@ -1525,10 +1552,15 @@ export function formatTime(fmt, date) {
return fmt;
}
export function getMinScale(item, maxLen) {
const sx = maxLen / item.width;
const sy = maxLen / item.height;
export function getMinScale(item, maxW, maxH = null) {
if (!maxH) {
maxH = maxW;
}
const sx = maxW / item.width;
const sy = maxH / item.height;
const minS = Math.min(sx, sy);
return minS;
}
......@@ -1571,6 +1603,46 @@ export function jelly(item, time = 0.7) {
run();
}
export function jellyPop(item, time) {
if (item.jellyTween) {
TWEEN.remove(item.jellyTween);
}
const t = time / 6;
const baseSX = item.scaleX;
const baseSY = item.scaleY;
let index = 0;
const run = () => {
if (index >= arr.length) {
item.jellyTween = null;
return;
}
const data = arr[index];
const t = tweenChange(item, {scaleX: data[0], scaleY: data[1]}, data[2], () => {
index ++;
run();
}, TWEEN.Easing.Sinusoidal.InOut);
item.jellyTween = t;
};
const arr = [
[baseSX * 1.3, baseSY * 1.3, t],
[baseSX * 0.85, baseSY * 0.85, t * 1],
[baseSX * 1.1, baseSY * 1.1, t * 1],
[baseSX * 0.95, baseSY * 0.95, t * 1],
[baseSX * 1.02, baseSY * 1.02, t * 1],
[baseSX * 1, baseSY * 1, t * 1],
];
item.setScaleXY(0);
run();
}
export function showPopParticle(img, pos, parent, num = 20, minLen = 40, maxLen = 80, showTime = 0.4) {
......@@ -1672,5 +1744,42 @@ export function shake(item, time = 0.5, callback = null, rate = 1) {
}
export function getMaxScale(item, maxW, maxH) {
const sx = maxW / item.width;
const sy = maxH / item.height;
const maxS = Math.max(sx, sy);
return maxS;
}
export function createSprite(key) {
console.log("createSprite", key)
const image = window.curImages;
const spr = new MySprite();
spr.init(image.get(key));
return spr;
}
export class MyVideo extends MySprite {
element;
initVideoElement(videoElement) {
this.element = videoElement;
this.width = this.element.videoWidth;
this.height = this.element.videoHeight;
this.element.currentTime = 0.01;
}
drawSelf() {
super.drawSelf();
this.ctx.drawImage(this.element, 0, 0, this.width, this.height);
}
}
// --------------- custom class --------------------
......@@ -13,7 +13,7 @@
@font-face
{
font-family: 'BRLNSDB';
src: url("../../assets/font/BRLNSDB.TTF") ;
font-family: 'MMTextBook-Bold';
src: url("../../assets/font/MMTextBook-Bold.otf") ;
}
<div style="display: none">
<video [src]="data.video_url" #videoNode></video>
</div>
<div class="game-container" #wrap>
<canvas id="canvas" #canvas></canvas>
</div>
<label style="position: absolute; top: 0px; opacity: 0; font-family: 'MMTextBook-Bold'">1</label>
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"],
// ['text_bg', "assets/play/text_bg.png"],
['bg_bg', "assets/play/bg_bg.png"],
['bg_bgdi', "assets/play/bg_bgdi.png"],
['bg_bgsky', "assets/play/bg_bgsky.png"],
['bg_bgtree', "assets/play/bg_bgtree.png"],
['bg_tigan', "assets/play/bg_tigan.png"],
['bg_yinpindi', "assets/play/bg_yinpindi.png"],
['petal_1', "assets/play/particle/1.png"],
['petal_2', "assets/play/particle/2.png"],
['petal_3', "assets/play/particle/3.png"],
['btn_yinpin (1)', "assets/play/btn_yinpin (1).png"],
['btn_yinpin (2)', "assets/play/btn_yinpin (2).png"],
['btn_yinpin (3)', "assets/play/btn_yinpin (3).png"],
['btn_yinpin (4)', "assets/play/btn_yinpin (4).png"],
['btn_laba (1)', "assets/play/btn_laba (1).png"],
['btn_laba (2)', "assets/play/btn_laba (2).png"],
['btn_laba (3)', "assets/play/btn_laba (3).png"],
['btn_laba (4)', "assets/play/btn_laba (4).png"],
['bg_xuan1', "assets/play/bg_xuan1.png"],
['bg_xuan2', "assets/play/bg_xuan2.png"],
['bg_songshu1', "assets/play/bg_songshu1.png"],
['bg_songshu2', "assets/play/bg_songshu2.png"],
['bg_xuan3pic', "assets/play/bg_xuan3pic.png"],
['bg_xuan4', "assets/play/bg_xuan4.png"],
['bg_worddi', "assets/play/bg_worddi.png"],
['bg_exc', "assets/play/bg_exc.png"],
['icon_star1', "assets/play/icon_star1.png"],
['icon_star2', "assets/play/icon_star2.png"],
['bg_yinpin', "assets/play/bg_yinpin.png"],
['demo_main', "assets/play/demo_main.png"],
];
const resAudio = [
['click', "assets/play/music/click.mp3"],
['cuowu', "assets/play/music/cuowu.mp3"],
['sahua', "assets/play/music/sahua.mp3"],
['songshu', "assets/play/music/songshu.mp3"],
['zhengque', "assets/play/music/zhengque.mp3"],
];
......
......@@ -4,6 +4,12 @@
<meta charset="utf-8">
<title>NgOne</title>
<base href="/">
<style>
html, body{
width: 100%;
height: 100%;
}
</style>
<!-- <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">
......
/* You can add global styles to this file, and also import other style files */
@import "~ng-zorro-antd/ng-zorro-antd.min.css";
\ No newline at end of file
......@@ -21,6 +21,7 @@
]
},
"angularCompilerOptions": {
"enableIvy": false,
"fullTemplateTypeCheck": true,
"strictInjectionParameters": true
}
......
......@@ -3,6 +3,7 @@
"rules": {
"array-type": false,
"arrow-parens": false,
"no-string-literal": false,
"deprecation": {
"severity": "warning"
},
......
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