中国常用网站网址,网站开发社交网络功能的作用,网站人员队伍建设薄弱,网站建设 前端 后端微信小程序 - 龙骨图集拆分 注意目录结构演示动画废话一下业务逻辑注意点龙骨JSON图集结构 源码分享dragonbones-split.jsdragonbones-split.jsondragonbones-split.wxmldragonbones-split.wxssimgUtil.js 参考资料 注意
只支持了JSON版本
目录结构 演示动画 Spine播放器1.5.… 微信小程序 - 龙骨图集拆分 注意目录结构演示动画废话一下业务逻辑注意点龙骨JSON图集结构 源码分享dragonbones-split.jsdragonbones-split.jsondragonbones-split.wxmldragonbones-split.wxssimgUtil.js 参考资料 注意
只支持了JSON版本
目录结构 演示动画 Spine播放器1.5.0_PC端 Spine播放器1.5.1_移动端 废话一下
这是 SpinePlayer 2D骨骼动画播放器 - 微信小程序版 工具箱中的一个功能。 功能很简单80% 的代码都在处理交互逻辑以及移动端PC端兼容方面的问题。
业务逻辑
读取JSON文件和PNG图片。解析JSON得到所有小图在图集PNG图片中的 x,y 坐标和高宽。将PNG图集绘制到2d画布然后使用 canvasToTempFilePath 逐个截取区域保存为小图。最后将所有小图打包为 zip 供用户保存即可。
注意点
为了保证截取图片的清晰度画布尺寸需要用图片大小乘以设备像素比。图片填充完整再截图。否则会空白。所以会成两步操作比较稳妥。当然也可以自己控制延时自动调用一气呵成。因为 2d 画布不便于直接显示所以使用一个 image 组件来实现预览。 3.1. 方法是将 PNG 读取为 base64 赋给 image 组件 image src{{textureBase64}} / 3.2. 读取 PNG 为 base64 就这句 fs.readFileSync(‘临时图片路径’, base64) 当然用的时候还要拼接一下头详情看源码吧。
龙骨JSON图集结构
可以看出结构非常简单直接读 SubTexture 数组遍历它进行截取就可以了。
{imagePath: body_tex.png,width: 1024,SubTexture: [{height: 472,y: 1,width: 295,name: body/a_arm_L,x: 720}略。。。],name: body,height: 1024
}源码分享
dragonbones-split.js
// packageTools/pages/dragonbones-split/dragonbones-split.js
const fileUtil require(../../../utils/fileUtil.js);
const imgUtil require(./imgUtil.js);
const pixelRatio wx.getSystemInfoSync().pixelRatio; // 设备像素比
let canvas, ctx;
let globalData getApp().globalData;
let dbsplit globalData.PATH.dbsplit;
Page({/*** 页面的初始数据*/data: {canvasWidth: 300, // 画布宽canvasHeight: 150, // 画布高texture: {}, // 龙骨图集PNG图片信息 { path, width, height, orientation, type }textureBase64: , // 龙骨图集PNG图片的 Base64 编码subTextureList:[], // 龙骨图集JSON数据。包含拆分出的小图地址 tempFilePathshareZipFile: { name: , path: }, // 最终生成的ZIPjsonValue: , // 文本框内容PC 端用于获取 JSON// parseInt(0011, 2) 3status: 0, // 工作状态0000 初始0001 有图0010 有JSON0100 已拆图1000 已ZIPisPC: false,},/*** 生命周期函数--监听页面加载*/onLoad(options) {// 获取画布wx.createSelectorQuery().select(#myCanvas) // 在 WXML 中填入的 id.fields({ node: true, size: true }).exec((res) {canvas res[0].node; // Canvas 对象ctx canvas.getContext(2d); // 渲染上下文});// 创建工作目录fileUtil.mkdir(dbsplit); this.setData({ isPC: globalData.systemInfo.isPC });// 清理场地fileUtil.clearDirSync(globalData.PATH.dbsplit);},/*** 粘贴龙骨图集 JSON 的文本框发生变化*/onChange(event) {try {if(event.detail.value undefined){return;}let json imgUtil.parseJSON(event.detail.value);this.data.shareZipFile { name: ${json.name}.zip, path: ${dbsplit}/${json.name}.zip}; // zip路径打包时用this.setData({ jsonValue: event.detail.value,status: 2,subTextureList: json.SubTexture,});} catch (err) {console.log(err);this.setData({ jsonValue: ,status: 1, // this.data.status 13, // parseInt(1101, 2)subTextureList: [],});wx.showToast({ title: JSON格式有误, icon: error })}},/*** 选择龙骨图集PNG、JSON*/async choosePNGJSON(e){console.log(选择龙骨图集PNG、JSON);wx.showLoading({ title: 选择图集 });imgUtil.chooseAtlas({ count: 2}).then(res {if(res.length ! 2){wx.showToast({ title: 文件数量异常, icon: error });return;}let texture, json;if(res[0].type png){[texture, json] res;}else{[json, texture] res;}wx.showLoading({ title: 解析图集 });this.data.texture texture; // 更新图集PNG的相关信息。点击预览时会用到它的 paththis.data.shareZipFile { name: ${json.name}.zip, path: ${dbsplit}/${json.name}.zip}; // zip路径打包时用// 图集PNG填充画布this.fillCanvasWithImage(texture).then((){// 填充完成后在下一个时间片段更新数据this.setData({textureBase64: imgUtil.imageToBase64(texture.path, texture.type), // 更新 image 组件 srcsubTextureList: json.SubTexture, // 更新页面上的 subTexture 列表status: 2, // 已选图JSON完成解析},(){wx.hideLoading();});})}).catch(err {console.log(err);wx.showToast({ title: 图集选择失败, icon: error });this.setData({textureBase64: , // 更新 image 组件 srcsubTextureList: [], // 更新页面上的 subTexture 列表status: 0,});}).finally((){wx.hideLoading() })},/*** 选择龙骨图集PNG文件*/async choosePNG(e){console.log(选择龙骨图集PNG文件);let whereFrom globalData.systemInfo.isPC ? media : message;let promises imgUtil.chooseImg({ count: 1, whereFrom }); // media messageawait promises.then(res {let texture res[0];console.log(texture);this.setData({ texture , textureBase64: imgUtil.imageToBase64(texture.path, texture.type),status: 1,// 重选图片后清空已选的JSONjsonValue: , // 清除 JSON 数据subTextureList: [] // 清除 解析后的 JSON 数据}, res {this.fillCanvasWithImage(texture); // 填充画布});}).catch(err {console.log(err);wx.showToast({ title: 选择图片失败, icon: error });this.setData({ texture: {} , textureBase64: ,status: 0, // this.data.status 14,});});},/*** 将图片绘制到画布*/fillCanvasWithImage(imageInfo){let { path, width, height, orientation, type } imageInfo;// 按图片大小更新画布尺寸canvas.width width * pixelRatio;canvas.height height * pixelRatio;ctx.scale(pixelRatio, pixelRatio);return new Promise((resolve, reject){// 更新画布 渲染宽高。完成后绘制图片到画布this.setData({ canvasWidth: width, canvasHeight: height}, res {const image canvas.createImage(); // 创建图片对象image.onload () ctx.drawImage(image, 0, 0); // 图片加载完成在回调中将其绘制到画布image.src path; // 设置图片 srcresolve();});});},/*** 解析JSON并拆分图集*/async parseJsonAndSplitIMG(e){console.log(解析JSON并拆分图集);if(this.data.status 1){wx.showToast({ title: 请选择图片, icon: error});return;}if(this.data.status 2){wx.showToast({ title: 请提供JSON, icon: error});return;}this.splitIMG();},/*** 拆分龙骨图集PNG文件*/async splitIMG(e){console.log(拆分龙骨图集PNG文件);let pArr this.data.subTextureList.map(subTexture {return new Promise((resolve, reject) {let { x, y, width, height, } subTexture;wx.canvasToTempFilePath({x, y, width, height, canvas,destWidth: width,destHeight: height,fileType: png,success: res {console.log(res.tempFilePath);subTexture.tempFilePath res.tempFilePath;resolve(subTexture);},fail: reject});});});Promise.all(pArr).then(async res {await this.creatZip(res);this.setData({ status: 3, }); // 更新状态完成拆图}).catch(err {this.setData({ status: 2, });});},/*** 将拆好的小图打包为 ZIP*/async creatZip(subTextureList){console.log(将拆好的小图打包为 ZIP);try {// 图片列表let fileList subTextureList.map(subTexture ({ name: subTexture.name, path: subTexture.tempFilePath}));// 创建压缩包await fileUtil.zip(fileList, this.data.shareZipFile.path, progress { wx.showLoading({ title: progress.msg, });if(progress.percent 100){setTimeout(wx.hideLoading, 200);}});// 更新状态console.log(this.data.shareZipFile.path);this.setData({subTextureList});} catch (err) {console.error(err)wx.showToast({ icon: error, title: 打包失败 });this.setData({shareZipFile: {}});} finally {wx.hideLoading();}},/*** 将拆分后的文件打包导出*/saveIMG(e){console.log(将拆分后的文件打包导出);console.log(this.data.subTextureList);if(this.data.status 3){wx.showToast({ title: 尚未拆图, icon: error });return;}// 如果是电脑端否则是手机端if(globalData.systemInfo.platform windows || globalData.systemInfo.platform mac// || globalData.systemInfo.platform devtools){wx.saveFileToDisk({filePath: this.data.shareZipFile.path,success: console.log,fail: console.error});} else {wx.shareFileMessage({filePath: this.data.shareZipFile.path,fileName: this.data.shareZipFile.name,success: console.log,fail: console.error,complete: console.log});}},async previewTexture(e){if(!!this.data.texture.path false globalData.systemInfo.isPC){await this.choosePNG();return;}wx.previewImage({urls: [this.data.texture.path],success: (res) {},fail: (res) {},complete: (res) {},})},previewSubTexture(e){if(this.data.status 3){wx.showToast({ title: 尚未拆分, icon:error });return;}wx.previewImage({urls: this.data.subTextureList.map(obj obj.tempFilePath),current: e.currentTarget.dataset.texturePath,showmenu: true,success: (res) {},fail: (res) {},complete: (res) {},})}
})dragonbones-split.json
{usingComponents: {}
}dragonbones-split.wxml
!--packageTools/pages/dragonbones-split/dragonbones-split.wxml--
!-- 大家好我是笨笨笨笨的笨笨笨的笨谢谢https://blog.csdn.net/jx520/ --
view classmain-container bg-60 view classtop-container poem-container poem-h bg-24 stylemin-height: 200rpx;view萍/viewview无根翡翠顺江涛, 有尾鱼虾逆水潮。/viewview行宿天涯本无路, 去留飘渺也逍遥。/view/viewview classtop-container scroll-y home-top disabledimage classtexture chessboard src{{textureBase64}} bind:tappreviewTexture/view wx:for{{subTextureList}} wx:keynamebindtappreviewSubTexture data-texture-name{{item.name}} data-texture-path{{item.tempFilePath}}classsub-texture-list {{status 3 ? disabled : splited}}view classsub-texture-row view{{item.name}}/viewview{{item.width}} x {{item.height}}/view/view/viewview classsub-texture-list wx:if{{isPC}}textarea classjson-area auto-height maxlength-1 placeholder请在此处粘贴龙骨图集的 JSON 内容 value{{jsonValue}}bindbluronChange bindlinechangeonChange bindconfirmonChange bindinputonChange //viewcanvas idmyCanvas type2d classcanvas2d stylewidth: {{canvasWidth}}px; height: {{canvasHeight}}px; //viewview classbottom-container!-- 移动端 --view wx:if{{isPC false}}view classbut-rowview classbutton button-large bindtapchoosePNGJSONview选择龙骨PNG、JSON/view/viewview classbutton button-large {{status 2 ? disabled : }} bindtapparseJsonAndSplitIMGview拆分图集/view/view/viewview classbut-rowview classbutton button-large {{status 3 ? disabled : }} bindtapsaveIMGview转发到聊天/view/view/view/view!-- PC端 --view wx:if{{isPC}}view classbut-rowview classbutton button-large bindtapchoosePNGview wx:if{{textureBase64 }}选择图片/viewview wx:if{{textureBase64 ! }}重选图片/view/viewview classbutton button-large {{status 2 ? disabled : }} bindtapparseJsonAndSplitIMGview拆分图集/view/view/viewview classbut-rowview classbutton button-large {{status 3 ? disabled : }} bindtapsaveIMGview保存/view/view/view/viewview classgb-img/view/view
/viewdragonbones-split.wxss
/* packageTools/pages/dragonbones-split/dragonbones-split.wxss */
import /common/wxss/player-page-common.wxss;.button{display: flex;flex-direction: column;justify-content: center;align-items: center;margin: 10rpx;padding: 10rpx;color: rgb(236, 236, 236);box-sizing: border-box;
}
.button-large{display: flex;justify-content: center;text-align: center;font-size: large;width: auto;height: 100%;max-height: 50%;box-sizing: border-box;flex-grow: 1;border-radius: 10px;background-color: rgb(102, 102, 102);border-top: 1px solid rgb(112, 112, 112);border-bottom: 2px solid rgb(90, 90, 90);
}.but-row {display: flex;
}
.sub-texture-row {display: flex;align-items: center;padding: 0 20rpx;border-bottom: rgb(102, 102, 102) solid 1px;box-sizing: border-box;
}
.sub-texture-rowview {margin: 4px;
}
.sub-texture-row :nth-child(1) {width: 70%;word-wrap: break-word;border-right: #666 solid 1px;
}
.sub-texture-row :nth-child(2) {margin-left: 5px;width: 30%;height: 100%;
}.texture {padding: 6px;width: 100%;border: rgb(63, 63, 63) solid 2px;box-sizing: border-box;
}
.canvas2d {position: absolute;right: 100vw;
}
.sub-texture-list {display: flex;flex-direction: column;padding: 5rpx 20rpx;
}
.json-area {background-color: #000;border-radius: 10rpx;width: 100%;padding: 20rpx;box-sizing: border-box;font-size: x-small;min-height: 430rpx;
}.splited {color: chartreuse;
}imgUtil.js
const fs wx.getFileSystemManager();/*** 选择图集PNG和JSON一对* param {object} options */
function chooseAtlas(_options {}){const defaultOptions { count: 2 };let options { ...defaultOptions, ..._options };// 选择 PNG、JSONlet promise wx.chooseMessageFile(options).then(res res.tempFiles) .then(tempFiles {return tempFiles.map(tempFilePath {if(tempFilePath.type image){ // 图片return wx.getImageInfo({ src: tempFilePath.path }).then(res {let { path, width, height, orientation, type } res;let imageInfo { path, width, height, orientation, type };return imageInfo;});}else if(tempFilePath.type file tempFilePath.path.toLowerCase().endsWith(.json)){ // JSONreturn parseJSON(fs.readFileSync(tempFilePath.path, utf-8));}else{return null;}}).filter(obj obj ! null);}).catch(err {console.log(err);return [];});// 全部完成再返回return promise.then(promiseArr {return Promise.all(promiseArr).then(res res);})
}/*** 选择图片* param {object} options */
function chooseImg(_options {}){const defaultOptions {count: 9, mediaType: [image],whereFrom: message , // 从何处选取。合法值message media};let options { ...defaultOptions, ..._options };let promise;// 根据参数中给的选择方式调用对应方法。switch (options.whereFrom) {case media:promise wx.chooseMedia(options).then(res res.tempFiles.map( data data.tempFilePath) ).catch(err {console.log(err);return [];});break;default:promise wx.chooseMessageFile(options).then(res res.tempFiles.map( data data.path) ).catch(err {console.log(err);return [];});break;}// 对选择的图片获取信息。构建好对象返回return promise.then(tempFiles {return tempFiles.map(tempFilePath {return wx.getImageInfo({ src: tempFilePath }).then(res {let { path, width, height, orientation, type } res;let imageInfo { path, width, height, orientation, type };return imageInfo;});});}).then(promiseArr { // 全部完成再返回return Promise.all(promiseArr).then(res res);});
}/*** 从 tempFilePath 以 base64 格式读取文件内容* param {*} tempFilePath * param {*} type 图片类型是提前通过 getImageInfo 获取的*/
function imageToBase64(tempFilePath, type) {let data fs.readFileSync(tempFilePath, base64);return data:image/${type};base64,${data};
}/*** 解析龙骨图集的JSON* param {string} dbJsonTxt 龙骨图集的JSON*/
function parseJSON(dbJsonTxt){// 解析JSONlet json JSON.parse(dbJsonTxt);// 从 SubTexture 中取出图片名// 判断是否有重复如果重复就用完整路径名否则就直接用图片名let arr json.SubTexture.map(st st.name.substr(st.name.lastIndexOf(/)1));// { x: 2, y: 2, width: 554, height: 140, name: weapon_hand_r}arr json.SubTexture.map(subTexture {if(arr.length ! new Set(arr).size){subTexture.name ${subTexture.name.replace(/\//g, -)}.png;}else{subTexture.name ${subTexture.name.substr(subTexture.name.lastIndexOf(/)1)}.png;}return subTexture;});console.log(arr);json.SubTexture arr;json.type json;return json;
}// /**
// * 选择JSON。PC端的弹窗竟然不支持输入功能。此方法没用上
// * param {object} options
// */
// function chooseJSON(_options {}){
// const defaultOptions {
// count: 1,
// whereFrom: modal , // 从何处选取。合法值 modal message
// };
// let options { ...defaultOptions, ..._options };
// let promise;
// // 根据参数中给的选择方式调用对应方法。
// switch (options.whereFrom) {
// case modal:
// promise wx.showModal({
// title: 龙骨图集JSON,
// placeholderText: 请输入龙骨图集JSON内容,
// confirmText: 解析,
// editable: true,
// }).then(res {
// if (res.confirm res.errMsg showModal:ok ) {
// console.log(res.content);
// return res.content;
// } else if (res.cancel) {
// console.log(用户点击取消)
// return Promise.reject();
// }
// });
// break;
// default:
// promise wx.chooseMessageFile(options)
// .then(res res.tempFiles.map( data fs.readFileSync(data.path, utf-8)))
// .catch(err {
// console.log(err);
// return ;
// });
// break;
// }
// return promise;
// }module.exports {chooseAtlas,chooseImg,imageToBase64,parseJSON,
}参考资料
笑虾微信小程序 - 创建 ZIP 压缩包 笑虾微信小程序 - 文件工具类 fileUtil.js
