Commit 0fe5f9bf authored by Li Mingzhe's avatar Li Mingzhe

feat: 首次提交

parent 8a51c964
<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 == '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>
</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'" type="text" nz-input [(ngModel)]="it.text" (blur)="save()">
<app-upload-image-with-preview
*ngIf="item.answerType == 'pic'"
[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 = "pu06";
// 储存对象
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,41 @@ 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) {
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', "assets/play/bg.png"],
['oven', "assets/play/oven.png"],
['question_text_bg', "assets/play/question_text_bg.png"],
['light', "assets/play/light.png"],
['btn_play', "assets/play/player/btn_play.png"],
['btn_pause', "assets/play/player/btn_pause.png"],
['bar_top', "assets/play/player/bar_top.png"],
['bar_bottom', "assets/play/player/bar_bottom.png"],
['bar_btn', "assets/play/player/bar_btn.png"],
['player_cake', "assets/play/player/cake.png"],
['video_pause', "assets/play/video_pause.png"],
['video_play', "assets/play/video_play.png"],
['text_bg', "assets/play/text_bg.png"],
['text_bg_right', "assets/play/text_bg_right.png"],
['text_1', "assets/play/text_1.png"],
['text_2', "assets/play/text_2.png"],
['text_3', "assets/play/text_3.png"],
['text_4', "assets/play/text_4.png"],
['pic_bg', "assets/play/pic_bg.png"],
['pic_icon', "assets/play/pic_icon.png"],
['pic_bg_right', "assets/play/pic_bg_right.png"],
['finish_light', "assets/play/finish_light.png"],
['finish_cake', "assets/play/finish_cake.png"],
['petal_1', "assets/play/particle/1.png"],
['petal_2', "assets/play/particle/2.png"],
['petal_3', "assets/play/particle/3.png"],
['petal_4', "assets/play/particle/4.png"],
['petal_5', "assets/play/particle/5.png"],
['petal_6', "assets/play/particle/6.png"],
];
......@@ -11,7 +46,9 @@ const res = [
const resAudio = [
['click', "assets/play/music/click.mp3"],
['wrong', "assets/play/music/wrong.mp3"],
['right', "assets/play/music/right.mp3"],
['finish', "assets/play/music/finish.mp3"],
];
......
File mode changed from 100644 to 100755
src/assets/play/text_bg.png

293 Bytes | W: | H:

src/assets/play/text_bg.png

5.6 KB | W: | H:

src/assets/play/text_bg.png
src/assets/play/text_bg.png
src/assets/play/text_bg.png
src/assets/play/text_bg.png
  • 2-up
  • Swipe
  • Onion skin
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