From 42bd0ceb58bb1e2e6eb1bbd42b7ebf1e29284dd4 Mon Sep 17 00:00:00 2001
From: xiaofuyesnew <xiaofuyesnew@qq.com>
Date: Tue, 4 Dec 2018 18:26:36 +0800
Subject: [PATCH] make pic with frame numbers based

---
 docs/js/index.js | 2 +-
 src/js/index.js  | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/docs/js/index.js b/docs/js/index.js
index bf1197e..fa27c70 100644
--- a/docs/js/index.js
+++ b/docs/js/index.js
@@ -1 +1 @@
-"use strict";var app=new Vue({el:"#app",data:{sizeType:"1",canvasData:{width:640,height:480},frameData:{row:1,col:1,prewidth:640,preheight:480},fileList:[],imgLoading:!1,cssStr:"",cssAttr:{unit:"1",design:"640",name:"keys",loop:!1,loopNum:0,time:1,delay:0},imgStr:"",btnText:"开始生成",btnLoading:!1},computed:{canvas:function(){return"1"===this.sizeType?{width:+this.canvasData.width,height:+this.canvasData.height}:"2"===this.sizeType?{width:this.frameData.col*this.frameData.prewidth,height:this.frameData.row*this.frameData.preheight}:void 0}},methods:{fileChange:function(t,a){this.fileList=a},fileRemove:function(t,a){this.fileList=a},dealCss:function(t,a){var e=this.cssAttr,i="",n=0,c=0;switch(e.unit){case"1":i="px",n=+this.frameData.prewidth,c=+this.frameData.preheight;break;case"2":i="rem",n=+this.frameData.prewidth/100,c=+this.frameData.preheight/100;break;case"3":i="vw",n=+this.frameData.prewidth/+e.design,n=+this.frameData.preheight/+e.design}for(var s=(100/this.fileList.length).toFixed(2),o=".".concat(e.name," {\n  width: ").concat(n).concat(i,";\n  height: ").concat(c).concat(i,";\n  background-size: ","".concat((a*n).toFixed(2)).concat(i," ").concat((t*c).toFixed(2)).concat(i),";\n}\n\n.").concat(e.name,".anim {\n  animation: ").concat(e.name," ").concat(e.time,"s ").concat(+e.delay?"".concat(e.delay,"s"):""," steps(1, end) forwords ").concat(e.loop?+e.loopNum?e.loopNum:"infinite":"",";\n}"),h="",r=0;r<this.fileList.length;r++)h=0===r?"  0% { background-position: 0 0; }":r===this.fileList.length-1?"".concat(h,"\n  100% { background-position: ","".concat(-r%a*n+i," ").concat(-Math.floor(r/a)*c+i),"; }"):"".concat(h,"\n  ").concat((s*r).toFixed(2),"% { background-position: ","".concat(-r%a*n+i," ").concat(-Math.floor(r/a)*c+i),"; }");h="@keyframes ".concat(e.name," {\n").concat(h,"\n}"),this.cssStr="".concat(o,"\n\n").concat(h)},startDealing:function(t){var e=document.getElementById("cvs");0===t&&(e.height=e.height);var i=e.getContext("2d"),n=this,c=t,s=new Image,a=new FileReader;this.btnText="生成中",this.btnLoading=!0,s.onload=function(){var t=1,a=1;switch(n.sizeType){case"1":a=+n.canvasData.width/+n.frameData.prewidth,t=+n.canvasData.height/+n.frameData.preheight;break;case"2":a=+n.frameData.col,t=+n.frameData.row}0===c&&n.dealCss(t,a),i.drawImage(s,c%a*+n.frameData.prewidth,Math.floor(c/a)*+n.frameData.preheight),c++,n.fileList.length>c?setTimeout(function(){n.startDealing(c)},1e3):(n.imgStr=e.toDataURL("image/png"),n.btnText="开始生成",n.btnLoading=!1,n.$message.success("图片生成完成"))},a.onload=function(t){s.src=t.target.result},a.readAsDataURL(this.fileList[c].raw)}}});
\ No newline at end of file
+"use strict";var app=new Vue({el:"#app",data:{sizeType:"1",canvasData:{width:640,height:480},frameData:{row:1,col:1,prewidth:640,preheight:480},fileList:[],imgLoading:!1,cssStr:"",cssAttr:{unit:"1",design:"640",name:"keys",loop:!1,loopNum:0,time:1,delay:0},imgStr:"",btnText:"开始生成",btnLoading:!1},computed:{canvas:function(){return"1"===this.sizeType?{width:+this.canvasData.width,height:+this.canvasData.height}:"2"===this.sizeType?{width:this.frameData.col*this.frameData.prewidth,height:this.frameData.row*this.frameData.preheight}:void 0}},methods:{fileChange:function(t,a){this.fileList=a},fileRemove:function(t,a){this.fileList=a},dealCss:function(t,a){var e=this.cssAttr,i="",n=0,c=0;switch(e.unit){case"1":i="px",n=+this.frameData.prewidth,c=+this.frameData.preheight;break;case"2":i="rem",n=+this.frameData.prewidth/100,c=+this.frameData.preheight/100;break;case"3":i="vw",n=+this.frameData.prewidth/+e.design,n=+this.frameData.preheight/+e.design}for(var s=(100/this.fileList.length).toFixed(2),o=".".concat(e.name," {\n  width: ").concat(n).concat(i,";\n  height: ").concat(c).concat(i,";\n  background-size: ","".concat((a*n).toFixed(2)).concat(i," ").concat((t*c).toFixed(2)).concat(i),";\n}\n\n.").concat(e.name,".anim {\n  animation: ").concat(e.name," ").concat(e.time,"s ").concat(+e.delay?"".concat(e.delay,"s"):""," steps(1, end) forwords ").concat(e.loop?+e.loopNum?e.loopNum:"infinite":"",";\n}"),h="",r=0;r<this.fileList.length;r++)h=0===r?"  0% { background-position: 0 0; }":r===this.fileList.length-1?"".concat(h,"\n  100% { background-position: ","".concat(-r%a*n+i," ").concat(-Math.floor(r/a)*c+i),"; }"):"".concat(h,"\n  ").concat((s*r).toFixed(2),"% { background-position: ","".concat(-r%a*n+i," ").concat(-Math.floor(r/a)*c+i),"; }");h="@keyframes ".concat(e.name," {\n").concat(h,"\n}"),this.cssStr="".concat(o,"\n\n").concat(h)},startDealing:function(t){var e=document.getElementById("cvs");0===t&&(e.height=e.height);var i=e.getContext("2d"),n=this,c=t,s=new Image,a=new FileReader;this.btnText="生成中",this.btnLoading=!0,s.onload=function(){var t=1,a=1;switch(n.sizeType){case"1":a=+n.canvasData.width/+n.frameData.prewidth,t=+n.canvasData.height/+n.frameData.preheight;break;case"2":a=+n.frameData.col,t=+n.frameData.row}0===c&&n.dealCss(t,a),i.drawImage(s,c%a*+n.frameData.prewidth,Math.floor(c/a)*+n.frameData.preheight,+n.frameData.prewidth,+n.frameData.preheight),c++,n.fileList.length>c?setTimeout(function(){n.startDealing(c)},1e3):(n.imgStr=e.toDataURL("image/png"),n.btnText="开始生成",n.btnLoading=!1,n.$message.success("图片生成完成"))},a.onload=function(t){s.src=t.target.result},a.readAsDataURL(this.fileList[c].raw)}}});
\ No newline at end of file
diff --git a/src/js/index.js b/src/js/index.js
index ad73c9a..f09e557 100644
--- a/src/js/index.js
+++ b/src/js/index.js
@@ -130,7 +130,9 @@ const app = new Vue({
         ctx.drawImage(
           img,
           (myTmp % col) * +self.frameData.prewidth,
-          Math.floor(myTmp / col) * +self.frameData.preheight
+          Math.floor(myTmp / col) * +self.frameData.preheight,
+          +self.frameData.prewidth,
+          +self.frameData.preheight
         )
         myTmp++
         if (self.fileList.length > myTmp) {