Commit 031ae811 authored by 范雪寒's avatar 范雪寒

feat: 基础功能

parent 1b53952f
This diff is collapsed.
<!--
<div class="preview-box" #wrap>
<canvas id="canvas" #canvas></canvas>
</div> -->
\ No newline at end of file
.preview-box {
margin: auto;
width: 95%;
height: 35vw;
border: 2px dashed #ddd;
border-radius: 0.5rem;
background-color: #fafafa;
text-align: center;
color: #aaa;
.preview-img {
height: 100%;
width: auto;
}
}
import {
Component,
ElementRef,
EventEmitter,
HostListener,
Input,
OnChanges,
OnDestroy,
OnInit,
Output,
ViewChild
} from '@angular/core';
import { Subject } from 'rxjs';
import { debounceTime } from 'rxjs/operators';
import TWEEN from '@tweenjs/tween.js';
import { getMinScale } from "../../play/Unit";
import { tar } from "compressing";
@Component({
selector: 'app-preview-edit-mode',
templateUrl: './preview-edit-mode.component.html',
styleUrls: ['./preview-edit-mode.component.scss']
})
export class PreviewEditModeComponent implements OnInit, OnDestroy, OnChanges {
ngOnInit() {
}
ngOnDestroy() {
}
ngOnChanges() {
}
}
......@@ -6,3 +6,15 @@
height: 100%;
}
.border {
border-radius: 20px;
border-style: dashed;
padding: 20px;
margin: 20px;
/*width: 500px; */
/*//border-radius: 20px;*/
/*//border-width: 2px;*/
/*//border-color: #000000;*/
}
\ No newline at end of file
<div class="model-content">
<div class="border" style="width: 650px; height: 190px;">
<span style="float: left; height: 30px; font-size: 18px;">标题字母:</span>
<input type="text" style="width: 50px;" nz-input [(ngModel)]="item.tittle.word" (blur)="save()">
<br>
<br>
<span style="float: left; height: 30px; font-size: 18px;">标题:</span>
<input type="text" style="width: 550px;" nz-input [(ngModel)]="item.tittle.text" (blur)="save()">
<br>
<br>
<span style="float: left; height: 30px; font-size: 18px;">标题音频:</span>
<app-audio-recorder
[audioUrl]="item.tittle.audio"
(audioUploaded)="onTittleAudioUploadSuccess($event, 'audio_url')"
></app-audio-recorder>
</div>
<div *ngFor="let it of item.carrots; let i = index" style="float: left; width: 350px;">
<div class="border" style="width: 300px; float: left;">
<span style="float: left; height: 30px; font-size: 18px;">胡萝卜:</span>
<br><br>
<app-upload-image-with-preview
[picUrl]="it.carrotImg"
(imageUploaded)="onImageUploadSuccess($event, 'carrot', i)"
></app-upload-image-with-preview>
<br><br>
<span style="float: left; height: 30px; font-size: 18px;">坑:</span>
<br><br>
<app-upload-image-with-preview
[picUrl]="it.holeImg"
(imageUploaded)="onImageUploadSuccess($event, 'hole', i)"
></app-upload-image-with-preview>
<div *ngIf="(item.carrots.length > 5)">
<div style="float: none; padding-top: 30px;">
<button style="width: 100%; height: 45px; float: none;" nz-button nzType="dashed" class="add-btn" (click)="deleteCarrot(i)">
删除
</button>
</div>
</div>
  <div style="clear:both; height:0; font-size:1px; line-height:0px;"></div>
</div>
</div>
<div *ngIf="(item.carrots.length < 8)">
<div style="width: 300px; float: left; height: 280px; padding: 20px;" nz-col nzSpan="8" class="add-btn-box" >
<button style=" margin: auto; width: 100%; height: 100%;" nz-button nzType="dashed" class="add-btn" (click)="addCarrot()">
<i nz-icon nzType="plus-circle" nzTheme="outline"></i>
Add
</button>
</div>
</div>
 <div style="clear:both; height:0; font-size:1px; line-height:0px;"></div>
