Commit 9713598c authored by 李维's avatar 李维

dev commit

parent 7bb1f772
...@@ -269,14 +269,12 @@ export class Item extends MySprite { ...@@ -269,14 +269,12 @@ export class Item extends MySprite {
const tween = new TWEEN.Tween(self); const tween = new TWEEN.Tween(self);
if (sequence.length > 0) { if (sequence.length > 0) {
// console.log('sequence.length: ', sequence.length);
const action = sequence.shift(); const action = sequence.shift();
tween.to(action['target'], action['time']); tween.to(action['target'], action['time']);
tween.onComplete( () => { tween.onComplete( () => {
runSequence(); runSequence();
}); });
tween.start(); tween.start();
self['shakeTween'] = tween; self['shakeTween'] = tween;
} }
} }
...@@ -341,9 +339,6 @@ export class ShapeRect extends MySprite { ...@@ -341,9 +339,6 @@ export class ShapeRect extends MySprite {
setSize(w, h) { setSize(w, h) {
this.width = w; this.width = w;
this.height = h; this.height = h;
console.log('w:', w);
console.log('h:', h);
} }
drawShape() { drawShape() {
...@@ -514,7 +509,6 @@ export class HotZoneImageItem extends MySprite { ...@@ -514,7 +509,6 @@ export class HotZoneImageItem extends MySprite {
init(imageSrc = null, initWidth, initHeight, callback?){ init(imageSrc = null, initWidth, initHeight, callback?){
this.showImage(imageSrc, initWidth, initHeight, (img)=>{ this.showImage(imageSrc, initWidth, initHeight, (img)=>{
console.log("Init")
callback && callback(img.width, img.height) callback && callback(img.width, img.height)
this.setSize(img.width*this.image.scaleX, img.height*this.image.scaleY) this.setSize(img.width*this.image.scaleX, img.height*this.image.scaleY)
this.lineDashFlag = true; this.lineDashFlag = true;
...@@ -589,17 +583,7 @@ export class HotZoneImageItem extends MySprite { ...@@ -589,17 +583,7 @@ export class HotZoneImageItem extends MySprite {
} }
refreshLabelScale() { refreshLabelScale() {
// console.log(this.labelBox.width)
this.labelBox.scaleX = 75 / (this.labelBox.width*this.image.scaleX) this.labelBox.scaleX = 75 / (this.labelBox.width*this.image.scaleX)
// console.log(this.labelBox.width)
// if (this.scaleX == this.scaleY) {
// this.labelBox.setScaleXY(1);
// }
// if (this.scaleX > this.scaleY) {
// this.labelBox.scaleX = this.scaleY / this.scaleX;
// } else {
// this.labelBox.scaleY = this.scaleX / this.scaleY;
// }
} }
showLineDash() { showLineDash() {
...@@ -814,8 +798,6 @@ export class Label extends MySprite { ...@@ -814,8 +798,6 @@ export class Label extends MySprite {
drawText() { drawText() {
// console.log('in drawText', this.text);
if (!this.text) { return; } if (!this.text) { return; }
this.ctx.font = `${this.fontSize} ${this.fontName}`; this.ctx.font = `${this.fontSize} ${this.fontName}`;
...@@ -830,7 +812,6 @@ export class Label extends MySprite { ...@@ -830,7 +812,6 @@ export class Label extends MySprite {
this.ctx.fillStyle = '#000000'; this.ctx.fillStyle = '#000000';
this.ctx.fillText(this.text, 0, 0); this.ctx.fillText(this.text, 0, 0);
} }
...@@ -855,23 +836,8 @@ export function getPosByAngle(angle, len) { ...@@ -855,23 +836,8 @@ export function getPosByAngle(angle, len) {
export function getAngleByPos(px, py, mx, my) { export function getAngleByPos(px, py, mx, my) {
// const _x = p2x - p1x;
// const _y = p2y - p1y;
// const tan = _y / _x;
//
// const radina = Math.atan(tan); // 用反三角函数求弧度
// const angle = Math.floor(180 / (Math.PI / radina)); //
//
// console.log('r: ' , angle);
// return angle;
//
const x = Math.abs(px - mx); const x = Math.abs(px - mx);
const y = Math.abs(py - my); const y = Math.abs(py - my);
// const x = Math.abs(mx - px);
// const y = Math.abs(my - py);
const z = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2)); const z = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
const cos = y / z; const cos = y / z;
const radina = Math.acos(cos); // 用反三角函数求弧度 const radina = Math.acos(cos); // 用反三角函数求弧度
...@@ -901,7 +867,5 @@ export function getAngleByPos(px, py, mx, my) { ...@@ -901,7 +867,5 @@ export function getAngleByPos(px, py, mx, my) {
angle = 360 - angle; angle = 360 - angle;
} }
// console.log('angle: ', angle);
return angle; return angle;
} }
...@@ -45,10 +45,10 @@ ...@@ -45,10 +45,10 @@
</div> </div>
<!--<app-audio-recorder--> <app-audio-recorder>
<!--[audioUrl]="it.audio_url ? it.audio_url : null "--> <!-- [audioUrl]="it.audio_url ? it.audio_url : null "
<!--(audioUploaded)="onAudioUploadSuccessByImg($event, it)"--> (audioUploaded)="onAudioUploadSuccessByImg($event, it)" -->
<!--&gt;</app-audio-recorder>--> </app-audio-recorder>
</div> </div>
......
// #canvas{
// width: 200px;
// height: 300px;
// }
.p-image-children-editor { .p-image-children-editor {
width: 100%; width: 100%;
......
...@@ -349,8 +349,8 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -349,8 +349,8 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
initData() { initData() {
this.canvasWidth = this.wrap.nativeElement.clientWidth; this.canvasWidth = 200; //this.wrap.nativeElement.clientWidth;
this.canvasHeight = this.wrap.nativeElement.clientHeight; this.canvasHeight = 300;// = this.wrap.nativeElement.clientHeight;
this.mapScale = this.canvasWidth / this.canvasBaseW; this.mapScale = this.canvasWidth / this.canvasBaseW;
this.renderArr = []; this.renderArr = [];
this.bg = null; this.bg = null;
......
...@@ -44,7 +44,6 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -44,7 +44,6 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
} }
this.init(); this.init();
this.refresh(); this.refresh();
// this.saveItem();
}, this.KEY); }, this.KEY);
} }
ngOnChanges() { ngOnChanges() {
......
...@@ -33,74 +33,7 @@ import { debounceTime } from "rxjs/operators"; ...@@ -33,74 +33,7 @@ import { debounceTime } from "rxjs/operators";
import * as _ from "lodash"; import * as _ from "lodash";
import TWEEN from "@tweenjs/tween.js"; import TWEEN from "@tweenjs/tween.js";
const defauleFormData = { const defauleFormData = {}
dataArray:[
{
time: 15,
question:{
text:"This is Demo, please set question in form page",
image_url:"question-image",
audio_url:""
},
choice:{
correct:{ isText: true, text: "Correct choice", image_url: "bg-240-180" },
incorrect:[
{ isText: true, text: "Incorrect choice", image_url: "bg-240-180" },
{ isText: true, text: "Incorrect choice", image_url: "bg-240-180" },
{ isText: true, text: "Incorrect choice", image_url: "bg-240-180" },
]
}
},
{
time: 15,
question:{
text:"This is Demo, please set question in form page",
image_url:"",
audio_url:"sm-display"
},
choice:{
correct:{ isText: true, text: "Correct choice", image_url: "bg-240-180" },
incorrect:[
{ isText: true, text: "Incorrect choice", image_url: "bg-240-180" },
{ isText: true, text: "Incorrect choice", image_url: "bg-240-180" },
{ isText: true, text: "Incorrect choice", image_url: "bg-240-180" },
]
}
},
{
time: 15,
question:{
text:"",
image_url:"question-image",
audio_url:"sm-display"
},
choice:{
correct:{ isText: true, text: "Correct choice", image_url: "bg-240-180" },
incorrect:[
{ isText: true, text: "Incorrect choice", image_url: "bg-240-180" },
{ isText: true, text: "Incorrect choice", image_url: "bg-240-180" },
{ isText: true, text: "Incorrect choice", image_url: "bg-240-180" },
]
}
},
{
time: 15,
question:{
text:"This is Demo, please set question in form page",
image_url:"",
audio_url:""
},
choice:{
correct:{ isText: true, text: "Correct choice", image_url: "bg-240-180" },
incorrect:[
{ isText: true, text: "Incorrect choice", image_url: "bg-240-180" },
{ isText: true, text: "Incorrect choice", image_url: "bg-240-180" },
{ isText: true, text: "Incorrect choice", image_url: "bg-240-180" },
]
}
}
]
}
@Component({ @Component({
selector: "app-play", selector: "app-play",
...@@ -119,7 +52,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -119,7 +52,7 @@ export class PlayComponent implements OnInit, OnDestroy {
g_canvasTop; g_canvasTop;
g_animationId: any; g_animationId: any;
g_mapScale = 1; // 缩放比例 g_mapScale = 1; // 缩放比例
g_KEY = "DataKey_MultipleChoice"; g_KEY = "DataKey_PicturePuzzle";
g_canvasWidth = 1280; g_canvasWidth = 1280;
g_canvasHeight = 720; g_canvasHeight = 720;
g_canvasBaseW = 1280; g_canvasBaseW = 1280;
...@@ -161,6 +94,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -161,6 +94,7 @@ export class PlayComponent implements OnInit, OnDestroy {
// 当数据加载完毕后,执行 // 当数据加载完毕后,执行
systemReady(){ systemReady(){
console.log(this.g_formData)
this.initGame() this.initGame()
} }
...@@ -185,7 +119,8 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -185,7 +119,8 @@ export class PlayComponent implements OnInit, OnDestroy {
// ------------------------------------------------------------------------------ // ------------------------------------------------------------------------------
initGame(){ initGame(){
this.initAnswerSheet()
this.showAnswer()
} }
...@@ -193,7 +128,47 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -193,7 +128,47 @@ export class PlayComponent implements OnInit, OnDestroy {
initAnswerSheet(){
let element = this.g_cartoon.createCartoonElement("AnswerSheet", "MySprite")
element.ref.init(this.g_cartoon.images.get("answer-sheet"))
element.ref.x = this.g_canvasWidth / 2
element.ref.y = this.g_canvasHeight / 2
element.ref.setScaleXY(this.g_mapScale)
let quertionImage = this.g_cartoon.createCartoonElement("quertion-image-container", "MySprite")
quertionImage.ref.init(this.g_cartoon.images.get(this.g_formData.bgItem.url))
if( (200 / quertionImage.ref.width) < (300 / quertionImage.ref.height) ){
quertionImage.contentScale = 200 / quertionImage.ref.width
quertionImage.originX = 0
quertionImage.originY = quertionImage.ref.height / 2 - (quertionImage.ref.height/2) * quertionImage.contentScale
}else{
quertionImage.originX = quertionImage.ref.width / 2
quertionImage.originY = 0
quertionImage.contentScale = 200 / quertionImage.ref.width
}
quertionImage.ref.setScaleXY( quertionImage.contentScale )
element.ref.addChild(quertionImage.ref)
this.render(element.ref)
}
showAnswer(){
let hotZoneItemArr = this.g_formData.hotZoneItemArr
let parent = this.g_cartoon.getCartoonElement("quertion-image-container")
let originX = -(parent.ref.width)/2
let originY = -(parent.ref.height)/2
hotZoneItemArr.forEach( (item,index) => {
console.log(item)
let element = this.g_cartoon.createCartoonElement("quertion-image-puzzle-"+index, "MySprite")
element.ref.init(this.g_cartoon.images.get(item.rect.src))
element.ref.scaleX = item.rect.width / (element.ref.width*parent.contentScale)
element.ref.scaleY = item.rect.height / (element.ref.height*parent.contentScale)
element.ref.x = originX + item.rect.x/parent.contentScale + (element.ref.width*element.ref.scaleX)/2
element.ref.y = originY + item.rect.y/parent.contentScale + (element.ref.height*element.ref.scaleY/2)
this.g_cartoon.getCartoonElement("quertion-image-container").ref.addChild(element.ref)
});
}
...@@ -304,13 +279,13 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -304,13 +279,13 @@ export class PlayComponent implements OnInit, OnDestroy {
} }
const arr = contentObj.dataArray; const arr = contentObj.dataArray;
// 添加用户上传音效 // 添加用户上传音效
if (arr) { // if (arr) {
for (let i = 0; i < arr.length; i++) { // for (let i = 0; i < arr.length; i++) {
if(arr[i].question.audio_url){ // if(arr[i].question.audio_url){
this.g_cartoon.addAudio(arr[i].question.audio_url, arr[i].question.audio_url); // this.g_cartoon.addAudio(arr[i].question.audio_url, arr[i].question.audio_url);
} // }
} // }
} // }
// 添加本地音效 // 添加本地音效
for( var key in localAudios ){ for( var key in localAudios ){
this.g_cartoon.addAudio( key, localAudios[key] ); this.g_cartoon.addAudio( key, localAudios[key] );
...@@ -329,15 +304,12 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -329,15 +304,12 @@ export class PlayComponent implements OnInit, OnDestroy {
this.g_cartoon.addImage(url, url); this.g_cartoon.addImage(url, url);
} }
}; };
const arr = this.g_data.contentObj.dataArray; addPicUrl(this.g_data.contentObj.bgItem.url)
if (arr) { const hotZoneItemArr = this.g_data.contentObj.hotZoneItemArr;
for (let i = 0; i < arr.length; i++) { if(hotZoneItemArr){
addPicUrl(arr[i].question.image_url); hotZoneItemArr.forEach(item => {
addPicUrl(arr[i].choice.correct.image_url); addPicUrl(item.rect.src)
arr[i].choice.incorrect.forEach(item=>{ });
addPicUrl(item.image_url);
})
}
} }
} }
// 添加本地图片 // 添加本地图片
......
const localImages = { const localImages = {
'startBtn': "assets/play/btn-start.png",
'restartBtn': "assets/play/btn-restart.png",
'petal_1': "assets/play/scrap-pic-1.png",
'petal_2': "assets/play/scrap-pic-2.png",
'petal_3': "assets/play/scrap-pic-3.png",
'bg_1280_720_Ruler': "assets/play/1280_720_Ruler.png", 'bg_1280_720_Ruler': "assets/play/1280_720_Ruler.png",
'bubble': "assets/play/bubble.png",
'replay': 'assets/play/replay.png',
'title': 'assets/play/multiple-choice.png',
'group': 'assets/play/group.png',
'rectangle-3': 'assets/play/rectangle-3.png',
'drop-down': 'assets/play/drop-down.png',
'combined-shape': 'assets/play/combined-shape.png',
'choice-card-typeA': 'assets/play/choice-card-a.png',
'choice-card-typeB': 'assets/play/choice-card-b.png',
'choice-card-typeC': 'assets/play/choice-card-c.png',
'choice-card-typeD': 'assets/play/choice-card-d.png',
'complete-card': 'assets/play/complete-card.png',
'header': 'assets/play/header.png',
'background': 'assets/play/background.png',
'question-image': 'assets/play/question-image.png',
'speaker-1': 'assets/play/speaker-1.png',
'correct-icon': 'assets/play/correct-icon.png',
'incorrect-icon': 'assets/play/incorrect-icon.png',
'red-circle': 'assets/play/combined-shape-red-circle.png',
'rectangle-4': 'assets/play/rectangle-4.png',
'me': 'assets/play/me.png',
'bg-240-180': 'assets/play/bg-240-180.png', 'bg-240-180': 'assets/play/bg-240-180.png',
'bg-453-251': 'assets/play/bg-453-251.png', 'bg-453-251': 'assets/play/bg-453-251.png',
't_right': "assets/play/right.png",
't_arrow': "assets/play/arrow.png",
'bg_500_600': "assets/play/bg_500_600.png", 'bg_500_600': "assets/play/bg_500_600.png",
'bg_1280_222': "assets/play/bg_1280_222.png", 'bg_1280_222': "assets/play/bg_1280_222.png",
'bg_ready': "assets/play/bg_ready.png",
'ready': "assets/play/ready.png", 'answer-sheet': "assets/play/AnswerSheet.png"
'go': "assets/play/go.png"
}; };
......
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