Commit d380d584 authored by limingzhe's avatar limingzhe

fix: debug

parent c71b356e
No preview for this file type
...@@ -2,8 +2,6 @@ ...@@ -2,8 +2,6 @@
cocos creator技术框架下的H5互动模板框架脚手架,基于cocos creator实现快速开发基于绘玩云的H5互动课件。 cocos creator技术框架下的H5互动模板框架脚手架,基于cocos creator实现快速开发基于绘玩云的H5互动课件。
[视频教程传送门](https://www.bilibili.com/video/BV1Dq4y1t7n5/)
# 使用简介 # 使用简介
## 前期准备 ## 前期准备
...@@ -51,30 +49,29 @@ npm start ...@@ -51,30 +49,29 @@ npm start
``` ```
* 打开浏览器:http://staging-teach.ireadabc.com/template_ci/debug * 打开浏览器:http://staging-teach.ireadabc.com/template_ci/debug
* [点击查看调试视频教程](https://www.bilibili.com/video/BV1Dq4y1t7n5?p=8) * 点击右上角齿轮,选择技术选型、调试模式选择“普通”
### 真机调试
* 下载模板调试专用app
安卓下载: ### 互动模板
http://download-iplayabc.oss-cn-beijing.aliyuncs.com/iDebugABC.apk
![avatar](http://staging-teach.cdn.ireadabc.com/084f2f95-8213-4c5a-8c46-b194819d7677.png)
* 找到项目根路径下 index.html 文件
* 在引入JS的位置将air.js改为air_online_open.js
* 启动本地服务
iOS下载: ```
npm start
```
由于调试APP没有上架App Store 所以需要先获取手机的UDID 发送给我们的技术支持,加入后才可以扫码下载安装 * 打开浏览器:http://staging-teach.ireadabc.com/template_ci/debug
获取UDID:https://www.pgyer.com/tools/udid * 点击右上角齿轮,选择技术选型、调试模式选择“互动”
下载iOS: https://www.pgyer.com/gS0X * 左侧老师、右侧学生
### 真机调试
有时可能需要反复调试一些功能性的问题,与原生APP相关或者手上临时没有设备,我们提供了一个网页版的调试方式 * 下载模板调试专用app
http://staging-openapi.iteachabc.com/api/courseware/v1/middle/debug http://download-iplayabc.oss-cn-beijing.aliyuncs.com/iDebugABC.apk
![avatar](http://staging-teach.cdn.ireadabc.com/084f2f95-8213-4c5a-8c46-b194819d7677.png)
* 启动本地服务 * 启动本地服务
...@@ -84,12 +81,4 @@ npm start ...@@ -84,12 +81,4 @@ npm start
* 手机和电脑连接同一个Wifi * 手机和电脑连接同一个Wifi
* 打开调试app,根据提示输入IP地址,点击开始就可以在手机上预览模板了 * 打开调试app,根据提示输入IP地址,点击开始就可以在手机上预览模板了
* 使用 console.log("==调试信息=="); 可以打印日志进行必要的调试 * 使用 this.log("==调试信息=="); 可以打印日志进行必要的调试
* 点击左上角 “logcat” 可以查看运行日志,(logcat是可以按住拖动的, 所以不用考虑UI遮挡问题) \ No newline at end of file
### 注意事项及常见问题
* 项目里所有文件及文件夹的命名方式要注意不能包含空格、汉字、减号
* 开发者新建的脚本文件(.js/.ts)的文件名必须包含项目名称,例如在 test_01 项目中添加一个脚本文件(如想命名为 hello.ts );则需要命名为 hello_test_01.ts
* 项目里尽量不要使用setTimeout、setInterval等定时器,如果使用了记得在onDestroy中释放掉(onDestroy 是指CocosCreator的生命周期钩子)
* 理论上禁止使用全局变量,因为模板到线上会进行组装,常见问题是一个模板使用多次造成全局变量被读脏
import { asyncDelay, onHomeworkFinish } from "../script/util";
import { MyCocosSceneComponent } from "../script/MyCocosSceneComponent";
const { ccclass, property } = cc._decorator;
@ccclass
export default class SceneComponent extends MyCocosSceneComponent {
addPreloadImage() {
// TODO 根据自己的配置预加载图片资源
this._imageResList.push({ url: this.data.pic_url });
this._imageResList.push({ url: this.data.pic_url_2 });
}
addPreloadAudio() {
// TODO 根据自己的配置预加载音频资源
this._audioResList.push({ url: this.data.audio_url });
}
addPreloadAnima() {
}
async onLoadEnd() {
// TODO 加载完成后的逻辑写在这里, 下面的代码仅供参考
this.initData();
this.initView();
this.initListener();
}
_cantouch = null;
initData() {
// 所有全局变量 默认都是null
this._cantouch = true;
}
initView() {
this.initBg();
this.initPic();
this.initBtn();
this.initIcon();
}
initBg() {
const bgNode = cc.find('Canvas/bg');
bgNode.scale = this._mapScaleMax;
}
pic1 = null;
pic2 = null;
initPic() {
const canvas = cc.find('Canvas');
const maxW = canvas.width * 0.7;
this.getSprNodeByUrl(this.data.pic_url, (sprNode) => {
const picNode1 = sprNode;
picNode1.scale = maxW / picNode1.width;
picNode1.baseX = picNode1.x;
canvas.addChild(picNode1);
this.pic1 = picNode1;
const labelNode = new cc.Node();
labelNode.color = cc.Color.YELLOW;
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;
picNode1.addChild(labelNode);
});
this.getSprNodeByUrl(this.data.pic_url_2, (sprNode) => {
const picNode2 = sprNode;
picNode2.scale = maxW / picNode2.width;
canvas.addChild(picNode2);
picNode2.x = canvas.width;
picNode2.baseX = picNode2.x;
this.pic2 = picNode2;
const labelNode = new cc.Node();
const label = labelNode.addComponent(cc.RichText);
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;
picNode2.addChild(labelNode);
});
}
initIcon() {
const iconNode = this.getSprNode('icon');
iconNode.zIndex = 5;
iconNode.anchorX = 1;
iconNode.anchorY = 1;
iconNode.parent = cc.find('Canvas');
iconNode.x = iconNode.parent.width / 2 - 10;
iconNode.y = iconNode.parent.height / 2 - 10;
iconNode.on(cc.Node.EventType.TOUCH_START, () => {
this.playAudioByUrl(this.data.audio_url);
})
}
curPage = null;
initBtn() {
this.curPage = 0;
const bottomPart = cc.find('Canvas/bottomPart');
bottomPart.zIndex = 5; // 提高层级
bottomPart.x = bottomPart.parent.width / 2;
bottomPart.y = -bottomPart.parent.height / 2;
const leftBtnNode = bottomPart.getChildByName('btn_left');
//节点中添加了button组件 则可以添加click事件监听
leftBtnNode.on('click', () => {
if (!this._cantouch) {
return;
}
if (this.curPage == 0) {
return;
}
this.curPage = 0
this.leftMove();
this.playLocalAudio('btn');
})
const rightBtnNode = bottomPart.getChildByName('btn_right');
//节点中添加了button组件 则可以添加click事件监听
rightBtnNode.on('click', () => {
if (!this._cantouch) {
return;
}
if (this.curPage == 1) {
return;
}
this.curPage = 1
this.rightMove();
// 游戏结束时需要调用这个方法通知系统作业完成
onHomeworkFinish();
this.playLocalAudio('btn');
})
}
leftMove() {
this._cantouch = false;
const len = this.pic1.parent.width;
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' })
.call(() => {
this._cantouch = true;
})
.start();
}
rightMove() {
this._cantouch = false;
const len = this.pic1.parent.width;
cc.tween(this.pic1)
.to(1, { x: this.pic1.baseX - len }, { easing: 'cubicInOut' })
.start();
cc.tween(this.pic2)
.to(1, { x: this.pic2.baseX - len }, { easing: 'cubicInOut' })
.call(() => {
this._cantouch = true;
})
.start();
}
// update (dt) {},
initListener() {
}
playLocalAudio(audioName) {
const audio = cc.find(`Canvas/res/audio/${audioName}`).getComponent(cc.AudioSource);
return new Promise((resolve, reject) => {
const id = cc.audioEngine.playEffect(audio.clip, false);
cc.audioEngine.setFinishCallback(id, () => {
resolve(id);
});
})
}
}
import { defaultData } from "../script/defaultData";
export class MyCocosSceneComponent extends cc.Component {
// 生命周期 onLoad
onLoad() {
this.initSceneData();
this.initSize();
}
_imageResList = null;
_audioResList = null;
_animaResList = null;
initSceneData() {
this._imageResList = [];
this._audioResList = [];
this._animaResList = [];
}
_designSize = null; // 设计分辨率
_frameSize = null; // 屏幕分辨率
_mapScaleMin = null; // 场景中常用缩放(取大值)
_mapScaleMax = null; // 场景中常用缩放(取小值)
_cocosScale = null; // cocos 自缩放 (较少用到)
initSize() {
// 注意cc.winSize只有在适配后(修改fitHeight/fitWidth后)才能获取到正确的值,因此使用cc.getFrameSize()来获取初始的屏幕大小
let screen_size = cc.view.getFrameSize().width / cc.view.getFrameSize().height
let design_size = cc.Canvas.instance.designResolution.width / cc.Canvas.instance.designResolution.height
let f = screen_size >= design_size
cc.Canvas.instance.fitHeight = f
cc.Canvas.instance.fitWidth = !f
const frameSize = cc.view.getFrameSize();
this._frameSize = frameSize;
this._designSize = cc.view.getDesignResolutionSize();
let sx = cc.winSize.width / frameSize.width;
let sy = cc.winSize.height / frameSize.height;
this._cocosScale = Math.min(sx, sy);
sx = frameSize.width / this._designSize.width;
sy = frameSize.height / this._designSize.height;
this._mapScaleMin = Math.min(sx, sy) * this._cocosScale;
this._mapScaleMax = Math.max(sx, sy) * this._cocosScale;
cc.director['_scene'].width = frameSize.width;
cc.director['_scene'].height = frameSize.height;
}
data = null;
// 生命周期 start
start() {
if (window && (<any>window).courseware && (<any>window).courseware.getData) {
(<any>window).courseware.getData((data) => {
this.log('data:' + data);
this.data = data || this.getDefaultData();
this.data = JSON.parse(JSON.stringify(this.data));
this.preloadItem();
})
} else {
this.data = this.getDefaultData();
this.preloadItem();
}
}
getDefaultData() {
return defaultData;
}
preloadItem() {
this.addPreloadImage();
this.addPreloadAudio();
this.addPreloadAnima();
this.preload();
}
addPreloadImage() {
}
addPreloadAudio() {
}
addPreloadAnima() {
}
preload() {
const preloadArr = this._imageResList.concat(this._audioResList).concat(this._animaResList);
cc.assetManager.preloadAny(preloadArr, null, null, async (err, data) => {
if (window && window["air"]) {
// window["air"].onCourseInScreen = (next) => {
// window["air"].isCourseInScreen = true;
// this.onLoadEnd();
// next();
// };
await this.onLoadEnd();
window["air"].hideAirClassLoading();
} else {
await this.onLoadEnd();
}
cc.debug.setDisplayStats(false);
});
}
log (str) {
const node = cc.find('middleLayer');
if(node){
node.getComponent('middleLayer').log(str);
}else{
console.log(str);
}
}
async onLoadEnd() {
}
// ------------------------------------------------
getSprNode(resName) {
const sf = cc.find('Canvas/res/img/' + resName).getComponent(cc.Sprite).spriteFrame;
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();
});
}
});
}else{
cb && cb();
}
}
}
\ No newline at end of file
export const defaultData = {
"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"
}
\ No newline at end of file
{
"ver": "2.3.5",
"uuid": "18d07592-51a9-421e-8972-0f67b68d29e1",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": false,
"genMipmaps": false,
"packable": true,
"width": 144,
"height": 144,
"platformSettings": {},
"subMetas": {
"icon": {
"ver": "1.0.4",
"uuid": "6fbc30a8-3c49-44ae-8ba4-7f56f385b78a",
"rawTextureUuid": "18d07592-51a9-421e-8972-0f67b68d29e1",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0,
"offsetY": -0.5,
"trimX": 3,
"trimY": 2,
"width": 138,
"height": 141,
"rawWidth": 144,
"rawHeight": 144,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}
\ No newline at end of file
// Learn TypeScript:
// - https://docs.cocos.com/creator/manual/en/scripting/typescript.html
// Learn Attribute:
// - https://docs.cocos.com/creator/manual/en/scripting/reference/attributes.html
// Learn life-cycle callbacks:
// - https://docs.cocos.com/creator/manual/en/scripting/life-cycle-callbacks.html
const {ccclass, property} = cc._decorator;
@ccclass
export default class NewClass extends cc.Component {
@property(cc.Label)
label: cc.Label = null;
@property
text: string = 'hello';
// LIFE-CYCLE CALLBACKS:
// onLoad () {}
start () {
}
// update (dt) {}
}
{ {
"ver": "1.0.8", "ver": "1.0.8",
"uuid": "f8b451ff-857c-4ca8-9870-866bc5154a29", "uuid": "9d11d90b-6323-43f3-833d-7c491761e70e",
"isPlugin": false, "isPlugin": false,
"loadPluginInWeb": true, "loadPluginInWeb": true,
"loadPluginInNative": true, "loadPluginInNative": true,
......
This diff is collapsed.
{ {
"ver": "1.0.8", "ver": "1.0.8",
"uuid": "c41b0e51-55d7-443c-af3a-b22c3dd9b9e5", "uuid": "28112492-beae-4e6a-a0f4-e7b31a14f575",
"isPlugin": false, "isPlugin": false,
"loadPluginInWeb": true, "loadPluginInWeb": true,
"loadPluginInNative": true, "loadPluginInNative": true,
......
This diff is collapsed.
{ {
"ver": "1.0.8", "ver": "1.0.8",
"uuid": "408a67f8-65fa-4cf1-8cf2-83e20e1a0fd5", "uuid": "c7a121a7-92a9-440e-a7e9-d4f5141e3f45",
"isPlugin": false, "isPlugin": false,
"loadPluginInWeb": true, "loadPluginInWeb": true,
"loadPluginInNative": true, "loadPluginInNative": true,
......
...@@ -177,85 +177,15 @@ export function playAudio(audioClip, cb = null) { ...@@ -177,85 +177,15 @@ export function playAudio(audioClip, cb = null) {
export async function asyncDelay(time) { export async function asyncDelay(time) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
try { try {
cc.tween(cc.find('Canvas')) setTimeout(() => {
.delay(time) resolve(null);
.call(()=>{ }, time * 1000);
resolve(null);
})
.start();
} catch (e) { } catch (e) {
reject(e); reject(e);
} }
}) })
} }
export async function asyncLoadDragonBoneAnime(node, { skeJsonData: { url: skeJsonDataUrl }, texJsonData: { url: texJsonDataUrl }, texPngData: { url: texPngDataUrl } }) {
if (!texPngDataUrl || !texJsonDataUrl || !texPngDataUrl
|| texPngDataUrl == '' || texJsonDataUrl == '' || texPngDataUrl == '') {
return;
}
return new Promise((resolve, reject) => {
if (node.animaNode) {
node.animaNode.removeFromParent();
}
const animaNode = new cc.Node();
animaNode.name = 'animaNode';
animaNode.parent = node;
animaNode.active = true;
node.animaNode = animaNode;
const dragonDisplay = animaNode.addComponent(dragonBones.ArmatureDisplay);
const loadTexture = new Promise((resolve, reject) => {
cc.assetManager.loadRemote(texPngDataUrl, (error, texture) => {
if (error) {
reject(error);
}
resolve(texture);
});
});
const loadTexJsonData = new Promise((resolve, reject) => {
cc.assetManager.loadAny({ url: texJsonDataUrl }, (error, atlasJson) => {
if (error) {
reject(error);
}
resolve(atlasJson);
});
});
const loadSkeJsonData = new Promise((resolve, reject) => {
cc.assetManager.loadAny({ url: skeJsonDataUrl }, (error, dragonBonesJson) => {
if (error) {
reject(error);
}
resolve(dragonBonesJson);
});
});
Promise.all([loadTexture, loadTexJsonData, loadSkeJsonData]).then(([texture, atlasJson, dragonBonesJson]) => {
const atlas = new dragonBones.DragonBonesAtlasAsset();
atlas.atlasJson = JSON.stringify(atlasJson);
atlas.texture = texture;
const asset = new dragonBones.DragonBonesAsset();
asset.dragonBonesJson = JSON.stringify(dragonBonesJson);
dragonDisplay.dragonAtlasAsset = atlas;
dragonDisplay.dragonAsset = asset;
let armatureNames = dragonBonesJson.armature.map(data => data.name);
if (armatureNames.length > 0) {
dragonDisplay.armatureName = armatureNames[0];
}
resolve(animaNode);
});
});
}
export class FireworkSettings { export class FireworkSettings {
baseNode; // 父节点 baseNode; // 父节点
nodeList; // 火花节点的array nodeList; // 火花节点的array
...@@ -411,65 +341,14 @@ export function showTrebleFirework(baseNode, rabbonList) { ...@@ -411,65 +341,14 @@ export function showTrebleFirework(baseNode, rabbonList) {
showFireworks(right); showFireworks(right);
} }
export function httpHeadCall(requsetUrl: string, callback) { export function onHomeworkFinish() {
let xhr = new XMLHttpRequest();
console.log("Status: Send Post Request to " + requsetUrl);
try {
xhr.onreadystatechange = () => {
try {
console.log('xhr.readyState: ', xhr.readyState);
if (xhr.readyState == 4) {
if ((xhr.status >= 200 && xhr.status < 400)) {
callback(true);
} else {
callback(false);
}
}
} catch (e) {
console.log(e)
}
};
xhr.open("HEAD", requsetUrl, true);
xhr.send();
xhr.timeout = 15000;
xhr.onerror = (e) => {
callback(false);
};
xhr.ontimeout = (e) => {
callback(false);
};
} catch (e) {
console.log("Send Get Request error: ", e);
}
}
export function onHomeworkFinish(data = "", callback = ()=>{}) {
const middleLayer = cc.find('middleLayer');
if (middleLayer) {
const middleLayerComponent = middleLayer.getComponent('middleLayer');
middleLayerComponent.onHomeworkFinish(callback, data);
} else {
console.log('onHomeworkFinish', JSON.stringify(data));
}
}
export function callMiddleLayerFunction(apiName: string, data: any, callback: Function) {
const middleLayer = cc.find('middleLayer'); const middleLayer = cc.find('middleLayer');
if (middleLayer) { if (middleLayer) {
const middleLayerComponent = middleLayer.getComponent('middleLayer'); const middleLayerComponent = middleLayer.getComponent('middleLayer');
middleLayerComponent.callMiddleLayerFunction(apiName, data, callback); if (middleLayerComponent.role == 'student') {
} else { middleLayerComponent.onHomeworkFinish(() => { });
console.log('callMiddleLayerFunction: ' + apiName); }
}
}
export function showTips(tips) {
const middleLayer = cc.find('middleLayer');
if (middleLayer) {
middleLayer.getComponent('middleLayer').showTips(tips);
} else { } else {
console.log(tips); console.log('onHomeworkFinish');
} }
} }
\ No newline at end of file
{ {
"ver": "2.3.5", "ver": "2.3.5",
"uuid": "9a79969a-0506-48d4-bc98-3c05d109b027", "uuid": "85f6015e-a4a1-4657-b9cc-d3416d6f83b7",
"type": "sprite", "type": "sprite",
"wrapMode": "clamp", "wrapMode": "clamp",
"filterMode": "bilinear", "filterMode": "bilinear",
"premultiplyAlpha": false, "premultiplyAlpha": false,
"genMipmaps": false, "genMipmaps": false,
"packable": true, "packable": true,
"width": 61, "width": 73,
"height": 67, "height": 77,
"platformSettings": {}, "platformSettings": {},
"subMetas": { "subMetas": {
"btn_left": { "Btn": {
"ver": "1.0.4", "ver": "1.0.4",
"uuid": "ce19457d-e8f3-4c38-ae3e-d4b99208ddb5", "uuid": "739a5b2c-f5a3-417c-9102-5c10cf2fbf39",
"rawTextureUuid": "9a79969a-0506-48d4-bc98-3c05d109b027", "rawTextureUuid": "85f6015e-a4a1-4657-b9cc-d3416d6f83b7",
"trimType": "auto", "trimType": "auto",
"trimThreshold": 1, "trimThreshold": 1,
"rotated": false, "rotated": false,
...@@ -22,10 +22,10 @@ ...@@ -22,10 +22,10 @@
"offsetY": 0, "offsetY": 0,
"trimX": 0, "trimX": 0,
"trimY": 0, "trimY": 0,
"width": 61, "width": 73,
"height": 67, "height": 77,
"rawWidth": 61, "rawWidth": 73,
"rawHeight": 67, "rawHeight": 77,
"borderTop": 0, "borderTop": 0,
"borderBottom": 0, "borderBottom": 0,
"borderLeft": 0, "borderLeft": 0,
......
{ {
"ver": "2.3.5", "ver": "2.3.5",
"uuid": "e1b4d971-9876-4832-803a-5a321964a78b", "uuid": "89e1cbbf-a096-4d31-b3a2-a5c84009d26b",
"type": "sprite", "type": "sprite",
"wrapMode": "clamp", "wrapMode": "clamp",
"filterMode": "bilinear", "filterMode": "bilinear",
"premultiplyAlpha": false, "premultiplyAlpha": false,
"genMipmaps": false, "genMipmaps": false,
"packable": true, "packable": true,
"width": 1280, "width": 416,
"height": 720, "height": 131,
"platformSettings": {}, "platformSettings": {},
"subMetas": { "subMetas": {
"bg": { "bg": {
"ver": "1.0.4", "ver": "1.0.4",
"uuid": "8288e3d4-4c75-4b27-8f01-f7014417f4dd", "uuid": "126a1b5a-3af8-498b-8d56-6afefeea3cb2",
"rawTextureUuid": "e1b4d971-9876-4832-803a-5a321964a78b", "rawTextureUuid": "89e1cbbf-a096-4d31-b3a2-a5c84009d26b",
"trimType": "auto", "trimType": "auto",
"trimThreshold": 1, "trimThreshold": 1,
"rotated": false, "rotated": false,
...@@ -22,10 +22,10 @@ ...@@ -22,10 +22,10 @@
"offsetY": 0, "offsetY": 0,
"trimX": 0, "trimX": 0,
"trimY": 0, "trimY": 0,
"width": 1280, "width": 416,
"height": 720, "height": 131,
"rawWidth": 1280, "rawWidth": 416,
"rawHeight": 720, "rawHeight": 131,
"borderTop": 0, "borderTop": 0,
"borderBottom": 0, "borderBottom": 0,
"borderLeft": 0, "borderLeft": 0,
......
{ {
"ver": "2.3.5", "ver": "2.3.5",
"uuid": "efa5fa09-a4dd-4bfc-ab7e-17c19f85408f", "uuid": "57d87163-6607-400e-a306-35b94dca3e64",
"type": "sprite", "type": "sprite",
"wrapMode": "clamp", "wrapMode": "clamp",
"filterMode": "bilinear", "filterMode": "bilinear",
"premultiplyAlpha": false, "premultiplyAlpha": false,
"genMipmaps": false, "genMipmaps": false,
"packable": true, "packable": true,
"width": 366, "width": 50,
"height": 336, "height": 106,
"platformSettings": {}, "platformSettings": {},
"subMetas": { "subMetas": {
"1orange": { "btn_last": {
"ver": "1.0.4", "ver": "1.0.4",
"uuid": "43d1e79d-6de8-4dcb-b8ce-d767df7913aa", "uuid": "3d69c061-b4ba-43b5-9030-73c48675b2f6",
"rawTextureUuid": "efa5fa09-a4dd-4bfc-ab7e-17c19f85408f", "rawTextureUuid": "57d87163-6607-400e-a306-35b94dca3e64",
"trimType": "auto", "trimType": "auto",
"trimThreshold": 1, "trimThreshold": 1,
"rotated": false, "rotated": false,
"offsetX": 0, "offsetX": 0,
"offsetY": -0.5, "offsetY": 0,
"trimX": 0, "trimX": 0,
"trimY": 1, "trimY": 0,
"width": 366, "width": 50,
"height": 335, "height": 106,
"rawWidth": 366, "rawWidth": 50,
"rawHeight": 336, "rawHeight": 106,
"borderTop": 0, "borderTop": 0,
"borderBottom": 0, "borderBottom": 0,
"borderLeft": 0, "borderLeft": 0,
......
{ {
"ver": "2.3.5", "ver": "2.3.5",
"uuid": "d582359e-924e-4ee9-9964-1fc4bb417e71", "uuid": "fae74f6d-28e7-4a7a-bb36-8ff0a6a9f4df",
"type": "sprite", "type": "sprite",
"wrapMode": "clamp", "wrapMode": "clamp",
"filterMode": "bilinear", "filterMode": "bilinear",
"premultiplyAlpha": false, "premultiplyAlpha": false,
"genMipmaps": false, "genMipmaps": false,
"packable": true, "packable": true,
"width": 61, "width": 50,
"height": 67, "height": 106,
"platformSettings": {}, "platformSettings": {},
"subMetas": { "subMetas": {
"btn_right": { "btn_next": {
"ver": "1.0.4", "ver": "1.0.4",
"uuid": "e5a2dbaa-a677-4a32-90d7-a1b057d7fb59", "uuid": "f57e2163-758a-4494-b874-128450c62a5f",
"rawTextureUuid": "d582359e-924e-4ee9-9964-1fc4bb417e71", "rawTextureUuid": "fae74f6d-28e7-4a7a-bb36-8ff0a6a9f4df",
"trimType": "auto", "trimType": "auto",
"trimThreshold": 1, "trimThreshold": 1,
"rotated": false, "rotated": false,
"offsetX": -0.5, "offsetX": 0,
"offsetY": 0.5, "offsetY": 0,
"trimX": 0, "trimX": 0,
"trimY": 0, "trimY": 0,
"width": 60, "width": 50,
"height": 66, "height": 106,
"rawWidth": 61, "rawWidth": 50,
"rawHeight": 67, "rawHeight": 106,
"borderTop": 0, "borderTop": 0,
"borderBottom": 0, "borderBottom": 0,
"borderLeft": 0, "borderLeft": 0,
......
This diff is collapsed.
...@@ -128,8 +128,5 @@ ...@@ -128,8 +128,5 @@
} }
} }
}, },
"defaultProject": "ng-template-generator", "defaultProject": "ng-template-generator"
"cli": { }
"analytics": "5f501d82-8f25-4817-a608-9ac70d1f1f70"
}
}
\ No newline at end of file
This diff is collapsed.
...@@ -29,7 +29,7 @@ ...@@ -29,7 +29,7 @@
"compressing": "^1.5.0", "compressing": "^1.5.0",
"ng-zorro-antd": "^8.5.2", "ng-zorro-antd": "^8.5.2",
"rxjs": "~6.5.4", "rxjs": "~6.5.4",
"node-sass": "4.0.0", "node-sass": "^4.0.0",
"spark-md5": "^3.0.0", "spark-md5": "^3.0.0",
"tslib": "^1.10.0", "tslib": "^1.10.0",
"zone.js": "~0.10.2" "zone.js": "~0.10.2"
...@@ -55,4 +55,4 @@ ...@@ -55,4 +55,4 @@
"tslint": "~5.18.0", "tslint": "~5.18.0",
"typescript": "~3.7.5" "typescript": "~3.7.5"
} }
} }
\ No newline at end of file
<div class="d-flex" (drop)="handle_drop($event)" (dragover)="handle_dragover($event)"> <div class="d-flex">
<div class="p-btn-record d-flex"> <div class="p-btn-record d-flex">
<div class="btn-clear" style="cursor: pointer" (click)="onBtnClearAudio()" *ngIf="withRmBtn && (audioUrl || audioBlob)"> <div class="btn-clear" style="cursor: pointer" (click)="onBtnClearAudio()" *ngIf="withRmBtn && (audioUrl || audioBlob)">
<fa-icon icon="times"></fa-icon> <fa-icon icon="times"></fa-icon>
...@@ -45,19 +45,17 @@ ...@@ -45,19 +45,17 @@
<fa-icon icon="cog"></fa-icon> <fa-icon icon="cog"></fa-icon>
</div> </div>
</ng-template> </ng-template>
</div> </div>
<div class="p-progress ml-2" (click)="onBtnPlay()" *ngIf="audioUrl || audioBlob" <div class="p-progress ml-2" (click)="onBtnPlay()" *ngIf="audioUrl || audioBlob">
style="background-color: #70B603; width: 35px; height: 35px; border-radius: 35px; margin-left: 10px;margin-top:-1px"> <nz-progress [nzPercent]="percent" [nzWidth]="30" [nzFormat]="progressText"
<nz-progress [nzPercent]="percent" [nzWidth]="35" [nzFormat]="progressText" nzType="circle"></nz-progress>
nzType="circle"> <div class="p-btn-play" [style.left]="isPlaying?'8px':''">
</nz-progress>
<div class="p-btn-play"
style="color: white;margin-left: 2px;margin-top: 1px;"
[style.left]="isPlaying?'8px':''">
<fa-icon [icon]="playIcon"></fa-icon> <fa-icon [icon]="playIcon"></fa-icon>
</div> </div>
</div> </div>
<div class="audio-name">{{_audioName}}</div>
</div> </div>
...@@ -90,26 +90,17 @@ ...@@ -90,26 +90,17 @@
} }
.p-progress { .p-progress {
margin-top: 3.5px; margin-top: 2px;
position: relative; position: relative;
background-color: #27b43f;
border-radius: 15px;
line-height: 26px; line-height: 26px;
.p-btn-play { .p-btn-play {
position: absolute; position: absolute;
left: 11px; left: 10px;
top: 3px; top: 3px;
color: #ffffff; color: #555;
} }
} }
.audio-name{
margin-top: 3.5px;
position: relative;
margin-left: 7px;;
line-height: 26px;
}
:host ::ng-deep nz-upload { :host ::ng-deep nz-upload {
line-height: 33px; line-height: 33px;
} }
......
<div class="position-relative" (drop)="handle_drop($event)" (dragover)="handle_dragover($event)"> <div class="position-relative">
<button nz-button (click)="setAnimaBtnClick()" style=" border-radius: 0.5rem; border: 1px solid #ddd;" (dragover)="handle_dragover($event)"> <button nz-button (click)="setAnimaBtnClick()" style=" border-radius: 0.5rem; border: 1px solid #ddd;">
<i nz-icon nzType="tool" nzTheme="outline"></i> <i nz-icon nzType="tool" nzTheme="outline"></i>
{{btnName}} {{btnName}}
</button> </button>
......
...@@ -178,43 +178,4 @@ export class UploadDragonBoneComponent implements OnDestroy, OnChanges { ...@@ -178,43 +178,4 @@ export class UploadDragonBoneComponent implements OnDestroy, OnChanges {
ngOnDestroy() { ngOnDestroy() {
} }
linkInputed (ske, tex, png) {
this.skeJsonData["url"] = ske.url;
this.skeJsonData["name"] = ske.name;
this.texJsonData["url"] = tex.url;
this.texJsonData["name"] = tex.name;
this.texPngData["url"] = png.url;
this.texPngData["name"] = png.name;
this.animaPanelOk();
}
handle_dragover(e) {
e.preventDefault();
}
handle_drop(e) {
e.preventDefault();
const dt = e.dataTransfer.getData("text/plain");
console.log("handle_drop===", dt);
if (!dt) {
return;
}
try {
const {ske, tex, png} = JSON.parse(dt);
if (!ske || !tex || !png ||
ske.url.indexOf("teach")<0 || ske.url.indexOf("cdn")<0 || ske.url.indexOf(".json")<0 ||
tex.url.indexOf("teach")<0 || tex.url.indexOf("cdn")<0 || tex.url.indexOf(".json")<0 ||
png.url.indexOf("teach")<0 || png.url.indexOf("cdn")<0 || png.url.indexOf(".png")<0 ||
!ske.name || !tex.name || !png.name
) {
console.warn("handle_drop拖拽在线骨骼动画传递参数不合法,应该是{ske:{url:'', name:''},tex:{url:'', name:''},png:{url:'', name:''}}");
return;
}
this.linkInputed(ske, tex, png);
} catch (error) {
console.warn("handle_drop拖拽在线骨骼动画传递参数不合法,应该是{ske:{url:'', name:''},tex:{url:'', name:''},png:{url:'', name:''}}");
}
}
} }
<div class="position-relative" (drop)="handle_drop($event)" (dragover)="handle_dragover($event)"> <div class="position-relative">
<nz-upload class="p-image-uploader" [nzDisabled]="disableUpload" <nz-upload class="p-image-uploader" [nzDisabled]="disableUpload"
[nzShowUploadList]="false" [nzShowUploadList]="false"
nzAccept = "image/*" nzAccept = "image/*"
[nzAction]="uploadUrl" [nzAction]="uploadUrl"
[nzData]="uploadData" [nzData]="uploadData"
(nzChange)="handleChange($event)" (nzChange)="handleChange($event)">
>
<!--[nzBeforeUpload]="customUpload">--> <!--[nzBeforeUpload]="customUpload">-->
<div class="p-box d-flex align-items-center"> <div class="p-box d-flex align-items-center">
<div class="p-upload-icon" *ngIf="!picUrl && !uploading"> <div class="p-upload-icon" *ngIf="!picUrl && !uploading">
......
...@@ -155,39 +155,4 @@ export class UploadImageWithPreviewComponent implements OnDestroy, OnChanges { ...@@ -155,39 +155,4 @@ export class UploadImageWithPreviewComponent implements OnDestroy, OnChanges {
ngOnDestroy() { ngOnDestroy() {
} }
linkInputed (url) {
const file = {
response: {url}
};
const img = new Image();
img.addEventListener('load', () => {
const height = img.naturalHeight;
const width = img.naturalWidth;
file['height'] = height;
file['width'] = width;
img.remove();
this.imageUploaded.emit(file.response);
});
img.src = url;
this.picUrl = url;
}
handle_dragover(e) {
e.preventDefault();
}
handle_drop(e) {
const dt = e.dataTransfer.getData("text/plain");
console.log("handle_drop===", dt);
if (!dt || dt.indexOf("teach")<0 || dt.indexOf("cdn")<0) {
return;
}
const white = [".jpg", ".jpeg", ".png", ".bmp", ".JPG", ".JPEG", ".PNG", ".BMP"];
if (!white.includes(dt.substr(dt.lastIndexOf(".")))) {
return;
}
this.linkInputed(dt);
}
} }
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
# 配置文件
config.json
\ No newline at end of file
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
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