Commit 825a121d authored by limingzhe's avatar limingzhe

feat: 首次提交

parent 3695f7ce
This diff is collapsed.
<div class="p-image-children-editor">
<h5 style="margin-left: 2.5%;"> preview: </h5>
<div class="preview-box" #wrap>
<canvas id="canvas" #canvas></canvas>
</div>
<div nz-row nzType="flex" nzAlign="middle">
<div nz-col nzSpan="5" nzOffset="1">
......@@ -20,41 +17,53 @@
(imageUploaded)="onBackgroundUploadSuccess($event)">
</app-upload-image-with-preview>
</div>
</div>
<div nz-col nzSpan="5" nzOffset="1" class="img-box"
*ngFor="let it of hotZoneArr; let i = index">
<div
style="margin: auto; padding: 5px; margin-top: 30px; width:90%; border: 2px dashed #ddd; border-radius: 10px">
<span style="margin-left: 40%;"> item-{{i + 1}}
</span>
<button style="float: right;" nz-button nzType="danger" nzSize="small" (click)="deleteBtnClick(i)">
X
</button>
<div nz-col nzSpan="5" nzOffset="1" class="img-box"
*ngFor="let it of hotZoneArr; let i = index" >
<div style=" height: 40px;">
<h5> item-{{i+1}}
<nz-divider style="margin-top: 10px;"></nz-divider>
<i style="margin-left: 20px; margin-top: 2px; float: right; cursor:pointer" (click)="deleteItem($event, i)"
nz-icon [nzTheme]="'twotone'" [nzType]="'close-circle'" [nzTwotoneColor]="'#ff0000'"></i>
</h5>
</div>
<div style="margin-top: -20px; margin-bottom: 5px; width: 100%;">
<nz-radio-group [ngModel]="it.itemType" (ngModelChange)="radioChange($event, it)" style="display: flex; align-items: center; justify-content: center">
<label *ngIf="isHasRect" nz-radio nzValue="rect">矩形</label>
<label *ngIf="isHasPic" nz-radio nzValue="pic">图片</label>
<label *ngIf="isHasText" nz-radio nzValue="text">文本</label>
</nz-radio-group>
</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 *ngIf="it.itemType == 'pic'">
<app-upload-image-with-preview
[picUrl]="it?.pic_url"
(imageUploaded)="onItemImgUploadSuccess($event, it)">
</app-upload-image-with-preview>
</div>
<div *ngIf="it.itemType == 'text'">
<input type="text" nz-input [(ngModel)]="it.text" (blur)="saveText(it)">
</div>
<!--<app-audio-recorder-->
<!--[audioUrl]="it.audio_url ? it.audio_url : null "-->
<!--(audioUploaded)="onAudioUploadSuccessByImg($event, it)"-->
<!--&gt;</app-audio-recorder>-->
<div *ngIf="isHasAudio" style="width: 100%; margin-top: 5px;">
<app-audio-recorder
[audioUrl]="it.audio_url"
(audioUploaded)="onItemAudioUploadSuccess($event, it)"
></app-audio-recorder>
</div>
</div>
</div>
<div nz-col nzSpan="5" nzOffset="1">
<div class="bg-box">
......@@ -75,7 +84,7 @@
<div class="save-box">
<button class="save-btn" nz-button nzType="primary" [nzSize]="'large'" nzShape="round"
(click)="saveClick()">
(click)="saveClick()" >
<i nz-icon nzType="save"></i>
Save
</button>
......@@ -83,7 +92,9 @@
</div>
</div>
<label style="opacity: 0; position: absolute; top: 0px; font-family: 'BRLNSR_1'">1</label>
......@@ -87,6 +87,13 @@ h5 {
@font-face
{
font-family: 'BRLNSR_1';
src: url("/assets/font/BRLNSR_1.TTF") ;
}
......
<div class="model-content">
<div style="padding: 20px">
<div style="position: absolute; left: 200px; top: 100px; width: 800px;">
<app-custom-hot-zone
[bgItem]="bgItem"
[hotZoneItemArr]="hotZoneItemArr"
[isHasPic]="false"
[isHasText]="false"
[isHasAudio]="false"
[defaultItemType]="'rect'"
(save)="saveData($event)"
<input type="text" nz-input [(ngModel)]="item.text" (blur)="save()">
></app-custom-hot-zone>
<app-upload-image-with-preview
[picUrl]="item.pic_url"
(imageUploaded)="onImageUploadSuccess($event, 'pic_url')"
></app-upload-image-with-preview>
<div style="margin-top: 30px; width: 500px; height: 150px; border: 2px solid #ccc; border-radius: 5px; padding: 10px">
<span style="margin-right: 10px"> 问题类型: </span>
<nz-radio-group [(ngModel)]="item.questionType" (ngModelChange)="onRadioChange($event)">
<label nz-radio nzValue="1">音频</label>
<label nz-radio nzValue="2">文本</label>
<label nz-radio nzValue="3">音频+文本</label>
</nz-radio-group>
<div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column">
<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>
<input *ngIf="item.questionType == 2 || item.questionType == 3" style="width: 90%; margin-bottom: 5px" type="text" nz-input [(ngModel)]="item.text" (blur)="save()">
<app-audio-recorder *ngIf="item.questionType == 1 || item.questionType == 3"
[audioUrl]="item.audio_url"
(audioUploaded)="onAudioUploadSuccess($event, 'audio_url')"
></app-audio-recorder>
</div>
</div>
</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>
\ No newline at end of file
import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, ApplicationRef, ChangeDetectorRef} from '@angular/core';
import {NzMessageService} from "ng-zorro-antd";
......@@ -10,12 +11,14 @@ import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, Ap
export class FormComponent implements OnInit, OnChanges, OnDestroy {
// 储存数据用
saveKey = "test_0011";
saveKey = "pu14";
// 储存对象
item;
bgItem = {};
hotZoneItemArr = [];
constructor(private appRef: ApplicationRef,private changeDetectorRef: ChangeDetectorRef) {
constructor(private appRef: ApplicationRef,private changeDetectorRef: ChangeDetectorRef, private message: NzMessageService) {
}
......@@ -24,10 +27,13 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
this.item = {};
console.log('in ngOnInit');
// 获取存储的数据
(<any> window).courseware.getData((data) => {
if (data) {
console.log('data: ', data);
this.item = data;
}
......@@ -51,6 +57,10 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
init() {
console.log('this.item: ' , this.item);
this.bgItem = this.item.bgItem || {};
this.hotZoneItemArr = this.item.hotZoneItemArr || [];
}
......@@ -74,12 +84,35 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
this.save();
}
onRadioChange(e) {
console.log('e: ', e);
this.save();
}
saveData(e) {
console.log(' in saveData e: ', e);
const {bgItem, hotZoneItemArr} = e;
this.bgItem = bgItem;
this.hotZoneItemArr = hotZoneItemArr;
this.item.bgItem = bgItem;
this.item.hotZoneItemArr = hotZoneItemArr;
this.save();
this.message.create(
'success',
'保存成功'
);
}
/**
* 储存数据
*/
save() {
console.log('saven ...');
(<any> window).courseware.setData(this.item, null, this.saveKey);
this.refresh();
}
......
......@@ -36,7 +36,6 @@ class Sprite {
export class MySprite extends Sprite {
_width = 0;
......@@ -69,6 +68,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 +93,10 @@ export class MySprite extends Sprite {
}
setShowRect(rect) {
this._showRect = rect;
}
setShadow(offX, offY, blur, color = 'rgba(0, 0, 0, 0.3)') {
......@@ -103,6 +113,8 @@ export class MySprite extends Sprite {
}
update($event = null) {
if (!this.visible && this.childDepandVisible) {
return;
......@@ -139,21 +151,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 +188,14 @@ 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 + rect.x, this._offY + rect.y, rect.width, rect.height);
} else {
this.ctx.drawImage(this.img, this._offX, this._offY);
}
}
}
......@@ -257,6 +273,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) {
......@@ -305,7 +328,6 @@ export class MySprite extends Sprite {
getBoundingBox() {
const getParentData = (item) => {
let px = item.x;
......@@ -343,11 +365,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};
}
......@@ -758,7 +775,8 @@ export class RichTextOld extends Label {
export class RichText extends Label {
disH = 30;
disH = 30;
offW = 10;
constructor(ctx?: any) {
super(ctx);
......@@ -788,7 +806,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;
......@@ -1103,14 +1121,17 @@ export class MyAnimation extends MySprite {
playEnd() {
console.log(' in playEnd');
this.playFlag = false;
this.curDelay = 0;
this.frameArr[this.frameIndex].visible = true;
if (this.playEndFunc) {
this.playEndFunc();
const func = this.playEndFunc;
this.playEndFunc = null;
func();
}
}
......@@ -1672,5 +1693,7 @@ export function shake(item, time = 0.5, callback = null, rate = 1) {
}
// --------------- custom class --------------------
......@@ -11,9 +11,10 @@
@font-face
{
font-family: 'BRLNSDB';
src: url("../../assets/font/BRLNSDB.TTF") ;
font-family: 'BRLNSDB_1';
src: url("/assets/font/BRLNSDB_1.TTF") ;
}
<div class="game-container" #wrap>
<canvas id="canvas" #canvas></canvas>
</div>
<label style="position: absolute; opacity: 0; top: 0px; font-family: 'BRLNSDB_1'">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"],
['pic_bg', "assets/play/pic_bg.png"],
['star', "assets/play/star.png"],
['shadow', "assets/play/shadow.png"],
['crack', "assets/play/crack.png"],
['text_bg_big', "assets/play/big/text_bg.png"],
['text_bg_small', "assets/play/small/text_bg.png"],
['btn_play_big', "assets/play/big/btn_play.png"],
['btn_pause_big', "assets/play/big/btn_pause.png"],
['btn_current_position_big', "assets/play/big/btn_current_position.png"],
['progressbar_bg_big', "assets/play/big/progressbar_bg.png"],
['progressbar_played_big', "assets/play/big/progressbar_played.png"],
['player_bg_big', "assets/play/big/player_bg.png"],
['player_top_big', "assets/play/big/player_top.png"],
['btn_play_small', "assets/play/small/btn_play.png"],
['btn_pause_small', "assets/play/small/btn_pause.png"],
['btn_current_position_small', "assets/play/small/btn_current_position.png"],
['progressbar_bg_small', "assets/play/small/progressbar_bg.png"],
['progressbar_played_small', "assets/play/small/progressbar_played.png"],
['player_bg_small', "assets/play/small/player_bg.png"],
['player_top_small', "assets/play/small/player_top.png"],
];
......@@ -12,6 +32,8 @@ const res = [
const resAudio = [
['click', "assets/play/music/click.mp3"],
['right', "assets/play/music/right.mp3"],
['wrong', "assets/play/music/wrong.mp3"],
];
......
......@@ -2,7 +2,9 @@
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/app",
"types": []
"types": [
"node"
]
},
"files": [
"src/main.ts",
......
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