Commit 1fcf23c6 authored by wangxin's avatar wangxin

测试

parent fa703d42
No preview for this file type
<div class="model-content"> <div class="model-content">
<input type="text" nz-input [(ngModel)]="text" (blur)="save()" />
<div style="padding: 10px;">
<div style="width: 300px;" align='center'>
<span>图1: </span>
<app-upload-image-with-preview
[picUrl]="item.pic_url"
(imageUploaded)="onImageUploadSuccess($event, 'pic_url')">
</app-upload-image-with-preview>
</div>
<div style="width: 300px; margin-top: 5px;" align='center'>
<span>图2: </span>
<app-upload-image-with-preview
[picUrl]="item.pic_url_2"
(imageUploaded)="onImageUploadSuccess($event, 'pic_url_2')">
</app-upload-image-with-preview>
</div>
<div style="width: 300px; margin-top: 15px;">
<span>文本: </span>
<input type="text" nz-input [(ngModel)]="item.text" (blur)="save()">
</div>
<div style="margin-top: 5px">
<span>音频: </span>
<app-audio-recorder
[audioUrl]="item.audio_url"
(audioUploaded)="onAudioUploadSuccess($event, 'audio_url')"
></app-audio-recorder>
</div>
</div>
</div> </div>
...@@ -5,357 +5,321 @@ ...@@ -5,357 +5,321 @@
// Learn life-cycle callbacks: // Learn life-cycle callbacks:
// - https://docs.cocos.com/creator/manual/en/scripting/life-cycle-callbacks.html // - https://docs.cocos.com/creator/manual/en/scripting/life-cycle-callbacks.html
cc.Class({ cc.Class({
extends: cc.Component,
extends: cc.Component,
properties: {},
properties: {
}, // 生命周期 onLoad
onLoad() {
// 生命周期 onLoad this.initSceneData();
onLoad() { this.initSize();
this.initSceneData(); },
this.initSize();
}, _imageResList: null,
_audioResList: null,
_imageResList: null, _animaResList: null,
_audioResList: null, initSceneData() {
_animaResList: null, this._imageResList = [];
initSceneData() { this._audioResList = [];
this._imageResList = []; this._animaResList = [];
this._audioResList = []; },
this._animaResList = [];
}, _designSize: null, // 设计分辨率
_frameSize: null, // 屏幕分辨率
_designSize: null, // 设计分辨率 _mapScaleMin: null, // 场景中常用缩放(取大值)
_frameSize: null, // 屏幕分辨率 _mapScaleMax: null, // 场景中常用缩放(取小值)
_mapScaleMin: null, // 场景中常用缩放(取大值) _cocosScale: null, // cocos 自缩放 (较少用到)
_mapScaleMax: null, // 场景中常用缩放(取小值) initSize() {
_cocosScale: null, // cocos 自缩放 (较少用到) // 注意cc.winSize只有在适配后(修改fitHeight/fitWidth后)才能获取到正确的值,因此使用cc.getFrameSize()来获取初始的屏幕大小
initSize() { let screen_size = cc.view.getFrameSize().width / cc.view.getFrameSize().height;
let design_size = cc.Canvas.instance.designResolution.width / cc.Canvas.instance.designResolution.height;
// 注意cc.winSize只有在适配后(修改fitHeight/fitWidth后)才能获取到正确的值,因此使用cc.getFrameSize()来获取初始的屏幕大小 let f = screen_size >= design_size;
let screen_size = cc.view.getFrameSize().width / cc.view.getFrameSize().height cc.Canvas.instance.fitHeight = f;
let design_size = cc.Canvas.instance.designResolution.width / cc.Canvas.instance.designResolution.height cc.Canvas.instance.fitWidth = !f;
let f = screen_size >= design_size
cc.Canvas.instance.fitHeight = f const frameSize = cc.view.getFrameSize();
cc.Canvas.instance.fitWidth = !f this._frameSize = frameSize;
const frameSize = cc.view.getFrameSize(); this._designSize = cc.view.getDesignResolutionSize();
this._frameSize = frameSize;
let sx = cc.winSize.width / frameSize.width;
this._designSize = cc.view.getDesignResolutionSize(); let sy = cc.winSize.height / frameSize.height;
this._cocosScale = Math.min(sx, sy);
let sx = cc.winSize.width / frameSize.width;
let sy = cc.winSize.height / frameSize.height; sx = frameSize.width / this._designSize.width;
this._cocosScale = Math.min(sx, sy); sy = frameSize.height / this._designSize.height;
this._mapScaleMin = Math.min(sx, sy) * this._cocosScale;
sx = frameSize.width / this._designSize.width; this._mapScaleMax = Math.max(sx, sy) * this._cocosScale;
sy = frameSize.height / this._designSize.height; },
this._mapScaleMin = Math.min(sx, sy) * this._cocosScale;
this._mapScaleMax = Math.max(sx, sy) * this._cocosScale; // 生命周期 start
}, start() {
let getData = this.getData.bind(this);
if (window && window.courseware) {
// 生命周期 start getData = window.courseware.getData;
start() { }
let getData = this.getData.bind(this);
if (window && window.courseware) { getData((data) => {
getData = window.courseware.getData; console.log("data:", data);
} this.data = data || this.getDefaultData();
this.data = JSON.parse(JSON.stringify(this.data));
getData((data) => { // this.preloadItem();
console.log('data:', data); initView();
this.data = data || this.getDefaultData(); });
this.data = JSON.parse(JSON.stringify(this.data)) },
this.preloadItem()
}) getData(cb) {
}, cb(this.getDefaultData());
},
getData(cb) {
cb(this.getDefaultData()); getDefaultData() {
}, const dataJson =
'{"pic_url":"http://staging-teach.cdn.ireadabc.com/ed94332a503c31e0908bd4c6923a2665.png","pic_url_2":"http://staging-teach.cdn.ireadabc.com/5fb60317ade0195d35ad8034d5370a7f.png","text":"This is a test label.","audio_url":"http://staging-teach.cdn.ireadabc.com/f47f1d7b5c160fe1c59500d180346240.mp3"}';
getDefaultData() { const data = JSON.parse(dataJson);
return data;
const dataJson = '{"pic_url":"http://staging-teach.cdn.ireadabc.com/ed94332a503c31e0908bd4c6923a2665.png","pic_url_2":"http://staging-teach.cdn.ireadabc.com/5fb60317ade0195d35ad8034d5370a7f.png","text":"This is a test label.","audio_url":"http://staging-teach.cdn.ireadabc.com/f47f1d7b5c160fe1c59500d180346240.mp3"}' },
const data = JSON.parse(dataJson);
return data; preloadItem() {
}, this.addPreloadImage();
this.addPreloadAudio();
preloadItem() { this.addPreloadAnima();
this.addPreloadImage(); this.preload();
this.addPreloadAudio(); },
this.addPreloadAnima();
this.preload(); addPreloadImage() {
}, this._imageResList.push({ url: this.data.pic_url });
this._imageResList.push({ url: this.data.pic_url_2 });
},
addPreloadImage() {
addPreloadAudio() {
this._imageResList.push({ url: this.data.pic_url }); this._audioResList.push({ url: this.data.audio_url });
this._imageResList.push({ url: this.data.pic_url_2 }); },
},
addPreloadAnima() {},
addPreloadAudio() {
preload() {
this._audioResList.push({ url: this.data.audio_url }); const preloadArr = this._imageResList.concat(this._audioResList).concat(this._animaResList);
}, cc.assetManager.loadAny(preloadArr, null, null, (err, data) => {
this.loadEnd();
addPreloadAnima() { if (window && window["air"]) {
window["air"].hideAirClassLoading();
}, }
preload() { cc.debug.setDisplayStats(false);
});
const preloadArr = this._imageResList.concat(this._audioResList).concat(this._animaResList); },
cc.assetManager.loadAny(preloadArr, null, null, (err, data) => {
loadEnd() {
this.loadEnd(); this.initData();
if (window && window["air"]) { this.initAudio();
window["air"].hideAirClassLoading(); this.initView();
} // this.initListener();
},
cc.debug.setDisplayStats(false);
}); _cantouch: null,
}, initData() {
// 所有全局变量 默认都是null
this._cantouch = true;
loadEnd() { },
this.initData();
this.initAudio(); audioBtn: null,
this.initView(); initAudio() {
// this.initListener(); const audioNode = cc.find("Canvas/res/audio");
},
const getAudioByResName = (resName) => {
_cantouch: null, return audioNode.getChildByName(resName).getComponent(cc.AudioSource);
initData() { };
// 所有全局变量 默认都是null
this._cantouch = true; this.audioBtn = getAudioByResName("btn");
}, },
audioBtn: null, initView() {
initAudio() { // this.initBg();
const audioNode = cc.find('Canvas/res/audio'); // this.initPic();
// this.initBtn();
const getAudioByResName = (resName) => { // this.initIcon();
return audioNode.getChildByName(resName).getComponent(cc.AudioSource);
} const labelNode = new cc.Node();
labelNode.color = cc.Color.YELLOW;
this.audioBtn = getAudioByResName('btn'); const label = labelNode.addComponent(cc.Label);
label.string = this.data.text;
}, label.fontSize = 60;
label.lineHeight = 60;
label.font = cc.find("Canvas/res/font/BRLNSDB").getComponent("cc.Label").font;
initView() { picNode1.addChild(labelNode);
},
this.initBg();
this.initPic(); initBg() {
this.initBtn(); const bgNode = cc.find("Canvas/bg");
this.initIcon(); bgNode.scale = this._mapScaleMax;
}, },
initBg() { pic1: null,
const bgNode = cc.find('Canvas/bg'); pic2: null,
bgNode.scale = this._mapScaleMax; initPic() {
}, const canvas = cc.find("Canvas");
const maxW = canvas.width * 0.7;
pic1: null,
pic2: null, this.getSprNodeByUrl(this.data.pic_url, (sprNode) => {
initPic() { const picNode1 = sprNode;
const canvas = cc.find('Canvas'); picNode1.scale = maxW / picNode1.width;
const maxW = canvas.width * 0.7; picNode1.baseX = picNode1.x;
canvas.addChild(picNode1);
this.getSprNodeByUrl(this.data.pic_url, (sprNode) => { this.pic1 = picNode1;
const picNode1 = sprNode;
picNode1.scale = maxW / picNode1.width; const labelNode = new cc.Node();
picNode1.baseX = picNode1.x; labelNode.color = cc.Color.YELLOW;
canvas.addChild(picNode1); const label = labelNode.addComponent(cc.Label);
this.pic1 = picNode1; label.string = this.data.text;
label.fontSize = 60;
const labelNode = new cc.Node(); label.lineHeight = 60;
labelNode.color = cc.Color.YELLOW; label.font = cc.find("Canvas/res/font/BRLNSDB").getComponent("cc.Label").font;
const label = labelNode.addComponent(cc.Label); picNode1.addChild(labelNode);
label.string = this.data.text; });
label.fontSize = 60;
label.lineHeight = 60; this.getSprNodeByUrl(this.data.pic_url_2, (sprNode) => {
label.font = cc.find('Canvas/res/font/BRLNSDB').getComponent('cc.Label').font; const picNode2 = sprNode;
picNode1.addChild(labelNode); picNode2.scale = maxW / picNode2.width;
}); canvas.addChild(picNode2);
picNode2.x = canvas.width;
this.getSprNodeByUrl(this.data.pic_url_2, (sprNode) => { picNode2.baseX = picNode2.x;
const picNode2 = sprNode; this.pic2 = picNode2;
picNode2.scale = maxW / picNode2.width;
canvas.addChild(picNode2); const labelNode = new cc.Node();
picNode2.x = canvas.width; const label = labelNode.addComponent(cc.RichText);
picNode2.baseX = picNode2.x; const size = 60;
this.pic2 = picNode2; label.font = cc.find("Canvas/res/font/BRLNSDB").getComponent(cc.Label).font;
label.string = `<outline color=#751e00 width=4><size=${size}><color=#ffffff>${this.data.text}</color></size></outline>`;
const labelNode = new cc.Node(); label.lineHeight = size;
const label = labelNode.addComponent(cc.RichText); picNode2.addChild(labelNode);
const size = 60 });
label.font = cc.find('Canvas/res/font/BRLNSDB').getComponent(cc.Label).font; },
label.string = `<outline color=#751e00 width=4><size=${size}><color=#ffffff>${this.data.text}</color></size></outline>`
label.lineHeight = size; initIcon() {
picNode2.addChild(labelNode); const iconNode = this.getSprNode("icon");
}); iconNode.zIndex = 5;
iconNode.anchorX = 1;
}, iconNode.anchorY = 1;
iconNode.parent = cc.find("Canvas");
initIcon() { iconNode.x = iconNode.parent.width / 2 - 10;
const iconNode = this.getSprNode('icon'); iconNode.y = iconNode.parent.height / 2 - 10;
iconNode.zIndex = 5;
iconNode.anchorX = 1; iconNode.on(cc.Node.EventType.TOUCH_START, () => {
iconNode.anchorY = 1; this.playAudioByUrl(this.data.audio_url);
iconNode.parent = cc.find('Canvas'); });
iconNode.x = iconNode.parent.width / 2 - 10; },
iconNode.y = iconNode.parent.height / 2 - 10;
curPage: null,
iconNode.on(cc.Node.EventType.TOUCH_START, () => { initBtn() {
this.playAudioByUrl(this.data.audio_url); this.curPage = 0;
}) const bottomPart = cc.find("Canvas/bottomPart");
}, bottomPart.zIndex = 5; // 提高层级
curPage: null, bottomPart.x = bottomPart.parent.width / 2;
initBtn() { bottomPart.y = -bottomPart.parent.height / 2;
this.curPage = 0; const leftBtnNode = bottomPart.getChildByName("btn_left");
const bottomPart = cc.find('Canvas/bottomPart'); //节点中添加了button组件 则可以添加click事件监听
bottomPart.zIndex = 5; // 提高层级 leftBtnNode.on("click", () => {
if (!this._cantouch) {
bottomPart.x = bottomPart.parent.width / 2; return;
bottomPart.y = -bottomPart.parent.height / 2; }
if (this.curPage == 0) {
const leftBtnNode = bottomPart.getChildByName('btn_left'); return;
//节点中添加了button组件 则可以添加click事件监听 }
leftBtnNode.on('click', () => { this.curPage = 0;
if (!this._cantouch) { this.leftMove();
return;
} cc.audioEngine.play(this.audioBtn.clip, false, 0.8);
if (this.curPage == 0) { });
return;
} const rightBtnNode = bottomPart.getChildByName("btn_right");
this.curPage = 0 //节点中添加了button组件 则可以添加click事件监听
this.leftMove(); rightBtnNode.on("click", () => {
if (!this._cantouch) {
cc.audioEngine.play(this.audioBtn.clip, false, 0.8) return;
}) }
if (this.curPage == 1) {
const rightBtnNode = bottomPart.getChildByName('btn_right'); return;
//节点中添加了button组件 则可以添加click事件监听 }
rightBtnNode.on('click', () => {
if (!this._cantouch) { this.curPage = 1;
return; this.rightMove();
}
if (this.curPage == 1) { cc.audioEngine.play(this.audioBtn.clip, false, 0.5);
return; });
} },
this.curPage = 1 leftMove() {
this.rightMove(); this._cantouch = false;
const len = this.pic1.parent.width;
cc.audioEngine.play(this.audioBtn.clip, false, 0.5) cc.tween(this.pic1).to(1, { x: this.pic1.baseX }, { easing: "cubicInOut" }).start();
})
}, cc.tween(this.pic2)
.to(1, { x: this.pic2.baseX }, { easing: "cubicInOut" })
leftMove() { .call(() => {
this._cantouch = false; this._cantouch = true;
const len = this.pic1.parent.width; })
cc.tween(this.pic1) .start();
.to(1, { x: this.pic1.baseX }, { easing: 'cubicInOut' }) },
.start();
rightMove() {
cc.tween(this.pic2) this._cantouch = false;
.to(1, { x: this.pic2.baseX }, { easing: 'cubicInOut' }) const len = this.pic1.parent.width;
.call(() => { cc.tween(this.pic1)
this._cantouch = true; .to(1, { x: this.pic1.baseX - len }, { easing: "cubicInOut" })
}) .start();
.start();
}, cc.tween(this.pic2)
.to(1, { x: this.pic2.baseX - len }, { easing: "cubicInOut" })
rightMove() { .call(() => {
this._cantouch = false; this._cantouch = true;
const len = this.pic1.parent.width; })
cc.tween(this.pic1) .start();
.to(1, { x: this.pic1.baseX - len }, { easing: 'cubicInOut' }) },
.start(); // update (dt) {},
cc.tween(this.pic2) // ------------------------------------------------
.to(1, { x: this.pic2.baseX - len }, { easing: 'cubicInOut' }) getSprNode(resName) {
.call(() => { const sf = cc.find("Canvas/res/img/" + resName).getComponent(cc.Sprite).spriteFrame;
this._cantouch = true; const node = new cc.Node();
}) node.addComponent(cc.Sprite).spriteFrame = sf;
.start(); return node;
}, },
// update (dt) {},
getSpriteFrimeByUrl(url, cb) {
cc.loader.load({ url }, (err, img) => {
const spriteFrame = new cc.SpriteFrame(img);
if (cb) {
cb(spriteFrame);
}
});
},
getSprNodeByUrl(url, cb) {
const node = new cc.Node();
const spr = node.addComponent(cc.Sprite);
this.getSpriteFrimeByUrl(url, (sf) => {
spr.spriteFrame = sf;
if (cb) {
cb(node);
}
});
},
playAudioByUrl(audio_url, cb = null) {
if (audio_url) {
cc.assetManager.loadRemote(audio_url, (err, audioClip) => {
const audioId = cc.audioEngine.play(audioClip, false, 0.8);
// ------------------------------------------------ if (cb) {
getSprNode(resName) { cc.audioEngine.setFinishCallback(audioId, () => {
const sf = cc.find('Canvas/res/img/' + resName).getComponent(cc.Sprite).spriteFrame; cb();
const node = new cc.Node(); });
node.addComponent(cc.Sprite).spriteFrame = sf; }
return node; });
}, }
},
getSpriteFrimeByUrl(url, cb) { // ------------------------------------------
cc.loader.load({ url }, (err, img) => {
const spriteFrame = new cc.SpriteFrame(img)
if (cb) {
cb(spriteFrame);
}
})
},
getSprNodeByUrl(url, cb) {
const node = new cc.Node();
const spr = node.addComponent(cc.Sprite);
this.getSpriteFrimeByUrl(url, (sf) => {
spr.spriteFrame = sf;
if (cb) {
cb(node);
}
})
},
playAudioByUrl(audio_url, cb = null) {
if (audio_url) {
cc.assetManager.loadRemote(audio_url, (err, audioClip) => {
const audioId = cc.audioEngine.play(audioClip, false, 0.8);
if (cb) {
cc.audioEngine.setFinishCallback(audioId, () => {
cb();
});
}
});
}
},
// ------------------------------------------
}); });
{ {
"game": { "game": {
"name": "未知游戏", "name": "UNKNOW GAME",
"appid": "UNKNOW" "appid": "UNKNOW"
} }
} }
\ No newline at end of file
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