<div style="float: left; width: 100%">
<app-custom-hot-zone
[bgItem]="{}"
[isHasRect]="false"
[isHasText]="false"
[item]="item"
[hotZoneItemArr]="item.targets"
[refreshCaller]="caller"
(save)="saveData($event)"
>
</app-custom-hot-zone>
<!-- <app-preview
></app-preview> -->
</div>
<app-custom-hot-zone
[bgItem]="item.bgItem"
[hotZoneItemArr]="item.hotZoneItemArr"
(save)="saveData($event)"
>
</app-custom-hot-zone>
<!--
<div style="position: absolute; left: 200px; top: 100px; width: 800px;">
......
......@@ -10,21 +10,57 @@ import { Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, A
export class FormComponent implements OnInit, OnChanges, OnDestroy {
// 储存数据用
saveKey = "test_0011";
saveKey = 'ym-2-30';
// 储存对象
item;
caller: any = {};
constructor(private appRef: ApplicationRef, private changeDetectorRef: ChangeDetectorRef) {
}
deleteCarrot(idx) {
this.item.carrots.splice(idx, 1);
this.refreshBackground();
this.save();
}
addCarrot() {
this.item.carrots.push({
carrotImg: '',
holeImg: '',
});
this.refreshBackground();
this.save();
}
ngOnInit() {
this.item = {
bgItem: '',
hotZoneItemArr: []
tittle: {
word: "",
text: "",
audio: ""
},
carrots: [{
carrotImg: '',
holeImg: '',
}, {
carrotImg: '',
holeImg: '',
}, {
carrotImg: '',
holeImg: '',
}, {
carrotImg: '',
holeImg: '',
}, {
carrotImg: '',
holeImg: '',
}],
targets: []
};
// 获取存储的数据
......@@ -56,14 +92,19 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
}
refreshBackground() {
this.caller.refreshBackground();
}
/**
* 储存图片数据
* @param e
*/
onImageUploadSuccess(e, key) {
this.item[key] = e.url;
onImageUploadSuccess(e, key, idx) {
// this.item[key] = e.url;
this.item.carrots[idx][key + 'Img'] = e.url;
this.refreshBackground();
this.save();
}
......@@ -78,6 +119,17 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
}
saveData(e) {
this.item.targets = [];
e.hotZoneItemArr.forEach((target) => {
console.log('target.rect = ' + JSON.stringify(target.rect));
this.item.targets.push(target);
});
this.save();
}
// 标题音频
onTittleAudioUploadSuccess(e, key) {
this.item.tittle.audio = e.url;
this.save();
}
......
......@@ -7,17 +7,29 @@ export let defaultData = {
},
carrots: [{
carrotImg: '',
holeImg: '',
carrotImg: 'carrot',
holeImg: 'hole',
}, {
carrotImg: 'carrot',
holeImg: 'hole',
}, {
carrotImg: 'carrot',
holeImg: 'hole',
}, {
carrotImg: 'carrot',
holeImg: 'hole',
}, {
carrotImg: 'carrot',
holeImg: 'hole',
}, {
carrotImg: 'carrot',
holeImg: 'hole',
}, {
carrotImg: 'carrot',
holeImg: 'hole',
}, {
carrotImg: 'carrot',
holeImg: 'hole',
}],
targets: [{
img: '',
x: 0,
y: 0,
width: 1,
height: 1,
scaleX: 1,
scaleY: 1,
audio: ''
}]
targets: []
};
\ No newline at end of file
......@@ -111,6 +111,7 @@ export class Game {
typeof (this._currentTouchSprite._onTouchEndListener) == 'function') {
this._currentTouchSprite._onTouchEndListener(pos);
}
this._currentTouchSprite = null;
}
}
......
......@@ -48,9 +48,14 @@ export class MyGame extends Game {
let imgUrlList = [];
let audioUrlList = [];
// this.data.audios.forEach((cube) => {
// audioUrlList.push(cube);
// });
this.data.carrots.forEach((carrot) => {
imgUrlList.push(carrot.carrotImg);
imgUrlList.push(carrot.holeImg);
});
this.data.targets.forEach((target) => {
imgUrlList.push(target.pic_url);
});
// audioUrlList.push(this.data.wholeAuido);
// audioUrlList.push(this.data.tittle.audio);
......@@ -85,25 +90,35 @@ export class MyGame extends Game {
initBg() {
this.removeChild(this.getChildByName('bg'));
this.getFullScaleXY();
let screenSize = this.getScreenSize();
let defaultSize = this.getDefaultScreenSize();
let bgSized = new TouchSprite();
bgSized.init(this.images.get('Img_bg'));
bgSized.anchorX = 0.5;
bgSized.anchorY = 1;
bgSized.setPosition(this._parent.canvasWidth / 2, this._parent.canvasHeight);
bgSized.setScaleXY(this.getFullScaleXY());
this.addChild(bgSized);
let bgSized1 = new TouchSprite();
bgSized1.init(this.images.get('Img_bg'));
bgSized1.anchorX = 0.5;
bgSized1.anchorY = 1;
bgSized1.setPosition(screenSize.width / 2, screenSize.height);
bgSized1.setScaleXY(this.getFullScaleXY());
this.addChild(bgSized1);
let bgSized2 = new TouchSprite();
bgSized2.init(this.images.get('Img_bg_ground'));
bgSized2.anchorX = 0.5;
bgSized2.anchorY = 1;
bgSized2.setPosition(screenSize.width / 2, screenSize.height);
bgSized2.scaleX = screenSize.width / defaultSize.width;
bgSized2.scaleY = screenSize.height / defaultSize.height;
this.addChild(bgSized2);
// 背景
let bg = new TouchSprite();
bg.init(this.images.get('Img_bg'))
bg.setPosition(this._parent.canvasWidth / 2, this._parent.canvasHeight / 2);
bg.init(this.images.get('Img_bg2'))
bg.setScaleXY(this._parent.mapScale);
bg.alpha = 0.5;
bg.alpha = 0;
bg.anchorX = 0.5;
bg.anchorY = 1;
bg.setPosition(screenSize.width / 2, screenSize.height);
bg.setName('bg');
this.addChild(bg);
......@@ -112,7 +127,7 @@ export class MyGame extends Game {
const bgRect = new ShapeRect();
bgRect.setSize(57, 65);
bgRect.fillColor = '#f8c224';
const sx = this._parent.canvasWidth / this._parent.canvasBaseW;
const sx = screenSize.width / this._parent.canvasBaseW;
bgRect.setScaleXY(sx);
bgRect.x = 65 * sx;
bgRect.alpha = 0;
......@@ -165,14 +180,86 @@ export class MyGame extends Game {
}
initMiddle() {
// // 创建背景
// this.createMiddlebg();
// // 创建单词
// this.createWords();
// // 创建右下角的喇叭
// this.createSpeaker();
// // 创建窗口
// this.createWindow();
// 创建洞
this.createHoles();
// 创建胡萝卜
this.createCarrots();
// 创建可选的单词
this.createWords();
}
createCarrots() {
let screenSize = this.getScreenSize();
let defaultSize = this.getDefaultScreenSize();
const length = this.data.carrots.length;
this.data.carrots.forEach((carrot, idx) => {
let carrotSp = new TouchSprite();
carrotSp.init(this.images.get(carrot.carrotImg));
carrotSp.setPositionX(this.bg.width / length * (idx - (length - 1) / 2));
carrotSp.setPositionY(-550 * (screenSize.height / defaultSize.height) / this._parent.mapScale);
this.bg.addChild(carrotSp);
});
}
createHoles() {
let screenSize = this.getScreenSize();
let defaultSize = this.getDefaultScreenSize();
const length = this.data.carrots.length;
this.data.carrots.forEach((carrot, idx) => {
let hole = new TouchSprite();
hole.init(this.images.get(carrot.holeImg));
hole.anchorX = 0.5;
hole.anchorY = 0;
hole.setPositionX(this.bg.width / length * (idx - (length - 1) / 2));
hole.setPositionY(-520 * (screenSize.height / defaultSize.height) / this._parent.mapScale);
this.bg.addChild(hole);
});
}
createWords() {
let screenSize = this.getScreenSize();
let defaultSize = this.getDefaultScreenSize();
const length = this.data.carrots.length;
this.data.targets.forEach((targetData, idx) => {
console.log('targetData.rect = ' + JSON.stringify(targetData.rect));
let targetSp = new TouchSprite();
targetSp.init(this.images.get(targetData.pic_url));
targetSp.setPositionX(targetData.x);
// 一通复杂的计算之后得到一个实际的Y坐标
targetSp.setPositionY((targetData.y - defaultSize.height / 2) * (screenSize.height / defaultSize.height) / this._parent.mapScale);
targetSp.addTouchBeganListener(({ x, y }) => {
this.onTargetSpTouchBengan({ x, y }, targetSp, idx);
});
targetSp.addTouchMoveListener(({ x, y }) => {
this.onTargetSpTouchMoved({ x, y }, targetSp, idx);
});
this.bg.addChild(targetSp);
});
}
editMode = true;
onTargetSpTouchBengan({ x, y }, targetSp, idx) {
targetSp.set('touchStartPos', { x, y });
targetSp.set('startPos', { x: targetSp.x, y: targetSp.y });
}
onTargetSpTouchMoved({ x, y }, targetSp, idx) {
if (this.editMode) {
let screenSize = this.getScreenSize();
let defaultSize = this.getDefaultScreenSize();
let spritePosX = targetSp.get('startPos').x + (x - targetSp.get('touchStartPos').x) / this._parent.mapScale;
let spritePosY = targetSp.get('startPos').y + (y - targetSp.get('touchStartPos').y) / this._parent.mapScale;
targetSp.setPositionX(spritePosX);
targetSp.setPositionY(spritePosY);
this.data.targets[idx].x = spritePosX;
// 一通复杂的计算之后得到一个不随分辨率改变的虚拟Y坐标
this.data.targets[idx].y = spritePosY * this._parent.mapScale / (screenSize.height / defaultSize.height) + defaultSize.height / 2;
}
}
printCurrentStatus() {
......
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"],
['Img_bg', "assets/play/Img_bg.png"],
['Img_bg2', "assets/play/Img_bg2.png"],
['Img_bg_ground', "assets/play/Img_bg_ground.png"],
['Img_tittleBg', "assets/play/Img_tittleBg.png"],
['carrot', "assets/play/carrot.png"],
['hole', "assets/play/hole.png"],
];
const resAudio = [
['click', "assets/play/music/click.mp3"],
// ['click', "assets/play/music/click.mp3"],
];
......
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