Commit 77bc0c82 authored by jeff's avatar jeff

更新

parent e7835d3b
...@@ -144,6 +144,17 @@ export class CustomHotZoneComponent1 implements OnInit, OnDestroy, OnChanges { ...@@ -144,6 +144,17 @@ export class CustomHotZoneComponent1 implements OnInit, OnDestroy, OnChanges {
this.init(); this.init();
} }
@Input()
set colorType(num: string) {
this.bgItem.colorType = num
if (this.bgItem.colorType == '0') {
this.bgItem.url = 'http://staging-teach.cdn.ireadabc.com/b90a006ba41723ec11970051e92f43e0.png'
} else {
this.bgItem.url = 'http://staging-teach.cdn.ireadabc.com/5716af983b610b43b13efbdefec93a51.png'
}
this.bg.load(this.bgItem.url)
}
onResize(event) { onResize(event) {
this.winResizeEventStream.next(); this.winResizeEventStream.next();
} }
...@@ -192,16 +203,19 @@ export class CustomHotZoneComponent1 implements OnInit, OnDestroy, OnChanges { ...@@ -192,16 +203,19 @@ export class CustomHotZoneComponent1 implements OnInit, OnDestroy, OnChanges {
this.refresh(); this.refresh();
} }
refreshBackground(callBack = null) { refreshBackground(callBack = null) {
if (!this.bg) { if (!this.bg) {
this.bg = new MySprite(this.ctx); this.bg = new MySprite(this.ctx);
this.renderArr.push(this.bg); this.renderArr.push(this.bg);
} }
if (!this.bgItem.colorType) {
if (!this.bgItem.url) { this.bgItem.colorType = '0'
this.bgItem.url = 'http://staging-teach.cdn.ireadabc.com/b90a006ba41723ec11970051e92f43e0.png'; }
if (this.bgItem.colorType == '0') {
this.bgItem.url = 'http://staging-teach.cdn.ireadabc.com/b90a006ba41723ec11970051e92f43e0.png'
} else {
this.bgItem.url = 'http://staging-teach.cdn.ireadabc.com/5716af983b610b43b13efbdefec93a51.png'
} }
const bg = this.bg; const bg = this.bg;
......
<div class="model-content"> <div class="model-content">
<div style="padding: 10px;"> <div style="padding: 10px">
<!-- <!--
...@@ -17,10 +17,18 @@ ...@@ -17,10 +17,18 @@
</div> </div>
--> -->
<div style="display: flex;justify-content: center; ">
<h5 style="padding-right: 5px;">背景颜色</h5>
<nz-radio-group [(ngModel)]="colorType" (ngModelChange)="onRadioChange()">
<label nz-radio nzValue="0">颜色1</label>
<label nz-radio nzValue="1">颜色2</label>
</nz-radio-group>
</div>
<div *ngFor='let data of item ;index as i'> <div *ngFor='let data of item ;index as i'>
<span> 卡片{{i+1}}</span> <span> 卡片{{i+1}}</span>
<app-custom-hot-zone-mini [bgItem]="data.bgItem" [hotZoneItemArr]="data.hotZoneItemArr" <app-custom-hot-zone-mini [bgItem]="data.bgItem" [hotZoneItemArr]="data.hotZoneItemArr"
[customTypeGroupArr]="customTypeGroupArr" (save)="saveHotZone(data, $event)" (del)="delHotZone(i)"> [customTypeGroupArr]="customTypeGroupArr" (save)="saveHotZone(data, $event)" (del)="delHotZone(i)"
[colorType]="colorType">
</app-custom-hot-zone-mini> </app-custom-hot-zone-mini>
</div> </div>
<div style="margin-top: 20px; width: 100%; display: inline-flex; align-items: center;justify-content: center;"> <div style="margin-top: 20px; width: 100%; display: inline-flex; align-items: center;justify-content: center;">
......
...@@ -19,7 +19,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -19,7 +19,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
name: '句子音频', name: '句子音频',
action: { action: {
type: 'text', type: 'text',
audio:true, audio: true,
option: [ option: [
['fontColor', '#000000'], ['fontColor', '#000000'],
['fontSize', '100'] ['fontSize', '100']
...@@ -27,10 +27,10 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -27,10 +27,10 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
} }
}, },
{ {
name: '点击区域', name: '填空区域',
action: { action: {
type: 'text', type: 'text',
aduio:false, aduio: false,
option: [ option: [
['fontColor', '#000000'], ['fontColor', '#000000'],
['fontSize', '100'] ['fontSize', '100']
...@@ -47,29 +47,15 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -47,29 +47,15 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
} }
createShell() {
this.item.wordList.push({
word: '',
audio: '',
backWord: '',
backWordAudio: '',
});
this.save();
}
removeShell(idx) {
this.item.wordList.splice(idx, 1);
this.save();
}
ngOnInit() { ngOnInit() {
this.item = []; this.item = {};
// 获取存储的数据 // 获取存储的数据
(<any>window).courseware.getData((data) => { (<any>window).courseware.getData((data) => {
if (data && data.length) { if (data) {
this.item = data; this.item = data;
} }
...@@ -92,6 +78,12 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -92,6 +78,12 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
} }
colorType = '0'
onRadioChange() {
this.save()
}
/** 保存按钮 */ /** 保存按钮 */
saveHotZone(group, e) { saveHotZone(group, e) {
console.log('e: ', e); console.log('e: ', e);
...@@ -117,6 +109,9 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -117,6 +109,9 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
* 储存数据 * 储存数据
*/ */
save() { save() {
for (let one of this.item) {
one.bgItem.colorType = this.colorType
}
(<any>window).courseware.setData(this.item, null, this.saveKey); (<any>window).courseware.setData(this.item, null, this.saveKey);
this.refresh(); this.refresh();
......
...@@ -3,8 +3,10 @@ cc.Class({ ...@@ -3,8 +3,10 @@ cc.Class({
properties: { properties: {
playBtn: cc.Node, playBtn: cc.Node,
pauseBtn: cc.Node,
label: cc.Label, label: cc.Label,
tiao: cc.Node tiao: cc.Node,
moveBtn: cc.Node
}, },
onload() { onload() {
this._clip = null this._clip = null
...@@ -12,49 +14,99 @@ cc.Class({ ...@@ -12,49 +14,99 @@ cc.Class({
this._audioId = null this._audioId = null
this._totoalTime = null this._totoalTime = null
this._nowTime = null this._nowTime = null
this._pause == false
}, },
onEnable() { onEnable() {
cc.systemEvent.on('stopBgMusic', this.onEvent, this) cc.systemEvent.on('stopBgMusic', this.onEvent, this)
this.moveBtn.on(cc.Node.EventType.TOUCH_START, this.onTouchStart, this)
this.moveBtn.on(cc.Node.EventType.TOUCH_MOVE, this.onTouchMove, this)
this.moveBtn.on(cc.Node.EventType.TOUCH_END, this.onTouchEnd, this)
this.moveBtn.on(cc.Node.EventType.TOUCH_CANCEL, this.onTouchEnd, this)
this.schedule(this.onTimeLoop)
}, },
onDisable() { onDisable() {
cc.systemEvent.off('stopBgMusic', this.onEvent, this) cc.systemEvent.off('stopBgMusic', this.onEvent, this)
this.moveBtn.off(cc.Node.EventType.TOUCH_START, this.onTouchStart, this)
this.moveBtn.off(cc.Node.EventType.TOUCH_MOVE, this.onTouchMove, this)
this.moveBtn.off(cc.Node.EventType.TOUCH_END, this.onTouchEnd, this)
this.moveBtn.on(cc.Node.EventType.TOUCH_CANCEL, this.onTouchEnd, this)
this.unschedule(this.onTimeLoop)
}, },
init(url) { init(url) {
this.stopAudio() this.stopAudio()
this.playBtn.children[0].active = false this.playBtn.active = true
this.playBtn.children[1].active = true this.pauseBtn.active = false
cc.assetManager.loadRemote(url, (err, audioClip) => { cc.assetManager.loadRemote(url, (err, audioClip) => {
if (err) return if (err) return
this.clip = audioClip this.clip = audioClip
this._totoalTime = audioClip.duration this._totoalTime = audioClip.duration
this.label.string = '0:00/' + this.transTime(this._totoalTime) this.label.string = '0:00/' + this.transTime(this._totoalTime)
this.tiao.children[0].getComponent(cc.Sprite).fillRange = 0 this.tiao.children[0].getComponent(cc.Sprite).fillRange = 0
this.tiao.children[1].x =12 this.tiao.children[1].x = 12
}) })
}, },
onTouchStart() {
if (this._audioId == null) return
if (this._play) {
this._pause = true
this._play = false
cc.audioEngine.pause(this._audioId)
}
},
/** 触摸移动 */
onTouchMove(e) {
if (this._audioId == null) return
let dis = e.getPreviousLocation().sub(e.getLocation())
dis = this.moveBtn.x - dis.x
if (dis < 12) dis = 12
else if (dis > 376) dis = 376
let scale = (dis - 12) / 364
this.moveBtn.x = dis
this.tiao.children[0].getComponent(cc.Sprite).fillRange = scale
this.tiao.children[1].x = 12 + 364 * scale
this._nowTime = this._totoalTime * scale
this.label.string = this.transTime(this._nowTime) + '/' + this.transTime(this._totoalTime)
},
onTouchEnd() {
if (this._pause) {
this._play = true
this._pause = false
cc.audioEngine.resume(this._audioId)
}
cc.audioEngine.setCurrentTime(this._audioId, this._totoalTime * (this.moveBtn.x - 12) / 364)
},
onPlay() { onPlay() {
this._play = !this._play this.pauseBtn.active = true
this.playBtn.children[0].active = this._play this.playBtn.active = false
this.playBtn.children[1].active = !this._play this._play = true
if (this._play) {
if (this._audioId != null) { if (this._audioId != null) {
cc.audioEngine.resume(this._audioId) cc.audioEngine.resume(this._audioId)
} else { } else {
this._audioId = cc.audioEngine.play(this.clip, false, 0.8); this._audioId = cc.audioEngine.play(this.clip)
cc.audioEngine.setFinishCallback(this._audioId, this.stopAudio.bind(this)); cc.audioEngine.setFinishCallback(this._audioId, this.stopAudio.bind(this));
this._nowTime = 0 this._nowTime = 0
} }
cc.systemEvent.emit('stopWordsMusic') cc.systemEvent.emit('stopWordsMusic')
this.schedule(this.onTimeLoop)
} else { },
this.stopAudio()
} onPause() {
this.pauseBtn.active = false
this.playBtn.active = true
this._play = false
cc.audioEngine.pause(this._audioId)
}, },
/** 定时回调 */ /** 定时回调 */
onTimeLoop(dt) { onTimeLoop(dt) {
if (!this._play) return
this._nowTime += dt this._nowTime += dt
this.label.string = this.transTime(this._nowTime) + '/' + this.transTime(this._totoalTime) this.label.string = this.transTime(this._nowTime) + '/' + this.transTime(this._totoalTime)
if (this._nowTime > this._totoalTime) this._nowTime = this._totoalTime if (this._nowTime > this._totoalTime) this._nowTime = this._totoalTime
...@@ -70,11 +122,7 @@ cc.Class({ ...@@ -70,11 +122,7 @@ cc.Class({
onStopAudio() { onStopAudio() {
if (this._nowTime < this._totoalTime) { if (this._nowTime < this._totoalTime) {
cc.audioEngine.pause(this._audioId) this.onPause()
this._play = false
this.playBtn.children[0].active = false
this.playBtn.children[1].active = true
this.unscheduleAllCallbacks()
} else { } else {
this.stopAudio() this.stopAudio()
} }
...@@ -82,14 +130,15 @@ cc.Class({ ...@@ -82,14 +130,15 @@ cc.Class({
stopAudio() { stopAudio() {
if (this._audioId != null) { if (this._audioId != null) {
cc.audioEngine.stop(this._audioId)
this._audioId = null this._audioId = null
this.unscheduleAllCallbacks() cc.audioEngine.stop(this._audioId)
this._play = false this._play = false
this.playBtn.children[0].active = false this.pauseBtn.active = false
this.playBtn.children[1].active = true this.playBtn.active = true
this.tiao.children[0].getComponent(cc.Sprite).fillRange = 1 // this._nowTime = 0
this.tiao.children[1].x = 12 + 364 * 1 // this.label.string = this.transTime(this._nowTime) + '/' + this.transTime(this._totoalTime)
// this.tiao.children[0].getComponent(cc.Sprite).fillRange = 0
// this.tiao.children[1].x = 12
} }
}, },
......
This diff is collapsed.
...@@ -24,9 +24,11 @@ cc.Class({ ...@@ -24,9 +24,11 @@ cc.Class({
type: cc.Node, type: cc.Node,
default: null default: null
}, },
bgNode: cc.Node,
bgAudioNode: cc.Node, bgAudioNode: cc.Node,
btnClip: cc.AudioClip, btnClip: cc.AudioClip,
tipClip: cc.AudioClip tipClip: cc.AudioClip,
buttomBgs: [cc.Node]
}, },
// 生命周期 onLoad // 生命周期 onLoad
...@@ -107,7 +109,7 @@ cc.Class({ ...@@ -107,7 +109,7 @@ cc.Class({
}, },
getDefaultData() { getDefaultData() {
const dataJson = ' [{"bgItem":{"url":"http://staging-teach.cdn.ireadabc.com/b90a006ba41723ec11970051e92f43e0.png","rect":{"x":125.28,"y":0,"width":508.44,"height":286},"bgAudioUrl":"http://staging-teach.cdn.ireadabc.com/c8a7dd49a778b0b6dd509aac0ef437ff.mp3"},"hotZoneItemArr":[{"id":"1620909579034","index":0,"itemType":"text","fontScale":0.59296875,"imgScale":1,"mapScale":0.59296875,"gIdx":"0","actionData_":{"type":"text","changeOption":[["fontColor","#000000"],["fontSize","60"]],"text":"aaaaaaaaaaaaaa","audio_url":"http://staging-teach.cdn.ireadabc.com/c8a7dd49a778b0b6dd509aac0ef437ff.mp3"},"rect":{"width":292.76,"height":35.58,"x":12.63,"y":26.79}},{"id":"1620915585437","index":1,"pic_url":"http://staging-teach.cdn.ireadabc.com/31bde9b15582618fa5db4ac7cbc275b4.gif","itemType":"pic","fontScale":0.59296875,"imgScale":0.14977973568281938,"mapScale":0.59296875,"gIdx":"2","actionData_":{"type":"text","changeOption":[["fontColor","#000000"],["fontSize","100"]],"text":"bbbbbbbbbbb"},"rect":{"x":328.41,"y":11,"width":161.61,"height":68}},{"id":"1620920750092","index":2,"itemType":"text","fontScale":0.59296875,"imgScale":1,"mapScale":0.59296875,"gIdx":"0","actionData_":{"type":"text","changeOption":[["fontColor","#000000"],["fontSize","100"]],"text":"嗯?","audio_url":"http://staging-teach.cdn.ireadabc.com/7df4cc83a6c76dc6f0a526d07e6f1987.mp3"},"rect":{"width":118.58,"height":59.3,"x":203.93,"y":129.35}}]},{"bgItem":{"url":"http://staging-teach.cdn.ireadabc.com/b90a006ba41723ec11970051e92f43e0.png","bgAudioUrl":"http://staging-teach.cdn.ireadabc.com/8f73a6b73a217d25ca4f4a2e234c1513.mp3","rect":{"x":222.44,"y":0,"width":903.11,"height":508}},"hotZoneItemArr":[{"id":"1620920863432","index":0,"pic_url":"http://staging-teach.cdn.ireadabc.com/335dea1b83498b0c7c05be637dc13dad.jpeg","itemType":"text","fontScale":1.053125,"imgScale":0.22391857506361323,"mapScale":1.053125,"gIdx":"0","actionData_":{"type":"text","changeOption":[["fontColor","#FF0000"],["fontSize","100"]],"text":"This is a test"},"rect":{"width":558.89,"height":105.31,"x":13.12,"y":6.34}},{"id":"1620920877342","index":1,"itemType":"text","fontScale":1.053125,"imgScale":1,"mapScale":1.053125,"gIdx":"1","actionData_":{"type":"text","changeOption":[["fontColor","#0000FF"],["fontSize","100"]],"text":"you are so good"},"rect":{"width":734.29,"height":105.31,"x":106.43,"y":151.34}},{"id":"1620922839187","index":2,"itemType":"text","fontScale":1.053125,"imgScale":1,"mapScale":1.053125,"gIdx":"0","actionData_":{"type":"text","changeOption":[["fontColor","#000000"],["fontSize","100"]],"text":"_______________"},"rect":{"width":728.12,"height":105.31,"x":109.5,"y":170.34}}]}]' const dataJson = ' [{"bgItem":{"url":"http://staging-teach.cdn.ireadabc.com/5716af983b610b43b13efbdefec93a51.png","rect":{"x":222.44,"y":0,"width":903.11,"height":508},"bgAudioUrl":"http://staging-teach.cdn.ireadabc.com/c8a7dd49a778b0b6dd509aac0ef437ff.mp3","colorType":"1"},"hotZoneItemArr":[{"id":"1620909579034","index":0,"itemType":"text","fontScale":1.053125,"imgScale":1,"mapScale":1.053125,"gIdx":"0","actionData_":{"type":"text","changeOption":[["fontColor","#000000"],["fontSize","60"]],"text":"aaaaaaaaaaaaaa","audio_url":"http://staging-teach.cdn.ireadabc.com/c8a7dd49a778b0b6dd509aac0ef437ff.mp3"},"rect":{"width":520,"height":63.19,"x":22.44,"y":47.59}},{"id":"1620915585437","index":1,"pic_url":"http://staging-teach.cdn.ireadabc.com/31bde9b15582618fa5db4ac7cbc275b4.gif","itemType":"pic","fontScale":1.053125,"imgScale":0.14977973568281938,"mapScale":1.053125,"gIdx":"2","actionData_":{"type":"text","changeOption":[["fontColor","#000000"],["fontSize","100"]],"text":"bbbbbbbbbbb"},"rect":{"x":646.06,"y":45.93,"width":161.61,"height":68}},{"id":"1620920750092","index":2,"itemType":"text","fontScale":1.053125,"imgScale":1,"mapScale":1.053125,"gIdx":"0","actionData_":{"type":"text","changeOption":[["fontColor","#000000"],["fontSize","100"]],"text":"嗯?","audio_url":"http://staging-teach.cdn.ireadabc.com/7df4cc83a6c76dc6f0a526d07e6f1987.mp3"},"rect":{"width":210.62,"height":105.31,"x":362.26,"y":229.77}}]},{"bgItem":{"url":"http://staging-teach.cdn.ireadabc.com/5716af983b610b43b13efbdefec93a51.png","bgAudioUrl":"http://staging-teach.cdn.ireadabc.com/8f73a6b73a217d25ca4f4a2e234c1513.mp3","rect":{"x":222.44,"y":0,"width":903.11,"height":508},"colorType":"1"},"hotZoneItemArr":[{"id":"1620920863432","index":0,"pic_url":"http://staging-teach.cdn.ireadabc.com/335dea1b83498b0c7c05be637dc13dad.jpeg","itemType":"text","fontScale":1.053125,"imgScale":0.22391857506361323,"mapScale":1.053125,"gIdx":"0","actionData_":{"type":"text","changeOption":[["fontColor","#FF0000"],["fontSize","100"]],"text":"This is a test"},"rect":{"width":558.89,"height":105.31,"x":13.12,"y":6.34}},{"id":"1620920877342","index":1,"itemType":"text","fontScale":1.053125,"imgScale":1,"mapScale":1.053125,"gIdx":"1","actionData_":{"type":"text","changeOption":[["fontColor","#0000FF"],["fontSize","100"]],"text":"you are so good"},"rect":{"width":734.29,"height":105.31,"x":106.44,"y":151.34}},{"id":"1620922839187","index":2,"itemType":"text","fontScale":1.053125,"imgScale":1,"mapScale":1.053125,"gIdx":"0","actionData_":{"type":"text","changeOption":[["fontColor","#000000"],["fontSize","100"]],"text":"_______________"},"rect":{"width":728.12,"height":105.31,"x":109.51,"y":170.34}}]}]'
const data = JSON.parse(dataJson); const data = JSON.parse(dataJson);
return data; return data;
}, },
...@@ -176,6 +178,15 @@ cc.Class({ ...@@ -176,6 +178,15 @@ cc.Class({
this.leftNode.active = false this.leftNode.active = false
this.rightNode.active = true this.rightNode.active = true
} }
if (this.data[0].bgItem.colorType == '1') {
this.buttomBgs[0].active = true
this.buttomBgs[1].active = false
this.bgNode.color = cc.color('#b9d7f5')
} else {
this.buttomBgs[0].active = false
this.buttomBgs[1].active = true
this.bgNode.color = cc.color('#C5F4BB')
}
this.setContent(this.picNode, this.data[0]) this.setContent(this.picNode, this.data[0])
}, },
curPage: null, curPage: null,
...@@ -219,8 +230,6 @@ cc.Class({ ...@@ -219,8 +230,6 @@ cc.Class({
cc.audioEngine.play(this.btnClip, false, 0.8) cc.audioEngine.play(this.btnClip, false, 0.8)
}, },
/** 左移动 */ /** 左移动 */
leftMove() { leftMove() {
this.stopAudio() this.stopAudio()
...@@ -282,6 +291,7 @@ cc.Class({ ...@@ -282,6 +291,7 @@ cc.Class({
return return
} }
picNode.getComponent('picNode').initWithData(data) picNode.getComponent('picNode').initWithData(data)
let url = data.bgItem.bgAudioUrl let url = data.bgItem.bgAudioUrl
if (url && url != '') { if (url && url != '') {
this.bgAudioNode.active = true this.bgAudioNode.active = true
...@@ -295,9 +305,13 @@ cc.Class({ ...@@ -295,9 +305,13 @@ cc.Class({
/** 点击切换答案显示 */ /** 点击切换答案显示 */
onCheckall() { onCheckall() {
this.answerState = !this.answerState
if (this.answerState) {
cc.audioEngine.playEffect(this.btnClip) cc.audioEngine.playEffect(this.btnClip)
cc.audioEngine.playEffect(this.tipClip) cc.audioEngine.playEffect(this.tipClip)
this.answerState = !this.answerState } else {
cc.audioEngine.playEffect(this.btnClip)
}
this.checkNode.children[0].active = this.answerState this.checkNode.children[0].active = this.answerState
this.checkNode.children[1].active = !this.answerState this.checkNode.children[1].active = !this.answerState
cc.systemEvent.emit('changeAnswerState', this.answerState) cc.systemEvent.emit('changeAnswerState', this.answerState)
......
...@@ -32,9 +32,13 @@ export default class NewClass extends cc.Component { ...@@ -32,9 +32,13 @@ export default class NewClass extends cc.Component {
this.node.removeAllChildren() this.node.removeAllChildren()
// let one = new cc.Node() // let one = new cc.Node()
// one.removeFromParent() // one.removeFromParent()
let one = new cc.Label() let one = new cc.AudioClip()
one this.unscheduleAllCallbacks()
// cc.audioEngine.setFinishCallback() this.node.on(cc.Node.EventType.TOUCH_MOVE)
}
onTouchMove(e:cc.Event.EventTouch){
let dis = e.getPreviousLocation().sub(e.getLocationInView())
} }
......
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