diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..600d2d3 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +.vscode \ No newline at end of file diff --git a/components/detailMenus/StrokeProperty.vue b/components/detailMenus/StrokeProperty.vue index 97aa567..79812a3 100644 --- a/components/detailMenus/StrokeProperty.vue +++ b/components/detailMenus/StrokeProperty.vue @@ -92,34 +92,54 @@ module.exports = { return { picker: null, setFlag: false, + setFlag2: false, width: 0, stack: [], interval: '', + layerProperty: [], } }, mounted(){ var self = this + + EventBus.$on("changeKeypath", ({keypath}) => { + this.layerProperty = RLottieModule.layers.layerList[keypath] + this.setFlag2 = false + this.setColor(this.layerProperty) + this.setStrokeColor(this.layerProperty) + }) + this.layerProperty = RLottieModule.layers.layerList[RLottieModule.originKeypath] + this.setColor(this.layerProperty) + this.setStrokeColor(this.layerProperty) + this.interval = setInterval(() => { self.clearStack() }, 500); }, beforeDestroy(){ + EventBus.$off("changeKeypath") clearInterval(this.interval); }, watch: { picker(){ if(this.setFlag){ + this.layerProperty.r = this.picker.rgba.r; + this.layerProperty.g = this.picker.rgba.g; + this.layerProperty.b = this.picker.rgba.b; + this.layerProperty.a = this.picker.rgba.a; + const r = this.picker.rgba.r / 255; const g = this.picker.rgba.g / 255; const b = this.picker.rgba.b / 255; const a = this.picker.rgba.a * 100; + RLottieModule.strokeColors(RLottieModule.keypath, r, g, b, a); RLottieModule.fillColors(RLottieModule.keypath, r, g, b, a); this.stack.push({ - 'property': 'StrokeColor', - 'args': [r,g,b,a] + 'property': 'ShapeColor', + 'args': {r,g,b,a} }) }else{ @@ -127,14 +147,28 @@ module.exports = { } }, width(width){ - RLottieModule.strokeWidth(RLottieModule.keypath, Number(this.width)); - this.stack.push({ - 'property': 'StrokeWidth', - 'args': [Number(this.width)] - }) + if(this.setFlag2){ + RLottieModule.strokeWidth(RLottieModule.keypath, Number(this.width)); + this.layerProperty.strokeWidth = Number(this.width); + this.stack.push({ + 'property': 'StrokeWidth', + 'args': {'strokeWidth': Number(this.width)} + }) + }else{ + this.setFlag2 = true + } } }, methods: { + setColor({r,g,b,a,strokeWidth}) { + this.picker.rgba.r = r; + this.picker.rgba.g = g; + this.picker.rgba.b = b; + this.picker.rgba.a = a; + }, + setStrokeColor({strokeWidth}) { + this.width = strokeWidth + }, closeSidebar(){ this.$emit("call-close-menu-parent"); }, @@ -144,7 +178,7 @@ module.exports = { return let top = this.stack.pop() - RLottieModule.history.insert(RLottieModule.keypath, top.property, top.args) + RLottieModule.layers.insert(RLottieModule.keypath, top.property, top.args) this.stack = [] } }, diff --git a/components/detailMenus/TransformProperty.vue b/components/detailMenus/TransformProperty.vue index a2a17d5..9ad39d0 100644 --- a/components/detailMenus/TransformProperty.vue +++ b/components/detailMenus/TransformProperty.vue @@ -205,9 +205,28 @@ module.exports = { degree: 0, opacity: 0, stack: [], + layerProperty: [], + + anchorFlag: false, + positionFlag: false, + scaleFlag: false, + degreeFlag: false, + opacityFlag: false, }; }, mounted(){ + EventBus.$on("changeKeypath", ({keypath}) => { + this.layerProperty = RLottieModule.layers.layerList[keypath] + this.anchorFlag = false; + this.positionFlag = false; + this.scaleFlag = false; + this.degreeFlag = false; + this.opacityFlag = false; + + this.setTransform(this.layerProperty) + }) + this.layerProperty = RLottieModule.layers.layerList[RLottieModule.originKeypath] + this.setTransform(this.layerProperty) var self = this this.interval = setInterval(() => { self.clearStack() @@ -219,71 +238,115 @@ module.exports = { watch: { anchor:{ deep: true, - handler(){ - RLottieModule.trAnchor(RLottieModule.keypath,Number(this.anchor.x),Number(this.anchor.y)) - this.stack.push({ - 'property': 'TrAnchor', - 'args': [Number(this.anchor.x),Number(this.anchor.y)] - }) + handler(){ + if(this.anchorFlag){ + this.layerProperty.anchorX = this.anchor.x + this.layerProperty.anchorY = this.anchor.y + RLottieModule.trAnchor(RLottieModule.keypath,Number(this.anchor.x),Number(this.anchor.y)) + this.stack.push({ + 'property': 'TrAnchor', + 'args': {anchorX: Number(this.anchor.x),anchorY: Number(this.anchor.y)} + }) + } + else{ + this.anchorFlag = true; + } } }, position: { deep: true, handler(){ - RLottieModule.trPosition(RLottieModule.keypath,Number(this.position.x),Number(this.position.y)) - this.stack.push({ - 'property': 'TrPosition', - 'args': [Number(this.position.x),Number(this.position.y)] - }) + if(this.positionFlag){ + this.layerProperty.positionX = this.position.x + this.layerProperty.positionY = this.position.y + RLottieModule.trPosition(RLottieModule.keypath,Number(this.position.x),Number(this.position.y)) + this.stack.push({ + 'property': 'TrPosition', + 'args': {positionX: Number(this.position.x), positionY: Number(this.position.y)} + }) + } + else { + this.positionFlag = true; + } } }, scale: { deep: true, handler(){ - if(Number(this.scale.w)>=1000) this.scale.w = 1000; - else if(Number(this.scale.w)<=0) this.scale.w = 0; - if(Number(this.scale.h)>=1000) this.scale.h = 1000; - else if(Number(this.scale.h)<=0) this.scale.h = 0; + if(this.scaleFlag){ + if(Number(this.scale.w)>=1000) this.scale.w = 1000; + else if(Number(this.scale.w)<=0) this.scale.w = 0; + if(Number(this.scale.h)>=1000) this.scale.h = 1000; + else if(Number(this.scale.h)<=0) this.scale.h = 0; - RLottieModule.trScale(RLottieModule.keypath,Number(this.scale.w),Number(this.scale.h)) - this.stack.push({ - 'property': 'TrScale', - 'args': [Number(this.scale.w),Number(this.scale.h)] - }) + this.layerProperty.scaleWidth = this.scale.w + this.layerProperty.scaleHeight = this.scale.h + RLottieModule.trScale(RLottieModule.keypath,Number(this.scale.w),Number(this.scale.h)) + this.stack.push({ + 'property': 'TrScale', + 'args': {scaleWidth: Number(this.scale.w),scaleHeight: Number(this.scale.h)} + }) + } + else { + this.scaleFlag = true; + } } }, degree: function (val) { - RLottieModule.trRotation(RLottieModule.keypath,Number(this.degree)) - this.stack.push({ - 'property': 'TrRotation', - 'args': [Number(this.degree)] - }) + if(this.degreeFlag){ + this.layerProperty.rotation = this.degree + RLottieModule.trRotation(RLottieModule.keypath,Number(this.degree)) + this.stack.push({ + 'property': 'TrRotation', + 'args': {rotation: Number(this.degree)} + }) + } + else{ + this.degreeFlag = true; + } + }, opacity: function (val) { - RLottieModule.trOpacity(RLottieModule.keypath,Number(this.opacity)) - this.stack.push({ - 'property': 'TrOpacity', - 'args': [Number(this.opacity)] - }) + if(this.opacityFlag){ + this.layerProperty.opacity = this.opacity + RLottieModule.trOpacity(RLottieModule.keypath,Number(this.opacity)) + this.stack.push({ + 'property': 'TrOpacity', + 'args': {opacity: Number(this.opacity)} + }) + } + else { + this.opacityFlag = true; + } }, }, computed: { }, methods: { - closeSidebar(){ - this.$emit("call-close-menu-parent"); - }, - clearStack() { - let len = this.stack.length; - if(!len) - return - - let top = this.stack.pop() - RLottieModule.history.insert(RLottieModule.keypath, top.property, top.args) - this.stack = [] - } + setTransform({strokeWidth,anchorX,anchorY,positionX,positionY,scaleWidth,scaleHeight,rotation,opacity}) { + this.anchor.x = anchorX + this.anchor.y = anchorY + this.position.x = positionX + this.position.y = positionY + this.scale.w = scaleWidth + this.scale.h = scaleHeight + this.degree = rotation + this.opacity = opacity + }, + closeSidebar(){ + this.$emit("call-close-menu-parent"); }, + clearStack() { + let len = this.stack.length; + if(!len) + return + + let top = this.stack.pop() + RLottieModule.layers.insert(RLottieModule.keypath, top.property, top.args) + this.stack = [] + } + }, } diff --git a/components/detailMenus/ShapeProperty.vue b/components/detailMenus/~ShapeProperty.vue similarity index 100% rename from components/detailMenus/ShapeProperty.vue rename to components/detailMenus/~ShapeProperty.vue diff --git a/components/loading-bar.vue b/components/loading-bar.vue index 95058a9..47f750f 100644 --- a/components/loading-bar.vue +++ b/components/loading-bar.vue @@ -323,10 +323,10 @@ module.exports = { this.isNext = e.isNext; }, movePrev() { - RLottieModule.history.movePrev(); + RLottieModule.layers.movePrev(); }, moveNext() { - RLottieModule.history.moveNext(); + RLottieModule.layers.moveNext(); }, changeCanvasBorderColor(){ if (!this.borderOn){ @@ -337,7 +337,7 @@ module.exports = { } }, exportJson() { - RLottieModule.export.exportLayers(RLottieModule.history); + RLottieModule.export.exportLayers(RLottieModule.layers); } }, }; diff --git a/components/right-bar.vue b/components/right-bar.vue index 05b6cb0..3dde038 100644 --- a/components/right-bar.vue +++ b/components/right-bar.vue @@ -97,6 +97,7 @@ module.exports = { }, watch: { isSelectAll() { + RLottieModule.isSelectAll = this.isSelectAll RLottieModule.keypath = this.isSelectAll ? (this.keypath ? this.keypath + '.**' : '**') : (this.keypath ? this.keypath : ''); } }, @@ -106,7 +107,6 @@ module.exports = { EventBus.$on('initLayers', function(data) { setLayers(data.layers) - // console.dir(self.$refs.test) }); // Shortcut key function binding document.addEventListener('keydown', function(e){ @@ -118,19 +118,21 @@ module.exports = { }, methods: { setLayers(layers) { - this.layers = [layers]; + this.layers = layers; }, changeFocus(e){ - this.keypath = e[0] - RLottieModule.keypath = this.isSelectAll ? (this.keypath ? this.keypath + '.**' : '**') : (this.keypath ? this.keypath : ''); - + this.keypath = e[0] ? e[0] : ''; + RLottieModule.originKeypath = this.keypath; + RLottieModule.keypath = this.isSelectAll ? (this.keypath ? this.keypath + '.**' : '**') : this.keypath; + + EventBus.$emit('changeKeypath', {'keypath': this.keypath}); if(!e[0]) { - RLottieModule.reload(RLottieModule.history.originJson); - RLottieModule.history.reload() + RLottieModule.layers.reload() + RLottieModule.layers.highlighting('**') return; } - RLottieModule.history.highlighting((this.keypath ? this.keypath + '.**' : '**')) + RLottieModule.layers.highlighting((this.keypath ? this.keypath + '.**' : '**')) }, inputKeypath(e) { diff --git a/index.html b/index.html index 13c1a2b..c8cfa68 100644 --- a/index.html +++ b/index.html @@ -10,7 +10,7 @@ rlottie viewer - + @@ -58,14 +58,20 @@ + + + + diff --git a/module-rlottie.js b/module-rlottie.js index 9a86195..7f68f75 100644 --- a/module-rlottie.js +++ b/module-rlottie.js @@ -32,7 +32,9 @@ var RLottieModule = (function () { obj.playing = true; obj.wasPlaying = false; obj.keypath = "" - + obj.originKeypath = "" + obj.isSelectAll = true + obj.init = function () { var input = document.getElementById('fileSelector'); input.addEventListener('change', fileSelectionChanged); @@ -49,12 +51,8 @@ var RLottieModule = (function () { obj.frameCount = obj.lottieHandle.frames(); // hook to the main loop - var originJson = obj.lottieHandle.get_basic_resource() - obj.history = initHistory(originJson); - obj.layers = initLayers(originJson) - obj.export = initExportObject(originJson); - - EventBus.$emit('initLayers', {layers: obj.layers.layers}); + obj.layers = new Layers(this, obj.lottieHandle.get_basic_resource()) + EventBus.$emit('initLayers', {layers: obj.layers.getLayerTree()}); mainLoop(); } @@ -225,11 +223,8 @@ function handleFiles(files) { read.onloadend = function(){ var jsString = read.result; RLottieModule.reload(jsString); - RLottieModule.history = initHistory(jsString); - RLottieModule.layers = initLayers(jsString); - RLottieModule.export = initExportObject(jsString); - - EventBus.$emit('initLayers', {layers: RLottieModule.layers.layers}); + RLottieModule.layers = new Layers(RLottieModule, jsString); + EventBus.$emit('initLayers', {layers: RLottieModule.layers.getLayerTree()}); } break; } @@ -266,392 +261,376 @@ function onResizeSliderDrag(value) { RLottieModule.update(); } -function initHistory(jsString) { - var obj = {}; +function Layers(RLottieModule, jsString) { + this.RLottieModule = RLottieModule + this.originLayers = JSON.parse(jsString) - obj.history = []; - obj.cur = -1; - obj.top = -1; - obj.originJson = jsString; + this.layerList = [] + this.layerTree = [] + + this.history = []; + this.cur = -1; + this.top = -1; + - obj.setProperty = function(keypath, property, args) { - switch(property) { - case 'FillColor': - - RLottieModule.fillColors(keypath, args[0], args[1], args[2], args[3]) + function initLayerList(self, layer, keypath) { + var new_keypath = keypath + if(layer['nm']) { + new_keypath = keypath + (keypath ? '.' : '') + layer['nm'] + self.layerList[new_keypath] = { + type: layer['ty'], + r : 0, + g : 0, + b : 0, + a : 100, + strokeWidth : 1, + anchorX : 0, + anchorY : 0, + positionX : 0, + positionY : 0, + scaleWidth : 100, + scaleHeight : 100, + rotation : 0, + opacity : 100, + } + } + for(let key in layer) { + if(Array.isArray(layer[key])) { + for(let i in layer[key]) { + initLayerList(self,layer[key][i], new_keypath) + } + } + } + } + + function initLayerTree(self, layer, keypath, idx, depth, type) { + if(idx == depth) { + layer.type = type; + layer.keypath = keypath.join('.'); + return + } + + var flag = true; + for(let key in layer.children) { + if(layer.children[key].name == keypath[idx]) { + initLayerTree(self, layer.children[key], keypath, idx+1, depth, type) + flag = false; break; - case 'StrokeColor': - RLottieModule.strokeColors(keypath, args[0], args[1], args[2], args[3]) + } + } + + if(flag) { + layer.children.push({ + name: keypath[idx], + children: [] + }) + initLayerTree(self, layer.children[layer.children.length-1], keypath, idx+1, depth, type) + } + } + + this.getLayerList = function() { + if(!this.layerList.length) { + let rootPath = this.originLayers.nm + this.originLayers.nm = '' + initLayerList(this, this.originLayers, '') + this.originLayers.nm = rootPath + } + return this.layerList; + } + + this.getLayerTree = function() { + if(!this.layerTree.length) { + this.getLayerList(); + this.layerTree = [{'name': this.originLayers.nm, 'children': [], 'type':'root', 'keypath': ''}] + for(let keypath in this.layerList) { + var split_keypath = keypath.split('.') + initLayerTree(this, this.layerTree[0], split_keypath, 0, split_keypath.length, this.layerList[keypath].type) + } + this.layerList[''] = { + type: 'root', + r : 0, + g : 0, + b : 0, + a : 100, + strokeWidth : 1, + anchorX : 0, + anchorY : 0, + positionX : 0, + positionY : 0, + scaleWidth : 100, + scaleHeight : 100, + rotation : 0, + opacity : 100, + } + } + return this.layerTree; + } + + this.setProperty = function(keypath, property, param) { + switch(property) { + case 'ShapeColor': + this.RLottieModule.fillColors(keypath, param.r, param.g, param.b, param.a) + this.RLottieModule.strokeColors(keypath, param.r, param.g, param.b, param.a) break; case 'StrokeWidth': - RLottieModule.strokeWidth(keypath, args[0]); + this.RLottieModule.strokeWidth(keypath, param.strokeWidth); break; case 'TrAnchor': - RLottieModule.trAnchor(keypath, args[0], args[1]); + this.RLottieModule.trAnchor(keypath, param.anchorX, param.anchorY); break; case 'TrPosition': - RLottieModule.trPosition(keypath, args[0], args[1]); + this.RLottieModule.trPosition(keypath, param.positionX, param.positionY); break; case 'TrScale': - RLottieModule.trScale(keypath, args[0], args[1]); + this.RLottieModule.trScale(keypath, param.scaleWidth, param.scaleHeight); break; case 'TrRotation': - RLottieModule.trRotation(keypath, args[0]); + this.RLottieModule.trRotation(keypath, param.rotation); break; case 'TrOpacity': - RLottieModule.trOpacity(keypath, args[0]); + this.RLottieModule.trOpacity(keypath, param.opacity); break; } } - obj.insert = function (keypath, property, args) { - while(obj.cur < obj.top) { - obj.history.pop(); - obj.top--; + this.insert = function (keypath, property, args) { + while(this.cur < this.top) { + this.history.pop(); + this.top--; } - obj.history.push({ + this.history.push({ keypath, property, args }); - obj.cur = ++obj.top; - obj.setHistoryState(); + + this.cur = ++this.top; + this.setHistoryState(); } - obj.reload = function() { - // RLottieModule.reload(obj.originJson); + this.reload = function() { + this.RLottieModule.reload(jsString); let check = [] - for(let i = 0; i <= obj.cur; i++) { - let key = obj.history[i]['keypath']; - let prop = obj.history[i]['property']; - let args = obj.history[i]['args']; - obj.setProperty(key, prop, args) + for(let i = 0; i <= this.cur; i++) { + let key = this.history[i]['keypath']; + let prop = this.history[i]['property']; + let args = this.history[i]['args']; + this.setProperty(key, prop, args) } - obj.setHistoryState(); + this.setHistoryState(); } - obj.highlighting = function (keypath) { - RLottieModule.lottieHandle.set_fill_opacity("**", 30); - RLottieModule.lottieHandle.set_stroke_opacity("**", 30); - for(let i = 0; i <= obj.cur; i++) { - let key = obj.history[i]['keypath']; - let prop = obj.history[i]['property']; - let args = obj.history[i]['args']; + this.highlighting = function (keypath) { + this.RLottieModule.lottieHandle.set_fill_opacity("**", 30); + this.RLottieModule.lottieHandle.set_stroke_opacity("**", 30); + for(let i = 0; i <= this.cur; i++) { + let key = this.history[i]['keypath']; + let prop = this.history[i]['property']; + let args = this.history[i]['args']; - if(prop == "FillColor" || prop == "StrokeColor") { - if(args[3] > 30) { - args[3] = 30 + if(prop == "ShapeColor") { + if(args.a > 30) { + args.a = 30 } - obj.setProperty(key, prop, args) + // console.log('high', args) + this.setProperty(key, prop, args) } } - RLottieModule.lottieHandle.set_fill_opacity(keypath, 100); - RLottieModule.lottieHandle.set_stroke_opacity(keypath, 100); + this.RLottieModule.lottieHandle.set_fill_opacity(keypath, 100); + this.RLottieModule.lottieHandle.set_stroke_opacity(keypath, 100); } - obj.setHistoryState = function() { - EventBus.$emit('setHistoryState', {isPrev: obj.hasPrev(), isNext: obj.hasNext()}); + this.setHistoryState = function() { + EventBus.$emit('setHistoryState', {isPrev: this.hasPrev(), isNext: this.hasNext()}); } - obj.hasPrev = function() { - return obj.cur != -1; + this.hasPrev = function() { + return this.cur != -1; } - obj.hasNext = function() { - return obj.cur < obj.top; + this.hasNext = function() { + return this.cur < this.top; } - obj.movePrev = function() { - if(!obj.hasPrev()) { + this.movePrev = function() { + if(!this.hasPrev()) { return false; } - obj.cur--; - RLottieModule.reload(obj.originJson); - obj.reload(); + this.cur--; + this.reload(); + this.highlighting(this.RLottieModule.keypath + (!this.RLottieModule.isSelectAll ? (this.RLottieModule.keypath ? '.**' : '**') : '')) } - obj.moveNext = function() { - if(!obj.hasNext()) { + this.moveNext = function() { + if(!this.hasNext()) { return false; } - obj.cur++; - RLottieModule.reload(obj.originJson); - obj.reload(); + this.cur++; + this.reload(); + this.highlighting(this.RLottieModule.keypath + (!this.RLottieModule.isSelectAll ? (this.RLottieModule.keypath ? '.**' : '**') : '')) } - obj.setHistoryState(); - return obj; -} - -function initLayers(jsString) { - var obj = {} - - var map_keypath = [] - obj.originLayers = JSON.parse(jsString) - - - - obj.addKeypath = function (json_data,keypath){ - var new_keypath = (keypath ? keypath+'\n' : '') + json_data.nm; - var new_data = { - type: json_data.ty, - } - - for(let i in json_data.assets) { - for(let j in json_data.assets[j].layers[j]) - json_data.assets[i].layers[j].ty = '4'; - obj.addKeypath(json_data.assets[i].layers[j],new_keypath); - } - - for(let i in json_data.layers) { - json_data.layers[i].ty = '4'; - obj.addKeypath(json_data.layers[i],new_keypath); - } - - for(let i in json_data.it) { - obj.addKeypath(json_data.it[i],new_keypath); - } - - for(let i in json_data.shapes) { - obj.addKeypath(json_data.shapes[i],new_keypath); - } - - for(let i in json_data.masksProperties) { - obj.addKeypath(json_data.masksProperties[i],new_keypath); - } - - for(let i in json_data.ef) { - obj.addKeypath(json_data.ef[i],new_keypath); - } - - for(let i in json_data.d) { - obj.addKeypath(json_data.d[i],new_keypath); - } - - if(json_data.tr) { - obj.addKeypath(json_data.tr,new_keypath); - } - - map_keypath[new_keypath] = new_data - } - - obj.parseObject = function (keypath, cur, depth, layers, type) { - if(cur == depth) { - layers.type = type; - layers.keypath = keypath.join('.') - layers.split_keypath = keypath - return; - } - - var flag = true; - for(let i in layers.children) { - if(layers.children[i].name == keypath[cur]) { - obj.parseObject(keypath, cur+1, depth, layers.children[i],type) - flag = false; - break; - } - } - - if(flag) { - layers.children.push({ - name: keypath[cur], - children: [] - }) - obj.parseObject(keypath, cur+1, depth, layers.children[layers.children.length-1],type) - } - } - - obj.parseJson = function(json_string) { - map_keypath = []; - var json_data = JSON.parse(json_string); - // console.dir(json_data); - - for(let i in json_data.assets) { - for(let j in json_data.assets[i].layers){ - json_data.assets[i].layers[j].ty = '4' - obj.addKeypath(json_data.assets[i].layers[j],''); - } - } - for(let i in json_data.layers) { - json_data.layers[i].ty = '4' - obj.addKeypath(json_data.layers[i],''); - } - - var layers = {'keypath': '', 'name': json_data.nm ? json_data.nm : 'keypath', 'type': 'root', 'children': []}; - for(let keypath in map_keypath) { - var split_keypath = keypath.split('\n') - obj.parseObject(split_keypath, 0, split_keypath.length, layers, map_keypath[keypath].type) - } - return layers - } - - obj.layers = obj.parseJson(jsString) - return obj -} - -function initExportObject(jsString) { - var obj = {} - obj.originJson = jsString; - obj.lottieObject = JSON.parse(jsString); - - obj.changeColor = function(layers, args) { - if(layers.c) { - layers.c.k = [args[0],args[1],args[2],layers.c.k ? layers.c.k[3] : 0] + this.changeColor = function(layer, args) { + if(layer.c) { + layer.c.k = [args.r,args.g,args.b,layer.c.k ? layer.c.k[3] : 0] }else{ - layers.c = { + layer.c = { 'a':0, - 'k': [args[0],args[1],args[2],1] + 'k': [args.r,args.g,args.b,1] } } - if(layers.o) { - layers.o.k = args[3] + if(layer.o) { + layer.o.k = args.a }else { - layers.o.k = { + layer.o.k = { 'a': 0, - 'k': args[3] + 'k': args.a } } } - obj.changeWidth = function(layers, args) { - if(layers.w) { - layers.w.k = args[0] + this.changeWidth = function(layer, args) { + if(layer.w) { + layer.w.k = args.strokeWidth }else{ - layers.w = { + layer.w = { 'a':0, - 'k': args[0] + 'k': args.strokeWidth } } } - obj.changeTrAnchor = function(layers, args) { - if(layers.a) { - layers.a.k = [args[0],args[1]] + this.changeTrAnchor = function(layer, args) { + if(layer.a) { + layer.a.k = [args.anchorX,args.anchorY] }else{ - layers.a = { + layer.a = { 'a':0, - 'k': [args[0],args[1]] + 'k': [args.anchorX,args.anchorY] } } } - obj.changeTrPosition = function(layers, args) { - if(layers.p) { - layers.p.k = [args[0],args[1]] + this.changeTrPosition = function(layer, args) { + if(layer.p) { + layer.p.k = [args.positionX, positionY] }else{ - layers.p = { + layer.p = { 'a':0, - 'k': [args[0],args[1]] + 'k': [args.positionX, positionY] } } } - obj.changeTrRotation = function(layers, args) { - if(layers.r) { - layers.r.k = (Number(layers.r.k) + args[0]) % 360 + this.changeTrRotation = function(layer, args) { + if(layer.r) { + layer.r.k = (parseInt(layer.r.k) + args.rotation) % 360 }else{ - layers.r = { + layer.r = { 'a':0, - 'k': args[0] + 'k': args.rotation } } } - obj.changeTrScale = function(layers, args) { - if(layers.s) { - layers.s.k = [args[0],args[1]] + this.changeTrScale = function(layer, args) { + if(layer.s) { + if(layer.s.k) + layer.s.k = [parseInt(layer.s.k[0]) * args.scaleWidth / 100,parseInt(layer.s.k[1]) * args.scaleHeight / 100] + else + layer.s.k = [args.scaleWidth,args.scaleHeight] }else{ - layers.s = { + layer.s = { 'a':0, - 'k': [args[0],args[1]] + 'k': [args.scaleWidth,args.scaleHeight] } } } - obj.changeTrOpacity = function(layers, args) { - if(layers.o) { - layers.o.k = args[0] + this.changeTrOpacity = function(layer, args) { + if(layer.o) { + layer.o.k = args.opacity }else{ - layers.o = { + layer.o = { 'a':0, - 'k': args[0] + 'k': args.opacity } } } - obj.changeProperty = function (layers, keypath, property, args, flag) { + this.changeProperty = function (layer, keypath, property, args, flag) { if(keypath.length == 0 || keypath[0] == "**") { flag = true } if(flag) { switch(property) { case "FillColor": - if(layers.ty == "fl") { - obj.changeColor(layers, args) + if(layer.ty == "fl") { + this.changeColor(layer, args) } break; case "StrokeColor": - if(layers.ty == "st") { - obj.changeColor(layers, args) + if(layer.ty == "st") { + this.changeColor(layer, args) } break; case "StrokeWidth": - if(layers.ty == "st") { - obj.changeWidth(layers, args) + if(layer.ty == "st") { + this.changeWidth(layer, args) } break; // case "TrAnchor": - // if(layers.ty == "tr") { - // obj.changeTrAnchor(layers, args) + // if(layer.ty == "tr") { + // this.changeTrAnchor(layer, args) // } // break; // case "TrPosition": - // if(layers.ty == "tr") { - // obj.changeTrPosition(layers, args) + // if(layer.ty == "tr") { + // this.changeTrPosition(layer, args) // } // break; // case "TrRotation": - // if(layers.ty == "tr") { - // obj.changeTrRotation(layers, args) + // if(layer.ty == "tr") { + // this.changeTrRotation(layer, args) // } // break; // case "TrScale": - // if(layers.ty == "tr") { - // obj.changeTrScale(layers, args) + // if(layer.ty == "tr") { + // this.changeTrScale(layer, args) // } // break; // case "TrOpacity": - // if(layers.ty == "tr") { - // obj.changeTrOpacity(layers, args) + // if(layer.ty == "tr") { + // this.changeTrOpacity(layer, args) // } // break; } } - for(let i in layers) { - if(layers[i].nm && (keypath[0] == "**" || layers[i] == keypath[0])) { - this.changeProperty(layers[i], keypath.slice(keypath[0] != "**"), property, args, flag) + for(let i in layer) { + if(layer[i].nm && (keypath[0] == "**" || layer[i] == keypath[0])) { + this.changeProperty(layer[i], keypath.slice(keypath[0] != "**"), property, args, flag) } - if(Array.isArray(layers[i])) { - for(let j in layers[i]) - if(layers[i][j].nm == keypath[0] || keypath[0] == "**") - this.changeProperty(layers[i][j], keypath.slice(keypath[0] != "**"), property, args, flag) + if(Array.isArray(layer[i])) { + for(let j in layer[i]) + if(layer[i][j].nm == keypath[0] || keypath[0] == "**") + this.changeProperty(layer[i][j], keypath.slice(keypath[0] != "**"), property, args, flag) } } } - obj.exportLayers = function (history){ - obj.lottieObject = JSON.parse(obj.originJson); + this.exportlayer = function (history){ + var saveObject = JSON.parse(this.originJson); for(let i = 0; i <= history.cur; i++) { var {keypath, property, args} = history.history[i]; - this.changeProperty(obj.lottieObject, keypath.split("."), property, args, false); + this.changeProperty(saveObject, keypath.split("."), property, args, false); } - var dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(obj.lottieObject)); + var dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(saveObject)); var downloadAnchorNode = document.createElement('a'); downloadAnchorNode.setAttribute("href", dataStr); downloadAnchorNode.setAttribute("download", "temp" + ".json"); @@ -659,7 +638,4 @@ function initExportObject(jsString) { downloadAnchorNode.click(); downloadAnchorNode.remove(); } - - return obj; -} - +} \ No newline at end of file