├── .gitignore ├── .travis.yml ├── demos ├── imgarr │ ├── imgs │ │ ├── 1.jpg │ │ ├── 10.jpg │ │ ├── 11.jpg │ │ ├── 12.jpg │ │ ├── 13.jpg │ │ ├── 14.jpg │ │ ├── 15.jpg │ │ ├── 16.jpg │ │ ├── 17.jpg │ │ ├── 18.jpg │ │ ├── 19.jpg │ │ ├── 2.jpg │ │ ├── 20.jpg │ │ ├── 21.jpg │ │ ├── 22.jpg │ │ ├── 23.jpg │ │ ├── 24.jpg │ │ ├── 25.jpg │ │ ├── 26.jpg │ │ ├── 27.jpg │ │ ├── 28.jpg │ │ ├── 29.jpg │ │ ├── 3.jpg │ │ ├── 30.jpg │ │ ├── 31.jpg │ │ ├── 32.jpg │ │ ├── 4.jpg │ │ ├── 5.jpg │ │ ├── 6.jpg │ │ ├── 7.jpg │ │ ├── 8.jpg │ │ └── 9.jpg │ ├── imgs2 │ │ ├── 1.jpg │ │ ├── 10.jpg │ │ ├── 11.jpg │ │ ├── 12.jpg │ │ ├── 13.jpg │ │ ├── 14.jpg │ │ ├── 15.jpg │ │ ├── 16.jpg │ │ ├── 17.jpg │ │ ├── 18.jpg │ │ ├── 19.jpg │ │ ├── 2.jpg │ │ ├── 20.jpg │ │ ├── 21.jpg │ │ ├── 22.jpg │ │ ├── 23.jpg │ │ ├── 24.jpg │ │ ├── 25.jpg │ │ ├── 26.jpg │ │ ├── 27.jpg │ │ ├── 28.jpg │ │ ├── 29.jpg │ │ ├── 3.jpg │ │ ├── 30.jpg │ │ ├── 31.jpg │ │ ├── 32.jpg │ │ ├── 33.jpg │ │ ├── 34.jpg │ │ ├── 35.jpg │ │ ├── 36.jpg │ │ ├── 37.jpg │ │ ├── 38.jpg │ │ ├── 39.jpg │ │ ├── 4.jpg │ │ ├── 40.jpg │ │ ├── 5.jpg │ │ ├── 6.jpg │ │ ├── 7.jpg │ │ ├── 8.jpg │ │ └── 9.jpg │ ├── index.html │ └── index2.html ├── libs │ └── vconsole.min.js ├── requireJs │ └── index.html └── sprite │ ├── c1l1frame.jpg │ ├── img │ ├── 1.png │ └── 2.png │ ├── imgs │ └── 1.jpg │ ├── index-ratio1.html │ ├── index-ratio2.html │ └── index-sprite.html ├── dist └── canvas-keyframes.min.js ├── gulpfile.js ├── package.json ├── readMe.md ├── readeMe_EN.md ├── script.sh ├── src └── canvas-keyframes.js ├── static └── wx.jpg └── test └── index.js /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | zl 4 | # Editor directories and files 5 | .idea 6 | .vscode 7 | *.suo 8 | *.ntvs* 9 | *.njsproj 10 | *.sln 11 | package-lock.json -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "4.2" 4 | sudo: false -------------------------------------------------------------------------------- /demos/imgarr/imgs/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wenyiweb/canvasKeyFrames/621808c041e4f0289e11178f307befc9ddfc1261/demos/imgarr/imgs/1.jpg -------------------------------------------------------------------------------- /demos/imgarr/imgs/10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wenyiweb/canvasKeyFrames/621808c041e4f0289e11178f307befc9ddfc1261/demos/imgarr/imgs/10.jpg -------------------------------------------------------------------------------- /demos/imgarr/imgs/11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wenyiweb/canvasKeyFrames/621808c041e4f0289e11178f307befc9ddfc1261/demos/imgarr/imgs/11.jpg -------------------------------------------------------------------------------- /demos/imgarr/imgs/12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wenyiweb/canvasKeyFrames/621808c041e4f0289e11178f307befc9ddfc1261/demos/imgarr/imgs/12.jpg -------------------------------------------------------------------------------- /demos/imgarr/imgs/13.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wenyiweb/canvasKeyFrames/621808c041e4f0289e11178f307befc9ddfc1261/demos/imgarr/imgs/13.jpg -------------------------------------------------------------------------------- /demos/imgarr/imgs/14.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wenyiweb/canvasKeyFrames/621808c041e4f0289e11178f307befc9ddfc1261/demos/imgarr/imgs/14.jpg -------------------------------------------------------------------------------- /demos/imgarr/imgs/15.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wenyiweb/canvasKeyFrames/621808c041e4f0289e11178f307befc9ddfc1261/demos/imgarr/imgs/15.jpg -------------------------------------------------------------------------------- /demos/imgarr/imgs/16.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wenyiweb/canvasKeyFrames/621808c041e4f0289e11178f307befc9ddfc1261/demos/imgarr/imgs/16.jpg -------------------------------------------------------------------------------- /demos/imgarr/imgs/17.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wenyiweb/canvasKeyFrames/621808c041e4f0289e11178f307befc9ddfc1261/demos/imgarr/imgs/17.jpg -------------------------------------------------------------------------------- /demos/imgarr/imgs/18.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wenyiweb/canvasKeyFrames/621808c041e4f0289e11178f307befc9ddfc1261/demos/imgarr/imgs/18.jpg -------------------------------------------------------------------------------- /demos/imgarr/imgs/19.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wenyiweb/canvasKeyFrames/621808c041e4f0289e11178f307befc9ddfc1261/demos/imgarr/imgs/19.jpg -------------------------------------------------------------------------------- /demos/imgarr/imgs/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wenyiweb/canvasKeyFrames/621808c041e4f0289e11178f307befc9ddfc1261/demos/imgarr/imgs/2.jpg -------------------------------------------------------------------------------- /demos/imgarr/imgs/20.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wenyiweb/canvasKeyFrames/621808c041e4f0289e11178f307befc9ddfc1261/demos/imgarr/imgs/20.jpg -------------------------------------------------------------------------------- /demos/imgarr/imgs/21.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wenyiweb/canvasKeyFrames/621808c041e4f0289e11178f307befc9ddfc1261/demos/imgarr/imgs/21.jpg -------------------------------------------------------------------------------- /demos/imgarr/imgs/22.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wenyiweb/canvasKeyFrames/621808c041e4f0289e11178f307befc9ddfc1261/demos/imgarr/imgs/22.jpg -------------------------------------------------------------------------------- /demos/imgarr/imgs/23.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wenyiweb/canvasKeyFrames/621808c041e4f0289e11178f307befc9ddfc1261/demos/imgarr/imgs/23.jpg -------------------------------------------------------------------------------- /demos/imgarr/imgs/24.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wenyiweb/canvasKeyFrames/621808c041e4f0289e11178f307befc9ddfc1261/demos/imgarr/imgs/24.jpg -------------------------------------------------------------------------------- /demos/imgarr/imgs/25.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wenyiweb/canvasKeyFrames/621808c041e4f0289e11178f307befc9ddfc1261/demos/imgarr/imgs/25.jpg -------------------------------------------------------------------------------- /demos/imgarr/imgs/26.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wenyiweb/canvasKeyFrames/621808c041e4f0289e11178f307befc9ddfc1261/demos/imgarr/imgs/26.jpg -------------------------------------------------------------------------------- /demos/imgarr/imgs/27.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wenyiweb/canvasKeyFrames/621808c041e4f0289e11178f307befc9ddfc1261/demos/imgarr/imgs/27.jpg -------------------------------------------------------------------------------- /demos/imgarr/imgs/28.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wenyiweb/canvasKeyFrames/621808c041e4f0289e11178f307befc9ddfc1261/demos/imgarr/imgs/28.jpg -------------------------------------------------------------------------------- /demos/imgarr/imgs/29.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wenyiweb/canvasKeyFrames/621808c041e4f0289e11178f307befc9ddfc1261/demos/imgarr/imgs/29.jpg -------------------------------------------------------------------------------- /demos/imgarr/imgs/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wenyiweb/canvasKeyFrames/621808c041e4f0289e11178f307befc9ddfc1261/demos/imgarr/imgs/3.jpg -------------------------------------------------------------------------------- /demos/imgarr/imgs/30.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wenyiweb/canvasKeyFrames/621808c041e4f0289e11178f307befc9ddfc1261/demos/imgarr/imgs/30.jpg -------------------------------------------------------------------------------- /demos/imgarr/imgs/31.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wenyiweb/canvasKeyFrames/621808c041e4f0289e11178f307befc9ddfc1261/demos/imgarr/imgs/31.jpg -------------------------------------------------------------------------------- /demos/imgarr/imgs/32.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wenyiweb/canvasKeyFrames/621808c041e4f0289e11178f307befc9ddfc1261/demos/imgarr/imgs/32.jpg -------------------------------------------------------------------------------- /demos/imgarr/imgs/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wenyiweb/canvasKeyFrames/621808c041e4f0289e11178f307befc9ddfc1261/demos/imgarr/imgs/4.jpg -------------------------------------------------------------------------------- /demos/imgarr/imgs/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wenyiweb/canvasKeyFrames/621808c041e4f0289e11178f307befc9ddfc1261/demos/imgarr/imgs/5.jpg -------------------------------------------------------------------------------- /demos/imgarr/imgs/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wenyiweb/canvasKeyFrames/621808c041e4f0289e11178f307befc9ddfc1261/demos/imgarr/imgs/6.jpg -------------------------------------------------------------------------------- /demos/imgarr/imgs/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wenyiweb/canvasKeyFrames/621808c041e4f0289e11178f307befc9ddfc1261/demos/imgarr/imgs/7.jpg -------------------------------------------------------------------------------- /demos/imgarr/imgs/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wenyiweb/canvasKeyFrames/621808c041e4f0289e11178f307befc9ddfc1261/demos/imgarr/imgs/8.jpg -------------------------------------------------------------------------------- /demos/imgarr/imgs/9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wenyiweb/canvasKeyFrames/621808c041e4f0289e11178f307befc9ddfc1261/demos/imgarr/imgs/9.jpg -------------------------------------------------------------------------------- /demos/imgarr/imgs2/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wenyiweb/canvasKeyFrames/621808c041e4f0289e11178f307befc9ddfc1261/demos/imgarr/imgs2/1.jpg -------------------------------------------------------------------------------- /demos/imgarr/imgs2/10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wenyiweb/canvasKeyFrames/621808c041e4f0289e11178f307befc9ddfc1261/demos/imgarr/imgs2/10.jpg -------------------------------------------------------------------------------- /demos/imgarr/imgs2/11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wenyiweb/canvasKeyFrames/621808c041e4f0289e11178f307befc9ddfc1261/demos/imgarr/imgs2/11.jpg -------------------------------------------------------------------------------- /demos/imgarr/imgs2/12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wenyiweb/canvasKeyFrames/621808c041e4f0289e11178f307befc9ddfc1261/demos/imgarr/imgs2/12.jpg -------------------------------------------------------------------------------- /demos/imgarr/imgs2/13.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wenyiweb/canvasKeyFrames/621808c041e4f0289e11178f307befc9ddfc1261/demos/imgarr/imgs2/13.jpg -------------------------------------------------------------------------------- /demos/imgarr/imgs2/14.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wenyiweb/canvasKeyFrames/621808c041e4f0289e11178f307befc9ddfc1261/demos/imgarr/imgs2/14.jpg -------------------------------------------------------------------------------- /demos/imgarr/imgs2/15.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wenyiweb/canvasKeyFrames/621808c041e4f0289e11178f307befc9ddfc1261/demos/imgarr/imgs2/15.jpg -------------------------------------------------------------------------------- /demos/imgarr/imgs2/16.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wenyiweb/canvasKeyFrames/621808c041e4f0289e11178f307befc9ddfc1261/demos/imgarr/imgs2/16.jpg -------------------------------------------------------------------------------- /demos/imgarr/imgs2/17.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wenyiweb/canvasKeyFrames/621808c041e4f0289e11178f307befc9ddfc1261/demos/imgarr/imgs2/17.jpg -------------------------------------------------------------------------------- /demos/imgarr/imgs2/18.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wenyiweb/canvasKeyFrames/621808c041e4f0289e11178f307befc9ddfc1261/demos/imgarr/imgs2/18.jpg -------------------------------------------------------------------------------- /demos/imgarr/imgs2/19.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wenyiweb/canvasKeyFrames/621808c041e4f0289e11178f307befc9ddfc1261/demos/imgarr/imgs2/19.jpg -------------------------------------------------------------------------------- /demos/imgarr/imgs2/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wenyiweb/canvasKeyFrames/621808c041e4f0289e11178f307befc9ddfc1261/demos/imgarr/imgs2/2.jpg -------------------------------------------------------------------------------- /demos/imgarr/imgs2/20.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wenyiweb/canvasKeyFrames/621808c041e4f0289e11178f307befc9ddfc1261/demos/imgarr/imgs2/20.jpg -------------------------------------------------------------------------------- /demos/imgarr/imgs2/21.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wenyiweb/canvasKeyFrames/621808c041e4f0289e11178f307befc9ddfc1261/demos/imgarr/imgs2/21.jpg -------------------------------------------------------------------------------- /demos/imgarr/imgs2/22.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wenyiweb/canvasKeyFrames/621808c041e4f0289e11178f307befc9ddfc1261/demos/imgarr/imgs2/22.jpg -------------------------------------------------------------------------------- /demos/imgarr/imgs2/23.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wenyiweb/canvasKeyFrames/621808c041e4f0289e11178f307befc9ddfc1261/demos/imgarr/imgs2/23.jpg -------------------------------------------------------------------------------- /demos/imgarr/imgs2/24.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wenyiweb/canvasKeyFrames/621808c041e4f0289e11178f307befc9ddfc1261/demos/imgarr/imgs2/24.jpg -------------------------------------------------------------------------------- /demos/imgarr/imgs2/25.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wenyiweb/canvasKeyFrames/621808c041e4f0289e11178f307befc9ddfc1261/demos/imgarr/imgs2/25.jpg -------------------------------------------------------------------------------- /demos/imgarr/imgs2/26.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wenyiweb/canvasKeyFrames/621808c041e4f0289e11178f307befc9ddfc1261/demos/imgarr/imgs2/26.jpg -------------------------------------------------------------------------------- /demos/imgarr/imgs2/27.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wenyiweb/canvasKeyFrames/621808c041e4f0289e11178f307befc9ddfc1261/demos/imgarr/imgs2/27.jpg -------------------------------------------------------------------------------- /demos/imgarr/imgs2/28.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wenyiweb/canvasKeyFrames/621808c041e4f0289e11178f307befc9ddfc1261/demos/imgarr/imgs2/28.jpg -------------------------------------------------------------------------------- /demos/imgarr/imgs2/29.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wenyiweb/canvasKeyFrames/621808c041e4f0289e11178f307befc9ddfc1261/demos/imgarr/imgs2/29.jpg -------------------------------------------------------------------------------- /demos/imgarr/imgs2/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wenyiweb/canvasKeyFrames/621808c041e4f0289e11178f307befc9ddfc1261/demos/imgarr/imgs2/3.jpg -------------------------------------------------------------------------------- /demos/imgarr/imgs2/30.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wenyiweb/canvasKeyFrames/621808c041e4f0289e11178f307befc9ddfc1261/demos/imgarr/imgs2/30.jpg -------------------------------------------------------------------------------- /demos/imgarr/imgs2/31.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wenyiweb/canvasKeyFrames/621808c041e4f0289e11178f307befc9ddfc1261/demos/imgarr/imgs2/31.jpg -------------------------------------------------------------------------------- /demos/imgarr/imgs2/32.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wenyiweb/canvasKeyFrames/621808c041e4f0289e11178f307befc9ddfc1261/demos/imgarr/imgs2/32.jpg -------------------------------------------------------------------------------- /demos/imgarr/imgs2/33.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wenyiweb/canvasKeyFrames/621808c041e4f0289e11178f307befc9ddfc1261/demos/imgarr/imgs2/33.jpg -------------------------------------------------------------------------------- /demos/imgarr/imgs2/34.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wenyiweb/canvasKeyFrames/621808c041e4f0289e11178f307befc9ddfc1261/demos/imgarr/imgs2/34.jpg -------------------------------------------------------------------------------- /demos/imgarr/imgs2/35.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wenyiweb/canvasKeyFrames/621808c041e4f0289e11178f307befc9ddfc1261/demos/imgarr/imgs2/35.jpg -------------------------------------------------------------------------------- /demos/imgarr/imgs2/36.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wenyiweb/canvasKeyFrames/621808c041e4f0289e11178f307befc9ddfc1261/demos/imgarr/imgs2/36.jpg -------------------------------------------------------------------------------- /demos/imgarr/imgs2/37.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wenyiweb/canvasKeyFrames/621808c041e4f0289e11178f307befc9ddfc1261/demos/imgarr/imgs2/37.jpg -------------------------------------------------------------------------------- /demos/imgarr/imgs2/38.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wenyiweb/canvasKeyFrames/621808c041e4f0289e11178f307befc9ddfc1261/demos/imgarr/imgs2/38.jpg -------------------------------------------------------------------------------- /demos/imgarr/imgs2/39.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wenyiweb/canvasKeyFrames/621808c041e4f0289e11178f307befc9ddfc1261/demos/imgarr/imgs2/39.jpg -------------------------------------------------------------------------------- /demos/imgarr/imgs2/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wenyiweb/canvasKeyFrames/621808c041e4f0289e11178f307befc9ddfc1261/demos/imgarr/imgs2/4.jpg -------------------------------------------------------------------------------- /demos/imgarr/imgs2/40.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wenyiweb/canvasKeyFrames/621808c041e4f0289e11178f307befc9ddfc1261/demos/imgarr/imgs2/40.jpg -------------------------------------------------------------------------------- /demos/imgarr/imgs2/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wenyiweb/canvasKeyFrames/621808c041e4f0289e11178f307befc9ddfc1261/demos/imgarr/imgs2/5.jpg -------------------------------------------------------------------------------- /demos/imgarr/imgs2/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wenyiweb/canvasKeyFrames/621808c041e4f0289e11178f307befc9ddfc1261/demos/imgarr/imgs2/6.jpg -------------------------------------------------------------------------------- /demos/imgarr/imgs2/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wenyiweb/canvasKeyFrames/621808c041e4f0289e11178f307befc9ddfc1261/demos/imgarr/imgs2/7.jpg -------------------------------------------------------------------------------- /demos/imgarr/imgs2/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wenyiweb/canvasKeyFrames/621808c041e4f0289e11178f307befc9ddfc1261/demos/imgarr/imgs2/8.jpg -------------------------------------------------------------------------------- /demos/imgarr/imgs2/9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wenyiweb/canvasKeyFrames/621808c041e4f0289e11178f307befc9ddfc1261/demos/imgarr/imgs2/9.jpg -------------------------------------------------------------------------------- /demos/imgarr/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 7 | 11 | 12 | 13 |
14 | 15 |
16 | 17 | 18 | 54 | 55 | -------------------------------------------------------------------------------- /demos/imgarr/index2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 7 | 11 | 12 | 13 |
14 | 15 |
16 | 17 | 18 | 19 | 55 | 56 | -------------------------------------------------------------------------------- /demos/libs/vconsole.min.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * vConsole v3.3.4 (https://github.com/Tencent/vConsole) 3 | * 4 | * Tencent is pleased to support the open source community by making vConsole available. 5 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved. 6 | * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at 7 | * http://opensource.org/licenses/MIT 8 | * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. 9 | */ 10 | !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("VConsole",[],t):"object"==typeof exports?exports.VConsole=t():e.VConsole=t()}(window,function(){return function(e){var t={};function o(n){if(t[n])return t[n].exports;var r=t[n]={i:n,l:!1,exports:{}};return e[n].call(r.exports,r,r.exports,o),r.l=!0,r.exports}return o.m=e,o.c=t,o.d=function(e,t,n){o.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},o.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.t=function(e,t){if(1&t&&(e=o(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(o.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)o.d(n,r,function(t){return e[t]}.bind(null,r));return n},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p="",o(o.s=6)}([function(e,t,o){var n,r,i;r=[t],void 0===(i="function"==typeof(n=function(e){"use strict";function t(e){return(t="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function o(e){return"[object Number]"==Object.prototype.toString.call(e)}function n(e){return"[object String]"==Object.prototype.toString.call(e)}function r(e){return"[object Array]"==Object.prototype.toString.call(e)}function i(e){return"[object Boolean]"==Object.prototype.toString.call(e)}function a(e){return void 0===e}function l(e){return null===e}function c(e){return"[object Symbol]"==Object.prototype.toString.call(e)}function s(e){return!("[object Object]"!=Object.prototype.toString.call(e)&&(o(e)||n(e)||i(e)||r(e)||l(e)||d(e)||a(e)||c(e)))}function d(e){return"[object Function]"==Object.prototype.toString.call(e)}function u(e){var t=Object.prototype.toString.call(e);return"[object global]"==t||"[object Window]"==t||"[object DOMWindow]"==t}function v(e){if(!s(e)&&!r(e))return[];if(r(e)){var t=[];return e.forEach(function(e,o){t.push(o)}),t}return Object.getOwnPropertyNames(e).sort()}Object.defineProperty(e,"__esModule",{value:!0}),e.getDate=function(e){var t=e>0?new Date(e):new Date,o=t.getDate()<10?"0"+t.getDate():t.getDate(),n=t.getMonth()<9?"0"+(t.getMonth()+1):t.getMonth()+1,r=t.getFullYear(),i=t.getHours()<10?"0"+t.getHours():t.getHours(),a=t.getMinutes()<10?"0"+t.getMinutes():t.getMinutes(),l=t.getSeconds()<10?"0"+t.getSeconds():t.getSeconds(),c=t.getMilliseconds()<10?"0"+t.getMilliseconds():t.getMilliseconds();return c<100&&(c="0"+c),{time:+t,year:r,month:n,day:o,hour:i,minute:a,second:l,millisecond:c}},e.isNumber=o,e.isString=n,e.isArray=r,e.isBoolean=i,e.isUndefined=a,e.isNull=l,e.isSymbol=c,e.isObject=s,e.isFunction=d,e.isElement=function(e){return"object"===("undefined"==typeof HTMLElement?"undefined":t(HTMLElement))?e instanceof HTMLElement:e&&"object"===t(e)&&null!==e&&1===e.nodeType&&"string"==typeof e.nodeName},e.isWindow=u,e.isPlainObject=function(e){var o,n=Object.prototype.hasOwnProperty;if(!e||"object"!==t(e)||e.nodeType||u(e))return!1;try{if(e.constructor&&!n.call(e,"constructor")&&!n.call(e.constructor.prototype,"isPrototypeOf"))return!1}catch(e){return!1}for(o in e);return void 0===o||n.call(e,o)},e.htmlEncode=function(e){return document.createElement("a").appendChild(document.createTextNode(e)).parentNode.innerHTML},e.JSONStringify=function(e){if(!s(e)&&!r(e))return JSON.stringify(e);var t="{",o="}";r(e)&&(t="[",o="]");for(var n=t,i=v(e),a=0;a-1||(r.push(t),e[o].className=r.join(" "))}}},removeClass:function(e,t){if(e){(0,n.isArray)(e)||(e=[e]);for(var o=0;o1&&void 0!==arguments[1]?arguments[1]:"newPlugin";!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.id=t,this.name=o,this.isReady=!1,this.eventList={}}var t,o,r;return t=e,(o=[{key:"on",value:function(e,t){return this.eventList[e]=t,this}},{key:"trigger",value:function(e,t){if("function"==typeof this.eventList[e])this.eventList[e].call(this,t);else{var o="on"+e.charAt(0).toUpperCase()+e.slice(1);"function"==typeof this[o]&&this[o].call(this,t)}return this}},{key:"id",get:function(){return this._id},set:function(e){if(!e)throw"Plugin ID cannot be empty";this._id=e.toLowerCase()}},{key:"name",get:function(){return this._name},set:function(e){if(!e)throw"Plugin name cannot be empty";this._name=e}},{key:"vConsole",get:function(){return this._vConsole||void 0},set:function(e){if(!e)throw"vConsole cannot be empty";this._vConsole=e}}])&&n(t.prototype,o),r&&n(t,r),e}();o.default=r,e.exports=t.default})?n.apply(t,r):n)||(e.exports=i)},function(e,t,o){var n,r,i;r=[t,o(0),o(1),o(2),o(18),o(19),o(20)],void 0===(i="function"==typeof(n=function(o,n,r,i,a,l,c){"use strict";function s(e){return e&&e.__esModule?e:{default:e}}function d(e){return(d="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function u(e,t){for(var o=0;o=o.scrollHeight?e.isInBottom=!0:e.isInBottom=!1)});for(var n=0;n-1&&g.splice(e,1)}},{key:"onShow",value:function(){this.isShow=!0,1==this.isInBottom&&this.autoScrollToBottom()}},{key:"onHide",value:function(){this.isShow=!1}},{key:"onShowConsole",value:function(){1==this.isInBottom&&this.autoScrollToBottom()}},{key:"onUpdateOption",value:function(){this.vConsole.option.maxLogNumber!=this.maxLogNumber&&(this.updateMaxLogNumber(),this.limitMaxLogs())}},{key:"updateMaxLogNumber",value:function(){this.maxLogNumber=this.vConsole.option.maxLogNumber||b,this.maxLogNumber=Math.max(1,this.maxLogNumber)}},{key:"limitMaxLogs",value:function(){if(this.isReady)for(;this.logNumber>this.maxLogNumber;){var e=r.default.one(".vc-item",this.$tabbox);if(!e)break;e.parentNode.removeChild(e),this.logNumber--}}},{key:"showLogType",value:function(e){var t=r.default.one(".vc-log",this.$tabbox);r.default.removeClass(t,"vc-log-partly-log"),r.default.removeClass(t,"vc-log-partly-info"),r.default.removeClass(t,"vc-log-partly-warn"),r.default.removeClass(t,"vc-log-partly-error"),"all"==e?r.default.removeClass(t,"vc-log-partly"):(r.default.addClass(t,"vc-log-partly"),r.default.addClass(t,"vc-log-partly-"+e))}},{key:"autoScrollToBottom",value:function(){this.vConsole.option.disableLogScrolling||this.scrollToBottom()}},{key:"scrollToBottom",value:function(){var e=r.default.one(".vc-content");e&&(e.scrollTop=e.scrollHeight-e.offsetHeight)}},{key:"mockConsole",value:function(){var e=this,t=this,o=["log","info","warn","debug","error"];window.console?(o.map(function(e){t.console[e]=window.console[e]}),t.console.time=window.console.time,t.console.timeEnd=window.console.timeEnd,t.console.clear=window.console.clear):window.console={},o.map(function(t){window.console[t]=function(){for(var o=arguments.length,n=new Array(o),r=0;r0&&(r=a[1].toLowerCase(),i=g.indexOf(r)>-1)}if(r===this.id||!0!==i&&"default"===this.id)if(e._id||(e._id="__vc_"+Math.random().toString(36).substring(2,8)),e.date||(e.date=+new Date),this.isReady){n.isString(t[0])&&i&&(t[0]=t[0].replace(o,""),""===t[0]&&t.shift());for(var l={_id:e._id,logType:e.logType,logText:[],hasContent:!!e.content,count:1},c=0;c "+t[p].toString()+"":n.isObject(t[p])||n.isArray(t[p])?this.getFoldedLine(t[p]):(l[p]?' '):" ")+n.htmlEncode(t[p]).replace(/\n/g,"
")+""}catch(e){b=" ["+d(t[p])+"]"}b&&("string"==typeof b?f.insertAdjacentHTML("beforeend",b):f.insertAdjacentElement("beforeend",b))}n.isObject(e.content)&&f.insertAdjacentElement("beforeend",e.content),r.default.one(".vc-log",this.$tabbox).insertAdjacentElement("beforeend",o),this.logNumber++,this.limitMaxLogs()}},{key:"getFoldedLine",value:function(e,t){var o=this;if(!t){var i=n.JSONStringify(e),a=i.substr(0,36);t=n.getObjName(e),i.length>36&&(a+="..."),t+=" "+a}var s=r.default.render(l.default,{outer:t,lineType:"obj"});return r.default.bind(r.default.one(".vc-fold-outer",s),"click",function(t){t.preventDefault(),t.stopPropagation(),r.default.hasClass(s,"vc-toggle")?(r.default.removeClass(s,"vc-toggle"),r.default.removeClass(r.default.one(".vc-fold-inner",s),"vc-toggle"),r.default.removeClass(r.default.one(".vc-fold-outer",s),"vc-toggle")):(r.default.addClass(s,"vc-toggle"),r.default.addClass(r.default.one(".vc-fold-inner",s),"vc-toggle"),r.default.addClass(r.default.one(".vc-fold-outer",s),"vc-toggle"));var i=r.default.one(".vc-fold-inner",s);return setTimeout(function(){if(0==i.children.length&&e){for(var t=n.getObjAllKeys(e),a=0;adocument.documentElement.offsetWidth&&(o=document.documentElement.offsetWidth-t.offsetWidth),n+t.offsetHeight>document.documentElement.offsetHeight&&(n=document.documentElement.offsetHeight-t.offsetHeight),o<0&&(o=0),n<0&&(n=0),this.switchPos.x=o,this.switchPos.y=n,i.default.one(".vc-switch").style.right=o+"px",i.default.one(".vc-switch").style.bottom=n+"px");var a=window.devicePixelRatio||1,c=document.querySelector('[name="viewport"]');if(c&&c.content){var s=c.content.match(/initial\-scale\=\d+(\.\d+)?/);(s?parseFloat(s[0].split("=")[1]):1)<1&&(this.$dom.style.fontSize=13*a+"px")}i.default.one(".vc-mask",this.$dom).style.display="none"}},{key:"_mockTap",value:function(){var e,t,o,n=!1,r=null;this.$dom.addEventListener("touchstart",function(n){if(void 0===e){var i=n.targetTouches[0];t=i.pageX,o=i.pageY,e=n.timeStamp,r=n.target.nodeType===Node.TEXT_NODE?n.target.parentNode:n.target}},!1),this.$dom.addEventListener("touchmove",function(e){var r=e.changedTouches[0];(Math.abs(r.pageX-t)>10||Math.abs(r.pageY-o)>10)&&(n=!0)}),this.$dom.addEventListener("touchend",function(t){if(!1===n&&t.timeStamp-e<700&&null!=r){var o=!1;switch(r.tagName.toLowerCase()){case"textarea":o=!0;break;case"input":switch(r.type){case"button":case"checkbox":case"file":case"image":case"radio":case"submit":o=!1;break;default:o=!r.disabled&&!r.readOnly}}o?r.focus():t.preventDefault();var i=t.changedTouches[0],a=document.createEvent("MouseEvents");a.initMouseEvent("click",!0,!0,window,1,i.screenX,i.screenY,i.clientX,i.clientY,!1,!1,!1,!1,0,null),a.forwardedTouchEvent=!0,a.initEvent("click",!0,!0),r.dispatchEvent(a)}e=void 0,n=!1,r=null},!1)}},{key:"_bindEvent",value:function(){var e=this,t=i.default.one(".vc-switch",e.$dom);i.default.bind(t,"touchstart",function(t){e.switchPos.startX=t.touches[0].pageX,e.switchPos.startY=t.touches[0].pageY}),i.default.bind(t,"touchend",function(t){e.switchPos.x=e.switchPos.endX,e.switchPos.y=e.switchPos.endY,e.switchPos.startX=0,e.switchPos.startY=0,r.setStorage("switch_x",e.switchPos.x),r.setStorage("switch_y",e.switchPos.y)}),i.default.bind(t,"touchmove",function(o){if(o.touches.length>0){var n=o.touches[0].pageX-e.switchPos.startX,r=o.touches[0].pageY-e.switchPos.startY,i=e.switchPos.x-n,a=e.switchPos.y-r;i+t.offsetWidth>document.documentElement.offsetWidth&&(i=document.documentElement.offsetWidth-t.offsetWidth),a+t.offsetHeight>document.documentElement.offsetHeight&&(a=document.documentElement.offsetHeight-t.offsetHeight),i<0&&(i=0),a<0&&(a=0),t.style.right=i+"px",t.style.bottom=a+"px",e.switchPos.endX=i,e.switchPos.endY=a,o.preventDefault()}}),i.default.bind(i.default.one(".vc-switch",e.$dom),"click",function(){e.show()}),i.default.bind(i.default.one(".vc-hide",e.$dom),"click",function(){e.hide()}),i.default.bind(i.default.one(".vc-mask",e.$dom),"click",function(t){if(t.target!=i.default.one(".vc-mask"))return!1;e.hide()}),i.default.delegate(i.default.one(".vc-tabbar",e.$dom),"click",".vc-tab",function(t){var o=this.dataset.tab;o!=e.activedTab&&e.showTab(o)}),i.default.bind(i.default.one(".vc-panel",e.$dom),"transitionend webkitTransitionEnd oTransitionEnd otransitionend",function(t){if(t.target!=i.default.one(".vc-panel"))return!1;i.default.hasClass(e.$dom,"vc-toggle")||(t.target.style.display="none")});var o=i.default.one(".vc-content",e.$dom),n=!1;i.default.bind(o,"touchstart",function(e){var t=o.scrollTop,r=o.scrollHeight,a=t+o.offsetHeight;0===t?(o.scrollTop=1,0===o.scrollTop&&(i.default.hasClass(e.target,"vc-cmd-input")||(n=!0))):a===r&&(o.scrollTop=t-1,o.scrollTop===t&&(i.default.hasClass(e.target,"vc-cmd-input")||(n=!0)))}),i.default.bind(o,"touchmove",function(e){n&&e.preventDefault()}),i.default.bind(o,"touchend",function(e){n=!1})}},{key:"_autoRun",value:function(){for(var e in this.isInited=!0,this.pluginList)this._initPlugin(this.pluginList[e]);this.tabList.length>0&&this.showTab(this.tabList[0]),this.triggerEvent("ready")}},{key:"triggerEvent",value:function(e,t){e="on"+e.charAt(0).toUpperCase()+e.slice(1),r.isFunction(this.option[e])&&this.option[e].apply(this,t)}},{key:"_initPlugin",value:function(e){var t=this;e.vConsole=this,e.trigger("init"),e.trigger("renderTab",function(o){t.tabList.push(e.id);var n=i.default.render(c.default,{id:e.id,name:e.name});i.default.one(".vc-tabbar",t.$dom).insertAdjacentElement("beforeend",n);var a=i.default.render(s.default,{id:e.id});o&&(r.isString(o)?a.innerHTML+=o:r.isFunction(o.appendTo)?o.appendTo(a):r.isElement(o)&&a.insertAdjacentElement("beforeend",o)),i.default.one(".vc-content",t.$dom).insertAdjacentElement("beforeend",a)}),e.trigger("addTopBar",function(o){if(o)for(var n=i.default.one(".vc-topbar",t.$dom),a=function(t){var a=o[t],l=i.default.render(d.default,{name:a.name||"Undefined",className:a.className||"",pluginID:e.id});if(a.data)for(var c in a.data)l.dataset[c]=a.data[c];r.isFunction(a.onClick)&&i.default.bind(l,"click",function(t){!1===a.onClick.call(l)||(i.default.removeClass(i.default.all(".vc-topbar-"+e.id),"vc-actived"),i.default.addClass(l,"vc-actived"))}),n.insertAdjacentElement("beforeend",l)},l=0;l-1&&this.tabList.splice(s,1);try{delete this.pluginList[e]}catch(t){this.pluginList[e]=void 0}return this.activedTab==e&&this.tabList.length>0&&this.showTab(this.tabList[0]),!0}},{key:"show",value:function(){if(this.isInited){var e=this;i.default.one(".vc-panel",this.$dom).style.display="block",setTimeout(function(){i.default.addClass(e.$dom,"vc-toggle"),e._triggerPluginsEvent("showConsole"),i.default.one(".vc-mask",e.$dom).style.display="block"},10)}}},{key:"hide",value:function(){if(this.isInited){i.default.removeClass(this.$dom,"vc-toggle"),this._triggerPluginsEvent("hideConsole");var e=i.default.one(".vc-mask",this.$dom),t=i.default.one(".vc-panel",this.$dom);i.default.bind(e,"transitionend",function(o){e.style.display="none",t.style.display="none"})}}},{key:"showSwitch",value:function(){this.isInited&&(i.default.one(".vc-switch",this.$dom).style.display="block")}},{key:"hideSwitch",value:function(){this.isInited&&(i.default.one(".vc-switch",this.$dom).style.display="none")}},{key:"showTab",value:function(e){if(this.isInited){var t=i.default.one("#__vc_log_"+e);i.default.removeClass(i.default.all(".vc-tab",this.$dom),"vc-actived"),i.default.addClass(i.default.one("#__vc_tab_"+e),"vc-actived"),i.default.removeClass(i.default.all(".vc-logbox",this.$dom),"vc-actived"),i.default.addClass(t,"vc-actived");var o=i.default.all(".vc-topbar-"+e,this.$dom);i.default.removeClass(i.default.all(".vc-toptab",this.$dom),"vc-toggle"),i.default.addClass(o,"vc-toggle"),o.length>0?i.default.addClass(i.default.one(".vc-content",this.$dom),"vc-has-topbar"):i.default.removeClass(i.default.one(".vc-content",this.$dom),"vc-has-topbar"),i.default.removeClass(i.default.all(".vc-tool",this.$dom),"vc-toggle"),i.default.addClass(i.default.all(".vc-tool-"+e,this.$dom),"vc-toggle"),this.activedTab&&this._triggerPluginEvent(this.activedTab,"hide"),this.activedTab=e,this._triggerPluginEvent(this.activedTab,"show")}}},{key:"setOption",value:function(e,t){if(r.isString(e))this.option[e]=t,this._triggerPluginsEvent("updateOption");else if(r.isObject(e)){for(var o in e)this.option[o]=e[o];this._triggerPluginsEvent("updateOption")}else console.debug("The first parameter of vConsole.setOption() must be a string or an object.")}},{key:"destroy",value:function(){if(this.isInited){for(var e=Object.keys(this.pluginList),t=e.length-1;t>=0;t--)this.removePlugin(e[t]);this.$dom.parentNode.removeChild(this.$dom),this.isInited=!1}}}])&&_(t.prototype,o),a&&_(t,a),e}();x.VConsolePlugin=v.default,x.VConsoleLogPlugin=f.default,x.VConsoleDefaultPlugin=p.default,x.VConsoleSystemPlugin=b.default,x.VConsoleNetworkPlugin=g.default,x.VConsoleElementPlugin=h.default,x.VConsoleStoragePlugin=m.default;var k=x;o.default=k,e.exports=t.default})?n.apply(t,r):n)||(e.exports=i)},function(e){e.exports=JSON.parse('{"name":"vconsole","version":"3.3.4","description":"A lightweight, extendable front-end developer tool for mobile web page.","homepage":"https://github.com/Tencent/vConsole","main":"dist/vconsole.min.js","typings":"dist/vconsole.min.d.ts","scripts":{"test":"mocha","build":"webpack"},"keywords":["console","debug","mobile"],"repository":{"type":"git","url":"git+https://github.com/Tencent/vConsole.git"},"dependencies":{},"devDependencies":{"@babel/core":"^7.5.5","@babel/plugin-proposal-class-properties":"^7.5.5","@babel/plugin-proposal-export-namespace-from":"^7.5.2","@babel/plugin-proposal-object-rest-spread":"^7.5.5","@babel/preset-env":"^7.5.5","babel-loader":"^8.0.6","babel-plugin-add-module-exports":"^1.0.2","chai":"^4.2.0","copy-webpack-plugin":"^5.0.4","css-loader":"^3.2.0","html-loader":"^0.5.5","jsdom":"^15.1.1","json-loader":"^0.5.7","less":"^3.10.0","less-loader":"^5.0.0","mocha":"^5.2.0","style-loader":"^1.0.0","webpack":"^4.39.2","webpack-cli":"^3.3.6"},"author":"Tencent","license":"MIT"}')},function(e,t,o){var n,r,i;r=[t],void 0===(i="function"==typeof(n=function(o){"use strict";Object.defineProperty(o,"__esModule",{value:!0}),o.default=function(e,t,o){var n=/\{\{([^\}]+)\}\}/g,r="",i="",a=0,l=[],c=function(e,t){""!==e&&(t?e.match(/^ ?else/g)?r+="} "+e+" {\n":e.match(/\/(if|for|switch)/g)?r+="}\n":e.match(/^ ?if|for|switch/g)?r+=e+" {\n":e.match(/^ ?(break|continue) ?$/g)?r+=e+";\n":e.match(/^ ?(case|default)/g)?r+=e+":\n":r+="arr.push("+e+");\n":r+='arr.push("'+e.replace(/"/g,'\\"')+'");\n')};for(window.__mito_data=t,window.__mito_code="",window.__mito_result="",e=(e=e.replace(/(\{\{ ?switch(.+?)\}\})[\r\n\t ]+\{\{/g,"$1{{")).replace(/^[\r\n]/,"").replace(/\n/g,"\\\n").replace(/\r/g,"\\\r"),i="(function(){\n",r="var arr = [];\n";l=n.exec(e);)c(e.slice(a,l.index),!1),c(l[1],!0),a=l.index+l[0].length;c(e.substr(a,e.length-a),!1),i+=r="with (__mito_data) {\n"+(r+='__mito_result = arr.join("");')+"\n}",i+="})();";var s=document.getElementsByTagName("script"),d="";s.length>0&&(d=s[0].nonce||"");var u=document.createElement("SCRIPT");u.innerHTML=i,u.setAttribute("nonce",d),document.documentElement.appendChild(u);var v=__mito_result;if(document.documentElement.removeChild(u),!o){var f=document.createElement("DIV");f.innerHTML=v,v=f.children[0]}return v},e.exports=t.default})?n.apply(t,r):n)||(e.exports=i)},function(e,t,o){var n=o(12);"string"==typeof n&&(n=[[e.i,n,""]]);var r={insert:"head",singleton:!1};o(5)(n,r);n.locals&&(e.exports=n.locals)},function(e,t,o){(e.exports=o(4)(!1)).push([e.i,'#__vconsole {\n color: #000;\n font-size: 13px;\n font-family: Helvetica Neue, Helvetica, Arial, sans-serif;\n /* global */\n /* compoment */\n}\n#__vconsole .vc-max-height {\n max-height: 19.23076923em;\n}\n#__vconsole .vc-max-height-line {\n max-height: 3.38461538em;\n}\n#__vconsole .vc-min-height {\n min-height: 3.07692308em;\n}\n#__vconsole dd,\n#__vconsole dl,\n#__vconsole pre {\n margin: 0;\n}\n#__vconsole .vc-switch {\n display: block;\n position: fixed;\n right: 0.76923077em;\n bottom: 0.76923077em;\n color: #FFF;\n background-color: #04BE02;\n line-height: 1;\n font-size: 1.07692308em;\n padding: 0.61538462em 1.23076923em;\n z-index: 10000;\n border-radius: 0.30769231em;\n box-shadow: 0 0 0.61538462em rgba(0, 0, 0, 0.4);\n}\n#__vconsole .vc-mask {\n display: none;\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(0, 0, 0, 0);\n z-index: 10001;\n transition: background 0.3s;\n -webkit-tap-highlight-color: transparent;\n overflow-y: scroll;\n}\n#__vconsole .vc-panel {\n display: none;\n position: fixed;\n min-height: 85%;\n left: 0;\n right: 0;\n bottom: 0;\n z-index: 10002;\n background-color: #EFEFF4;\n -webkit-transition: -webkit-transform 0.3s;\n transition: -webkit-transform 0.3s;\n transition: transform 0.3s;\n transition: transform 0.3s, -webkit-transform 0.3s;\n -webkit-transform: translate(0, 100%);\n transform: translate(0, 100%);\n}\n#__vconsole .vc-tabbar {\n border-bottom: 1px solid #D9D9D9;\n overflow-x: auto;\n height: 3em;\n width: auto;\n white-space: nowrap;\n}\n#__vconsole .vc-tabbar .vc-tab {\n display: inline-block;\n line-height: 3em;\n padding: 0 1.15384615em;\n border-right: 1px solid #D9D9D9;\n text-decoration: none;\n color: #000;\n -webkit-tap-highlight-color: transparent;\n -webkit-touch-callout: none;\n}\n#__vconsole .vc-tabbar .vc-tab:active {\n background-color: rgba(0, 0, 0, 0.15);\n}\n#__vconsole .vc-tabbar .vc-tab.vc-actived {\n background-color: #FFF;\n}\n#__vconsole .vc-content {\n background-color: #FFF;\n overflow-x: hidden;\n overflow-y: auto;\n position: absolute;\n top: 3.07692308em;\n left: 0;\n right: 0;\n bottom: 3.07692308em;\n -webkit-overflow-scrolling: touch;\n margin-bottom: constant(safe-area-inset-bottom);\n margin-bottom: env(safe-area-inset-bottom);\n}\n#__vconsole .vc-content.vc-has-topbar {\n top: 5.46153846em;\n}\n#__vconsole .vc-topbar {\n background-color: #FBF9FE;\n display: flex;\n display: -webkit-box;\n flex-direction: row;\n flex-wrap: wrap;\n -webkit-box-direction: row;\n -webkit-flex-wrap: wrap;\n width: 100%;\n}\n#__vconsole .vc-topbar .vc-toptab {\n display: none;\n flex: 1;\n -webkit-box-flex: 1;\n line-height: 2.30769231em;\n padding: 0 1.15384615em;\n border-bottom: 1px solid #D9D9D9;\n text-decoration: none;\n text-align: center;\n color: #000;\n -webkit-tap-highlight-color: transparent;\n -webkit-touch-callout: none;\n}\n#__vconsole .vc-topbar .vc-toptab.vc-toggle {\n display: block;\n}\n#__vconsole .vc-topbar .vc-toptab:active {\n background-color: rgba(0, 0, 0, 0.15);\n}\n#__vconsole .vc-topbar .vc-toptab.vc-actived {\n border-bottom: 1px solid #3e82f7;\n}\n#__vconsole .vc-logbox {\n display: none;\n position: relative;\n min-height: 100%;\n}\n#__vconsole .vc-logbox i {\n font-style: normal;\n}\n#__vconsole .vc-logbox .vc-log {\n padding-bottom: 3em;\n -webkit-tap-highlight-color: transparent;\n}\n#__vconsole .vc-logbox .vc-log:empty:before {\n content: "Empty";\n color: #999;\n position: absolute;\n top: 45%;\n left: 0;\n right: 0;\n bottom: 0;\n font-size: 1.15384615em;\n text-align: center;\n}\n#__vconsole .vc-logbox .vc-item {\n margin: 0;\n padding: 0.46153846em 0.61538462em;\n overflow: hidden;\n line-height: 1.3;\n border-bottom: 1px solid #EEE;\n word-break: break-word;\n}\n#__vconsole .vc-logbox .vc-item-info {\n color: #6A5ACD;\n}\n#__vconsole .vc-logbox .vc-item-debug {\n color: #DAA520;\n}\n#__vconsole .vc-logbox .vc-item-warn {\n color: #FFA500;\n border-color: #FFB930;\n background-color: #FFFACD;\n}\n#__vconsole .vc-logbox .vc-item-error {\n color: #DC143C;\n border-color: #F4A0AB;\n background-color: #FFE4E1;\n}\n#__vconsole .vc-logbox .vc-log.vc-log-partly .vc-item {\n display: none;\n}\n#__vconsole .vc-logbox .vc-log.vc-log-partly-log .vc-item-log,\n#__vconsole .vc-logbox .vc-log.vc-log-partly-info .vc-item-info,\n#__vconsole .vc-logbox .vc-log.vc-log-partly-warn .vc-item-warn,\n#__vconsole .vc-logbox .vc-log.vc-log-partly-error .vc-item-error {\n display: block;\n}\n#__vconsole .vc-logbox .vc-item .vc-item-content {\n margin-right: 4.61538462em;\n display: inline-block;\n}\n#__vconsole .vc-logbox .vc-item .vc-item-repeat {\n display: inline-block;\n margin-right: 0.30769231em;\n padding: 0 6.5px;\n color: #D7E0EF;\n background-color: #42597F;\n border-radius: 8.66666667px;\n}\n#__vconsole .vc-logbox .vc-item.vc-item-error .vc-item-repeat {\n color: #901818;\n background-color: #DC2727;\n}\n#__vconsole .vc-logbox .vc-item.vc-item-warn .vc-item-repeat {\n color: #987D20;\n background-color: #F4BD02;\n}\n#__vconsole .vc-logbox .vc-item .vc-item-code {\n display: block;\n white-space: pre-wrap;\n overflow: auto;\n position: relative;\n}\n#__vconsole .vc-logbox .vc-item .vc-item-code.vc-item-code-input,\n#__vconsole .vc-logbox .vc-item .vc-item-code.vc-item-code-output {\n padding-left: 0.92307692em;\n}\n#__vconsole .vc-logbox .vc-item .vc-item-code.vc-item-code-input:before,\n#__vconsole .vc-logbox .vc-item .vc-item-code.vc-item-code-output:before {\n content: "›";\n position: absolute;\n top: -0.23076923em;\n left: 0;\n font-size: 1.23076923em;\n color: #6A5ACD;\n}\n#__vconsole .vc-logbox .vc-item .vc-item-code.vc-item-code-output:before {\n content: "‹";\n}\n#__vconsole .vc-logbox .vc-item .vc-fold {\n display: block;\n overflow: auto;\n -webkit-overflow-scrolling: touch;\n}\n#__vconsole .vc-logbox .vc-item .vc-fold .vc-fold-outer {\n display: block;\n font-style: italic;\n padding-left: 0.76923077em;\n position: relative;\n}\n#__vconsole .vc-logbox .vc-item .vc-fold .vc-fold-outer:active {\n background-color: #E6E6E6;\n}\n#__vconsole .vc-logbox .vc-item .vc-fold .vc-fold-outer:before {\n content: "";\n position: absolute;\n top: 0.30769231em;\n left: 0.15384615em;\n width: 0;\n height: 0;\n border: transparent solid 0.30769231em;\n border-left-color: #000;\n}\n#__vconsole .vc-logbox .vc-item .vc-fold .vc-fold-outer.vc-toggle:before {\n top: 0.46153846em;\n left: 0;\n border-top-color: #000;\n border-left-color: transparent;\n}\n#__vconsole .vc-logbox .vc-item .vc-fold .vc-fold-inner {\n display: none;\n margin-left: 0.76923077em;\n}\n#__vconsole .vc-logbox .vc-item .vc-fold .vc-fold-inner.vc-toggle {\n display: block;\n}\n#__vconsole .vc-logbox .vc-item .vc-fold .vc-fold-inner .vc-code-key {\n margin-left: 0.76923077em;\n}\n#__vconsole .vc-logbox .vc-item .vc-fold .vc-fold-outer .vc-code-key {\n margin-left: 0;\n}\n#__vconsole .vc-logbox .vc-code-key {\n color: #905;\n}\n#__vconsole .vc-logbox .vc-code-private-key {\n color: #D391B5;\n}\n#__vconsole .vc-logbox .vc-code-function {\n color: #905;\n font-style: italic;\n}\n#__vconsole .vc-logbox .vc-code-number,\n#__vconsole .vc-logbox .vc-code-boolean {\n color: #0086B3;\n}\n#__vconsole .vc-logbox .vc-code-string {\n color: #183691;\n}\n#__vconsole .vc-logbox .vc-code-null,\n#__vconsole .vc-logbox .vc-code-undefined {\n color: #666;\n}\n#__vconsole .vc-logbox .vc-cmd {\n position: absolute;\n height: 3.07692308em;\n left: 0;\n right: 0;\n bottom: 0;\n border-top: 1px solid #D9D9D9;\n display: block!important;\n}\n#__vconsole .vc-logbox .vc-cmd .vc-cmd-input-wrap {\n display: block;\n height: 2.15384615em;\n margin-right: 3.07692308em;\n padding: 0.46153846em 0.61538462em;\n}\n#__vconsole .vc-logbox .vc-cmd .vc-cmd-input {\n width: 100%;\n border: none;\n resize: none;\n outline: none;\n padding: 0;\n font-size: 0.92307692em;\n}\n#__vconsole .vc-logbox .vc-cmd .vc-cmd-input::-webkit-input-placeholder {\n line-height: 2.15384615em;\n}\n#__vconsole .vc-logbox .vc-cmd .vc-cmd-btn {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n width: 3.07692308em;\n border: none;\n background-color: #EFEFF4;\n outline: none;\n -webkit-touch-callout: none;\n font-size: 1em;\n}\n#__vconsole .vc-logbox .vc-cmd .vc-cmd-btn:active {\n background-color: rgba(0, 0, 0, 0.15);\n}\n#__vconsole .vc-logbox .vc-cmd .vc-cmd-prompted {\n position: fixed;\n width: 100%;\n background-color: #FBF9FE;\n border: 1px solid #D9D9D9;\n overflow-x: scroll;\n display: none;\n}\n#__vconsole .vc-logbox .vc-cmd .vc-cmd-prompted li {\n list-style: none;\n line-height: 30px;\n padding: 0 0.46153846em;\n border-bottom: 1px solid #D9D9D9;\n}\n#__vconsole .vc-logbox .vc-group .vc-group-preview {\n -webkit-touch-callout: none;\n}\n#__vconsole .vc-logbox .vc-group .vc-group-preview:active {\n background-color: #E6E6E6;\n}\n#__vconsole .vc-logbox .vc-group .vc-group-detail {\n display: none;\n padding: 0 0 0.76923077em 1.53846154em;\n border-bottom: 1px solid #EEE;\n}\n#__vconsole .vc-logbox .vc-group.vc-actived .vc-group-detail {\n display: block;\n background-color: #FBF9FE;\n}\n#__vconsole .vc-logbox .vc-group.vc-actived .vc-table-row {\n background-color: #FFF;\n}\n#__vconsole .vc-logbox .vc-group.vc-actived .vc-group-preview {\n background-color: #FBF9FE;\n}\n#__vconsole .vc-logbox .vc-table .vc-table-row {\n display: flex;\n display: -webkit-flex;\n flex-direction: row;\n flex-wrap: wrap;\n -webkit-box-direction: row;\n -webkit-flex-wrap: wrap;\n overflow: hidden;\n border-bottom: 1px solid #EEE;\n}\n#__vconsole .vc-logbox .vc-table .vc-table-row.vc-left-border {\n border-left: 1px solid #EEE;\n}\n#__vconsole .vc-logbox .vc-table .vc-table-col {\n flex: 1;\n -webkit-box-flex: 1;\n padding: 0.23076923em 0.30769231em;\n border-left: 1px solid #EEE;\n overflow: auto;\n white-space: pre-wrap;\n word-break: break-word;\n /*white-space: nowrap;\n text-overflow: ellipsis;*/\n -webkit-overflow-scrolling: touch;\n}\n#__vconsole .vc-logbox .vc-table .vc-table-col:first-child {\n border: none;\n}\n#__vconsole .vc-logbox .vc-table .vc-small .vc-table-col {\n padding: 0 0.30769231em;\n font-size: 0.92307692em;\n}\n#__vconsole .vc-logbox .vc-table .vc-table-col-2 {\n flex: 2;\n -webkit-box-flex: 2;\n}\n#__vconsole .vc-logbox .vc-table .vc-table-col-3 {\n flex: 3;\n -webkit-box-flex: 3;\n}\n#__vconsole .vc-logbox .vc-table .vc-table-col-4 {\n flex: 4;\n -webkit-box-flex: 4;\n}\n#__vconsole .vc-logbox .vc-table .vc-table-col-5 {\n flex: 5;\n -webkit-box-flex: 5;\n}\n#__vconsole .vc-logbox .vc-table .vc-table-col-6 {\n flex: 6;\n -webkit-box-flex: 6;\n}\n#__vconsole .vc-logbox .vc-table .vc-table-row-error {\n border-color: #F4A0AB;\n background-color: #FFE4E1;\n}\n#__vconsole .vc-logbox .vc-table .vc-table-row-error .vc-table-col {\n color: #DC143C;\n border-color: #F4A0AB;\n}\n#__vconsole .vc-logbox .vc-table .vc-table-col-title {\n font-weight: bold;\n}\n#__vconsole .vc-logbox.vc-actived {\n display: block;\n}\n#__vconsole .vc-toolbar {\n border-top: 1px solid #D9D9D9;\n line-height: 3em;\n position: absolute;\n left: 0;\n right: 0;\n bottom: 0;\n display: flex;\n display: -webkit-box;\n flex-direction: row;\n -webkit-box-direction: row;\n}\n#__vconsole .vc-toolbar .vc-tool {\n display: none;\n text-decoration: none;\n color: #000;\n width: 50%;\n flex: 1;\n -webkit-box-flex: 1;\n text-align: center;\n position: relative;\n -webkit-touch-callout: none;\n}\n#__vconsole .vc-toolbar .vc-tool.vc-toggle,\n#__vconsole .vc-toolbar .vc-tool.vc-global-tool {\n display: block;\n}\n#__vconsole .vc-toolbar .vc-tool:active {\n background-color: rgba(0, 0, 0, 0.15);\n}\n#__vconsole .vc-toolbar .vc-tool:after {\n content: " ";\n position: absolute;\n top: 0.53846154em;\n bottom: 0.53846154em;\n right: 0;\n border-left: 1px solid #D9D9D9;\n}\n#__vconsole .vc-toolbar .vc-tool-last:after {\n border: none;\n}\n@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {\n #__vconsole .vc-toolbar,\n #__vconsole .vc-switch {\n bottom: constant(safe-area-inset-bottom);\n bottom: env(safe-area-inset-bottom);\n }\n}\n#__vconsole.vc-toggle .vc-switch {\n display: none;\n}\n#__vconsole.vc-toggle .vc-mask {\n background: rgba(0, 0, 0, 0.6);\n display: block;\n}\n#__vconsole.vc-toggle .vc-panel {\n -webkit-transform: translate(0, 0);\n transform: translate(0, 0);\n}\n',""])},function(e,t){e.exports='
\n
vConsole
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n Hide\n
\n
\n
'},function(e,t){e.exports='{{name}}'},function(e,t){e.exports='
\n \n
'},function(e,t){e.exports='{{name}}'},function(e,t){e.exports='{{name}}'},function(e,t){e.exports='
\n\t
\n
'},function(e,t){e.exports='
\n {{if (lineType == \'obj\')}}\n {{outer}}\n
\n {{else if (lineType == \'value\')}}\n {{value}}\n {{else if (lineType == \'kv\')}}\n {{key}}: {{value}}\n {{/if}}\n
'},function(e,t){e.exports='\n {{key}}: {{value}}\n'},function(module,exports,__webpack_require__){var __WEBPACK_AMD_DEFINE_FACTORY__,__WEBPACK_AMD_DEFINE_ARRAY__,__WEBPACK_AMD_DEFINE_RESULT__,factory;factory=function(_exports,_query,tool,_log,_tabbox_default,_item_code){"use strict";function _interopRequireWildcard(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var o in e)if(Object.prototype.hasOwnProperty.call(e,o)){var n=Object.defineProperty&&Object.getOwnPropertyDescriptor?Object.getOwnPropertyDescriptor(e,o):{};n.get||n.set?Object.defineProperty(t,o,n):t[o]=e[o]}return t.default=e,t}function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function _typeof(e){return(_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function _defineProperties(e,t){for(var o=0;o=0&&o.test(e[r]);r--)n.push(e[r]);if(0==n.length){o=/\./;for(var i=t-1;i>=0&&o.test(e[i]);i--)n.push(e[i])}if(0===n.length){var a=e.match(/[\(\)\[\]\{\}]/gi)||[];return a[a.length-1]}return n.reverse().join("")};_query.default.bind(_query.default.one(".vc-cmd-input"),"keyup",function(e){var isDeleteKeyCode=8===e.keyCode||46===e.keyCode,$prompted=_query.default.one(".vc-cmd-prompted");$prompted.style.display="none",$prompted.innerHTML="";var tempValue=this.value,value=retrievePrecedingIdentifier(this.value,this.value.length);if(value&&value.length>0){if(/\(/.test(value)&&!isDeleteKeyCode)return void(_query.default.one(".vc-cmd-input").value+=")");if(/\[/.test(value)&&!isDeleteKeyCode)return void(_query.default.one(".vc-cmd-input").value+="]");if(/\{/.test(value)&&!isDeleteKeyCode)return void(_query.default.one(".vc-cmd-input").value+="}");if("."===value){var key=retrievePrecedingIdentifier(tempValue,tempValue.length-1);if(!cacheObj[key])try{cacheObj[key]=Object.getOwnPropertyNames(eval("("+key+")")).sort()}catch(e){}try{for(var _i3=0;_i3=0){var _$li=document.createElement("li");_$li.innerHTML=winKeys[_i4],_$li.onclick=function(){_query.default.one(".vc-cmd-input").value="",_query.default.one(".vc-cmd-input").value=this.innerHTML,"function"==keyTypes[this.innerHTML]&&(_query.default.one(".vc-cmd-input").value+="()"),$prompted.style.display="none"},$prompted.appendChild(_$li)}}else{var arr=value.split(".");if(cacheObj[arr[0]]){cacheObj[arr[0]].sort();for(var _i5=0;_i5=0&&(_$li2.innerHTML=_key3,_$li2.onclick=function(){_query.default.one(".vc-cmd-input").value="",_query.default.one(".vc-cmd-input").value=tempValue+this.innerHTML,$prompted.style.display="none"},$prompted.appendChild(_$li2))}}}if($prompted.children.length>0){var m=Math.min(200,31*$prompted.children.length);$prompted.style.display="block",$prompted.style.height=m+"px",$prompted.style.marginTop=-m+"px"}}else $prompted.style.display="none"}),_query.default.bind(_query.default.one(".vc-cmd",this.$tabbox),"submit",function(e){e.preventDefault();var t=_query.default.one(".vc-cmd-input",e.target),o=t.value;t.value="",""!==o&&that.evalCommand(o);var n=_query.default.one(".vc-cmd-prompted");n&&(n.style.display="none")});var code="";code+="if (!!window) {",code+="window.__vConsole_cmd_result = undefined;",code+="window.__vConsole_cmd_error = false;",code+="}";var scriptList=document.getElementsByTagName("script"),nonce="";scriptList.length>0&&(nonce=scriptList[0].nonce||"");var script=document.createElement("SCRIPT");script.innerHTML=code,script.setAttribute("nonce",nonce),document.documentElement.appendChild(script),document.documentElement.removeChild(script)}},{key:"mockConsole",value:function(){_get(_getPrototypeOf(VConsoleDefaultTab.prototype),"mockConsole",this).call(this);var e=this;tool.isFunction(window.onerror)&&(this.windowOnError=window.onerror),window.onerror=function(t,o,n,r,i){var a=t;o&&(a+="\n"+o.replace(location.origin,"")),(n||r)&&(a+=":"+n+":"+r);var l=!!i&&!!i.stack&&i.stack.toString()||"";e.printLog({logType:"error",logs:[a,l],noOrigin:!0}),tool.isFunction(e.windowOnError)&&e.windowOnError.call(window,t,o,n,r,i)}}},{key:"evalCommand",value:function(e){this.printLog({logType:"log",content:_query.default.render(_item_code.default,{content:e,type:"input"}),style:""});var t,o=void 0;try{o=eval.call(window,"("+e+")")}catch(t){try{o=eval.call(window,e)}catch(e){}}tool.isArray(o)||tool.isObject(o)?t=this.getFoldedLine(o):(tool.isNull(o)?o="null":tool.isUndefined(o)?o="undefined":tool.isFunction(o)?o="function()":tool.isString(o)&&(o='"'+o+'"'),t=_query.default.render(_item_code.default,{content:o,type:"output"})),this.printLog({logType:"log",content:t,style:""}),window.winKeys=Object.getOwnPropertyNames(window).sort()}}]),VConsoleDefaultTab}(_log.default),_default=VConsoleDefaultTab;_exports.default=_default,module.exports=exports.default},__WEBPACK_AMD_DEFINE_ARRAY__=[exports,__webpack_require__(1),__webpack_require__(0),__webpack_require__(3),__webpack_require__(22),__webpack_require__(23)],void 0===(__WEBPACK_AMD_DEFINE_RESULT__="function"==typeof(__WEBPACK_AMD_DEFINE_FACTORY__=factory)?__WEBPACK_AMD_DEFINE_FACTORY__.apply(exports,__WEBPACK_AMD_DEFINE_ARRAY__):__WEBPACK_AMD_DEFINE_FACTORY__)||(module.exports=__WEBPACK_AMD_DEFINE_RESULT__)},function(e,t){e.exports='
\n
\n
\n \n
    \n
    \n \n
    \n
    \n
    '},function(e,t){e.exports='
    {{content}}
    '},function(e,t,o){var n,r,i;r=[t,o(3),o(25)],void 0===(i="function"==typeof(n=function(o,n,r){"use strict";function i(e){return e&&e.__esModule?e:{default:e}}function a(e){return(a="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function l(e,t){for(var o=0;o\n
    \n'},function(e,t,o){var n,r,i;r=[t,o(1),o(0),o(2),o(27),o(28),o(29)],void 0===(i="function"==typeof(n=function(o,n,r,i,a,l,c){"use strict";function s(e){return e&&e.__esModule?e:{default:e}}function d(e){return(d="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function u(e,t){for(var o=0;o=t.scrollHeight?e.isInBottom=!0:e.isInBottom=!1)}),e.reqList)e.updateRequest(o,{})}},{key:"onRemove",value:function(){window.XMLHttpRequest&&(window.XMLHttpRequest.prototype.open=this._open,window.XMLHttpRequest.prototype.send=this._send,this._open=void 0,this._send=void 0)}},{key:"onShow",value:function(){this.isShow=!0,1==this.isInBottom&&this.scrollToBottom()}},{key:"onHide",value:function(){this.isShow=!1}},{key:"onShowConsole",value:function(){1==this.isInBottom&&this.scrollToBottom()}},{key:"scrollToBottom",value:function(){var e=n.default.one(".vc-content");e.scrollTop=e.scrollHeight-e.offsetHeight}},{key:"clearLog",value:function(){for(var e in this.reqList={},this.domList)this.domList[e].parentNode.removeChild(this.domList[e]),this.domList[e]=void 0;this.domList={},this.renderHeader()}},{key:"renderHeader",value:function(){var e=Object.keys(this.reqList).length,t=n.default.render(l.default,{count:e}),o=n.default.one(".vc-log",this.$tabbox);this.$header?this.$header.parentNode.replaceChild(t,this.$header):o.parentNode.insertBefore(t,o),this.$header=t}},{key:"updateRequest",value:function(e,t){var o=Object.keys(this.reqList).length,i=this.reqList[e]||{};for(var a in t)i[a]=t[a];if(this.reqList[e]=i,this.isReady){var l={id:e,url:i.url,status:i.status,method:i.method||"-",costTime:i.costTime>0?i.costTime+"ms":"-",header:i.header||null,getData:i.getData||null,postData:i.postData||null,response:null,actived:!!i.actived};switch(i.responseType){case"":case"text":if(r.isString(i.response))try{l.response=JSON.parse(i.response),l.response=JSON.stringify(l.response,null,1),l.response=r.htmlEncode(l.response)}catch(e){l.response=r.htmlEncode(i.response)}else void 0!==i.response&&(l.response=Object.prototype.toString.call(i.response));break;case"json":void 0!==i.response&&(l.response=JSON.stringify(i.response,null,1),l.response=r.htmlEncode(l.response));break;case"blob":case"document":case"arraybuffer":default:void 0!==i.response&&(l.response=Object.prototype.toString.call(i.response))}0==i.readyState||1==i.readyState?l.status="Pending":2==i.readyState||3==i.readyState?l.status="Loading":4==i.readyState||(l.status="Unknown");var s=n.default.render(c.default,l),d=this.domList[e];i.status>=400&&n.default.addClass(n.default.one(".vc-group-preview",s),"vc-table-row-error"),d?d.parentNode.replaceChild(s,d):n.default.one(".vc-log",this.$tabbox).insertAdjacentElement("beforeend",s),this.domList[e]=s,Object.keys(this.reqList).length!=o&&this.renderHeader(),this.isInBottom&&this.scrollToBottom()}}},{key:"mockAjax",value:function(){if(window.XMLHttpRequest){var e=this,t=window.XMLHttpRequest.prototype.open,o=window.XMLHttpRequest.prototype.send;e._open=t,e._send=o,window.XMLHttpRequest.prototype.open=function(){var o=this,n=[].slice.call(arguments),r=n[0],i=n[1],a=e.getUniqueID(),l=null;o._requestID=a,o._method=r,o._url=i;var c=o.onreadystatechange||function(){},s=function(){var t=e.reqList[a]||{};if(t.readyState=o.readyState,t.status=0,o.readyState>1&&(t.status=o.status),t.responseType=o.responseType,0==o.readyState)t.startTime||(t.startTime=+new Date);else if(1==o.readyState)t.startTime||(t.startTime=+new Date);else if(2==o.readyState){t.header={};for(var n=o.getAllResponseHeaders()||"",r=n.split("\n"),i=0;i0){a.getData={},l=(l=l.join("?")).split("&");var c=!0,s=!1,d=void 0;try{for(var u,v=l[Symbol.iterator]();!(c=(u=v.next()).done);c=!0){var f=u.value;f=f.split("="),a.getData[f[0]]=decodeURIComponent(f[1])}}catch(e){s=!0,d=e}finally{try{c||null==v.return||v.return()}finally{if(s)throw d}}}if("POST"==a.method)if(r.isString(i)){var p=i.split("&");a.postData={};var b=!0,g=!1,h=void 0;try{for(var m,y=p[Symbol.iterator]();!(b=(m=y.next()).done);b=!0){var _=m.value;_=_.split("="),a.postData[_[0]]=_[1]}}catch(e){g=!0,h=e}finally{try{b||null==y.return||y.return()}finally{if(g)throw h}}}else r.isPlainObject(i)&&(a.postData=i);return t._noVConsole||e.updateRequest(t._requestID,a),o.apply(t,n)}}}},{key:"getUniqueID",value:function(){return"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,function(e){var t=16*Math.random()|0;return("x"==e?t:3&t|8).toString(16)})}}])&&u(o.prototype,s),d&&u(o,d),t}();o.default=b,e.exports=t.default})?n.apply(t,r):n)||(e.exports=i)},function(e,t){e.exports='
    \n
    \n
    '},function(e,t){e.exports='
    \n
    Name {{if (count > 0)}}({{count}}){{/if}}
    \n
    Method
    \n
    Status
    \n
    Time
    \n
    '},function(e,t){e.exports='
    \n
    \n
    {{url}}
    \n
    {{method}}
    \n
    {{status}}
    \n
    {{costTime}}
    \n
    \n
    \n {{if (header !== null)}}\n
    \n
    \n
    Headers
    \n
    \n {{for (var key in header)}}\n
    \n
    {{key}}
    \n
    {{header[key]}}
    \n
    \n {{/for}}\n
    \n {{/if}}\n {{if (getData !== null)}}\n
    \n
    \n
    Query String Parameters
    \n
    \n {{for (var key in getData)}}\n
    \n
    {{key}}
    \n
    {{getData[key]}}
    \n
    \n {{/for}}\n
    \n {{/if}}\n {{if (postData !== null)}}\n
    \n
    \n
    Form Data
    \n
    \n {{for (var key in postData)}}\n
    \n
    {{key}}
    \n
    {{postData[key]}}
    \n
    \n {{/for}}\n
    \n {{/if}}\n
    \n
    \n
    Response
    \n
    \n
    \n 
    {{response || \'\'}}
    \n
    \n
    \n
    \n
    '},function(e,t,o){var n,r,i;r=[t,o(31),o(2),o(33),o(34),o(0),o(1)],void 0===(i="function"==typeof(n=function(o,n,r,i,a,l,c){"use strict";function s(e){return e&&e.__esModule?e:{default:e}}function d(e){return(d="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function u(e,t){for(var o=0;o0&&this.onChildRemove(e),e.addedNodes.length>0&&this.onChildAdd(e);break;case"attributes":this.onAttributesChange(e);break;case"characterData":this.onCharacterDataChange(e)}}},{key:"onChildRemove",value:function(e){var t=e.target;if(t.__vconsole_node){for(var o=0;o0||(e.childNodes[r]?n.renderView(e.childNodes[r],a,"replace"):a.style.display="none"))}}}),o){case"replace":t.parentNode.replaceChild(r,t);break;case"insertBefore":t.parentNode.insertBefore(r,t);break;default:t.appendChild(r)}return r}},{key:"getNode",value:function(e){if(!this._isIgnoredElement(e)){var t=e.__vconsole_node||{};if(t.nodeType=e.nodeType,t.nodeName=e.nodeName,t.tagName=e.tagName||"",t.textContent="",t.nodeType!=e.TEXT_NODE&&t.nodeType!=e.DOCUMENT_TYPE_NODE||(t.textContent=e.textContent),t.id=e.id||"",t.className=e.className||"",t.attributes=[],e.hasAttributes&&e.hasAttributes())for(var o=0;o0)for(var n=0;n .vcelm-node {\n display: block;\n}\n.vcelm-l .vcelm-node:active {\n background-color: rgba(0, 0, 0, 0.15);\n}\n.vcelm-l.vcelm-noc .vcelm-node:active {\n background-color: transparent;\n}\n.vcelm-t {\n white-space: pre-wrap;\n word-wrap: break-word;\n}\n/* level */\n.vcelm-l .vcelm-l {\n display: none;\n}\n.vcelm-l.vc-toggle > .vcelm-l {\n margin-left: 4px;\n display: block;\n}\n/* arrow */\n.vcelm-l:before {\n content: "";\n display: block;\n position: absolute;\n top: 6px;\n left: 3px;\n width: 0;\n height: 0;\n border: transparent solid 3px;\n border-left-color: #000;\n}\n.vcelm-l.vc-toggle:before {\n display: block;\n top: 6px;\n left: 0;\n border-top-color: #000;\n border-left-color: transparent;\n}\n.vcelm-l.vcelm-noc:before {\n display: none;\n}\n',""])},function(e,t){e.exports='
    \n
    \n
    '},function(e,t,o){var n,r,i;r=[t,o(35),o(36),o(0),o(1)],void 0===(i="function"==typeof(n=function(o,n,r,i,a){"use strict";function l(e){return e&&e.__esModule?e:{default:e}}function c(e,t){for(var o=0;o-1),l=i;0==e.childNodes.length&&(l=!0);var c=a.default.render(n.default,{node:e}),s=a.default.render(r.default,{node:e});if(l)a.default.addClass(t,"vcelm-noc"),t.appendChild(c),i||t.appendChild(s);else{t.appendChild(c);for(var d=0;d<{{node.tagName.toLowerCase()}}{{if (node.className || node.attributes.length)}}\n \n {{for (var i = 0; i < node.attributes.length; i++)}}\n {{if (node.attributes[i].value !== \'\')}}\n {{node.attributes[i].name}}="{{node.attributes[i].value}}"{{else}}\n {{node.attributes[i].name}}{{/if}}{{/for}}{{/if}}>    '},function(e,t){e.exports='</{{node.tagName.toLowerCase()}}>'},function(e,t,o){var n,r,i;r=[t,o(2),o(38),o(39),o(0),o(1)],void 0===(i="function"==typeof(n=function(o,n,r,i,a,l){"use strict";function c(e){return e&&e.__esModule?e:{default:e}}function s(e){return(s="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function d(e,t){for(var o=0;o\n
    \n'},function(e,t){e.exports='
    \n
    \n
    Name
    \n
    Value
    \n
    \n {{for (var i = 0; i < list.length; i++)}}\n
    \n
    {{list[i].name}}
    \n
    {{list[i].value}}
    \n
    \n {{/for}}\n
    '}])}); -------------------------------------------------------------------------------- /demos/requireJs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 7 | 11 | 12 | 13 |
    14 | 15 |
    16 | 17 | 25 | 58 | 59 | -------------------------------------------------------------------------------- /demos/sprite/c1l1frame.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wenyiweb/canvasKeyFrames/621808c041e4f0289e11178f307befc9ddfc1261/demos/sprite/c1l1frame.jpg -------------------------------------------------------------------------------- /demos/sprite/img/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wenyiweb/canvasKeyFrames/621808c041e4f0289e11178f307befc9ddfc1261/demos/sprite/img/1.png -------------------------------------------------------------------------------- /demos/sprite/img/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wenyiweb/canvasKeyFrames/621808c041e4f0289e11178f307befc9ddfc1261/demos/sprite/img/2.png -------------------------------------------------------------------------------- /demos/sprite/imgs/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wenyiweb/canvasKeyFrames/621808c041e4f0289e11178f307befc9ddfc1261/demos/sprite/imgs/1.jpg -------------------------------------------------------------------------------- /demos/sprite/index-ratio1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 7 | 11 | 12 | 13 |
    14 | 15 |
    16 | 17 | 18 | 48 | 49 | -------------------------------------------------------------------------------- /demos/sprite/index-ratio2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 7 | 11 | 12 | 13 |
    14 | 15 |
    16 | 17 | 18 | 48 | 49 | -------------------------------------------------------------------------------- /demos/sprite/index-sprite.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 7 | 11 | 12 | 13 |
    14 | 15 |
    16 | 17 | 18 | 48 | 49 | -------------------------------------------------------------------------------- /dist/canvas-keyframes.min.js: -------------------------------------------------------------------------------- 1 | !function(){"use strict";function t(t,i,s,o){if(!t||!s)throw new Error("el和imgs是必填参数");if("array"!==i&&"sprite"!==i)throw new Error('只支持"array"和"sprite"模式');this.el=t,this.mode=i,this.imgs=s,this.imgsLen=null,this.canvas=null,this.ctx=null,this.timer=null,this.state="stop",this.infinite=1e9,this.ispause=!1,this.plusNum=0,this.plusCount=0;var e={cover:this.count=0,fps:24,loop:"infinite",ratio:1};this.options=o||e,this.options.cover=o.cover||e.cover,this.options.fps=o.fps||e.fps,this.options.loop=o.loop||e.loop,this.options.ratio=o.ratio||e.ratio,this.recordFrom=0,this.recordTo=null,this.recordInf=this.options.loop,function(t){if(function(t){var i=document.createElement("canvas");i.width=2*t.options.width||t.el.clientWidth,i.height=2*t.options.height||t.el.clientHeight,i.style.display="block",i.style.width="100%",i.style.height="100%",t.ctx=i.getContext("2d"),t.el.appendChild(i),t.canvas=i}(t),"array"===t.mode)t.imgsLen=t.imgs.length;else if("sprite"===t.mode){t.wt=t.imgs.width/t.options._iw,t.ht=t.imgs.height/t.options._ih;for(var i=[],s=0;s=this.imgsLen?0:this.count+1;this.goto(t)},prev:function(){var t=this.count-1<=0?this.imgsLen-1:this.count-1;this.goto(t)},fromTo:function(t,i,s,o){var e=this;clearInterval(this.timer);function n(){if(!e.ispause)return e.plusNum<=e.plusCount?(clearInterval(e.timer),e.timer=null,e.plusNum=0,e.plusCount=0,e.state="stop",void(o&&o())):(i 50 | 51 | ``` 52 | 53 | * npm 54 | 55 | ```bash 56 | npm i canvaskeyframes 57 | ``` 58 | 59 | your app.js 60 | 61 | ```javascript 62 | 63 | import CanvasKeyFrames from 'canvaskeyframes' 64 | 65 | ``` 66 | 67 | 68 | ### 方法介绍 69 | 70 | ##### goto(n) 跳转到某一帧 71 | ##### next() 下一帧 72 | ##### prev() 上一帧 73 | ##### fromTo(from, to, loop, callback) 74 | ` 75 | from [启始帧（从0开始）] 76 | to [结束帧数] 77 | loop [循环次数，默认是infiniten] 78 | callback [回调函数] 79 | ` 80 | ##### toFrom(to, from, loop, callback) 81 | ` 82 | to [启始帧（从高位开始）] 83 | from [结束帧数（从低位结束）] 84 | loop [循环次数，默认是infiniten] 85 | callback [回调函数] 86 | ` 87 | ##### repeatplay(from, to, loop, callback) 88 | ` 89 | fromto正着播一遍,然后回调fromBack,倒着播一遍，然后再回调toBack,进行逻辑判断 90 | from [启始帧（从0开始）] 91 | to [结束帧数] 92 | loop [循环次数，默认是infinite正播过去，再倒播回来] 93 | callback [回调函数] 94 | ` 95 | ##### from(from, loop, callback) 96 | ` 97 | from [启始帧（从0开始）] 98 | loop [循环次数，默认是infinite] 99 | callback [回调函数] 100 | ` 101 | ##### to(to, loop, callback) 102 | ` 103 | to [结束帧数] 104 | loop [循环次数，默认是infinite] 105 | callback [回调函数] 106 | ` 107 | ##### pause() 暂停动画 108 | ##### stop() 停止并回到第一帧或cover帧 109 | ##### play() 从当前位置播放动画，会继承上次使用fromTo、form或to的属性 110 | ##### destroy() 销毁对象 111 | 112 | ## 前端学习交流群，QQ群 : 692337464 113 | ## ![](https://github.com/wenyiweb/vuejs-fujun/blob/master/static/imgs/qq.png) 114 | 115 | ## 觉得有用，请我喝杯咖啡吧~ 116 | ## ![](/static/wx.jpg) 117 | 118 | ## License 119 | 120 | [MIT License](http://en.wikipedia.org/wiki/MIT_License) 121 | 122 | 123 | 124 | [travis-image]: https://api.travis-ci.org/wenyiweb/canvasKeyFrames.svg?branch=master 125 | [travis-url]: https://travis-ci.org/wenyiweb/canvasKeyFrames 126 | 127 | [npm-image]: https://img.shields.io/npm/v/canvaskeyframes.svg?style=flat-square 128 | [npm-url]: https://www.npmjs.com/package/canvaskeyframes 129 | -------------------------------------------------------------------------------- /readeMe_EN.md: -------------------------------------------------------------------------------- 1 | # CanvasKeyFrames - The simplest sequence frame animation plugin of canvas![npm][npm-image]][npm-url] [![Build Status][travis-image]][travis-url] 2 | 3 | [中文版](./readeMe.md) 4 | 5 | # CanvasKeyFrames 6 | 7 | The simplest sequence frame animation plugin of canvas,Manipulating picture animation with canvas, encapsulating common methods. 8 | 9 | 10 | * el [canvas container,must be a DOM object] 11 | * type [picture mode，'array' and 'sprite'，Array is an array of picture objects, sprite is based on the width of the single sprite] 12 | * imgs [Image frame object array or single image, corresponding to different modes] 13 | * options {\ 14 | cover: 10, //Specify the cover frame, default is 0 \ 15 | fps: 30, //default is24\ 16 | loop: 10 //Initialize the default number of loops, can be set in the formTo, the default is infinite\ 17 | width: 300, //Note that hidden elements can't get the width, so in special cases you need to specify the width\ 18 | height: 300,\ 19 | _iw: 300, // The width of a single image in a sprite\ 20 | _ih: 300, // The height of a single image in a sprite\ 21 | framesCount: 10 // Sprite frame number\ 22 | } 23 | 24 | ## API 25 | 26 | ### CanvasKeyFrames(el, type, imgs, options) 27 | 28 | - `el` canvas container,must be a DOM object 29 | - `type` picture mode，'array' and 'sprite'，Array is an array of picture objects, sprite is based on the width of the single sprite 30 | - `imgs` Image frame object array or single image, corresponding to different modes 31 | - `options` 32 | - `cover` Specify the cover frame, default is 0 33 | - `fps` default is 24 34 | - `loop` Initialize the default number of loops, can be set in the formTo, the default is infinite 35 | - `width` Note that hidden elements can't get the width, so in special cases you need to specify the width 36 | - `height` Note that hidden elements can't get the width, so in special cases you need to specify the width 37 | - `_iw` The width of a single image in a sprite 38 | - `_ih` The height of a single image in a sprite 39 | - `framesCount` Sprite frame number 40 | 41 | ### Install 42 | 43 | * base 44 | 45 | your html 46 | 47 | ```html 48 | 49 | 50 | ``` 51 | 52 | * npm 53 | 54 | ```bash 55 | npm i canvaskeyframes 56 | ``` 57 | 58 | your app.js 59 | 60 | ```javascript 61 | 62 | import CanvasKeyFrames from 'canvaskeyframes' 63 | 64 | ``` 65 | 66 | 67 | ### Method introduction 68 | 69 | ##### goto(n) Jump to a frame 70 | ##### next() goto the next frame 71 | ##### prev() goto the prev frame 72 | ##### fromTo(from, to, loop, callback) 73 | ` 74 | from [the start frame. default is 0] 75 | to [the end frame] 76 | loop [The number of loops, the default is infinite] 77 | callback [callback] 78 | ` 79 | ##### toFrom(to, from, loop, callback) 80 | ` 81 | to [the start frame (start from high position)] 82 | from [the end frame number (end from low position)] 83 | loop [The number of loops, the default is infinite] 84 | callback [callback] 85 | ` 86 | ##### repeatplay(from, to, loop, callback) 87 | ` 88 | fromto Play it again, then call back fromBack, broadcast it backwards, and then callback toBack to make a logical judgment 89 | from [the start frame. default is 0] 90 | to [the end frame] 91 | loop [The number of loops, the default is infinite. play direction: start->end->start...] 92 | callback [callback] 93 | ` 94 | ##### from(from, loop, callback) 95 | ` 96 | from [the start frame. default is 0] 97 | loop [The number of loops, the default is infinite.] 98 | callback [callback] 99 | ` 100 | ##### to(to, loop, callback) 101 | ` 102 | to [end frame] 103 | loop [The number of loops, the default is infinite.] 104 | callback [callback] 105 | ` 106 | ##### pause() pause animation 107 | ##### stop() stop animation and goto the first frame 108 | ##### play() play from current frame, and will inherit the last attribute fromTo、from、to 109 | ##### destroy() destroy the instance 110 | 111 | 112 | ## License 113 | 114 | [MIT License](http://en.wikipedia.org/wiki/MIT_License) 115 | 116 | 117 | 118 | [travis-image]: https://api.travis-ci.org/wenyiweb/canvasKeyFrames.svg?branch=master 119 | [travis-url]: https://travis-ci.org/wenyiweb/canvasKeyFrames 120 | 121 | [npm-image]: https://img.shields.io/npm/v/canvaskeyframes.svg?style=flat-square 122 | [npm-url]: https://www.npmjs.com/package/canvaskeyframes 123 | -------------------------------------------------------------------------------- /script.sh: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | git filter-branch --env-filter ' 3 | OLD_EMAIL="kevin.yang@all-dream.com" 4 | CORRECT_NAME="wenyiweb" 5 | CORRECT_EMAIL="yangwenyi0@126.com" 6 | if [ "$GIT_COMMITTER_EMAIL" = "$OLD_EMAIL" ] 7 | then 8 | export GIT_COMMITTER_NAME="$CORRECT_NAME" 9 | export GIT_COMMITTER_EMAIL="$CORRECT_EMAIL" 10 | fi 11 | if [ "$GIT_AUTHOR_EMAIL" = "$OLD_EMAIL" ] 12 | then 13 | export GIT_AUTHOR_NAME="$CORRECT_NAME" 14 | export GIT_AUTHOR_EMAIL="$CORRECT_EMAIL" 15 | fi 16 | ' --tag-name-filter cat -- --branches --tags -------------------------------------------------------------------------------- /src/canvas-keyframes.js: -------------------------------------------------------------------------------- 1 | ;(function() { 2 | 'use strict'; 3 | /** 4 | * [CanvasKeyFrames 序列帧播放工具] 5 | * el [canvas容器,必须是DOM对象] 6 | * type [图片模式，'array'和 'sprite'模式，array是图片对象数组，sprite是基于宽度扩展的单张雪碧图] 7 | * imgs [图片帧对象数组或单图，对应不同模式] 8 | * options { 9 | cover: 10, //指定封面帧，默认是0 10 | fps: 30, //默认是24 11 | loop: 10 //初始化默认的循环数，在formTo中可以设置，默认是infinite, 12 | ratio: 2 //雪碧图模式才需要，图片的高清比例，与@2x相似，默认是2，低清模式是1, 13 | width: 300, //注意，隐藏元素是拿不到宽度的，所以特殊情况下需要指定宽度 14 | height: 300, 15 | _iw: 300, // 雪碧图中单个图片的宽度 16 | _ih: 300, // 雪碧图中单个图片的高度 17 | framesCount: 14 // 雪碧图帧数 18 | } 19 | */ 20 | function CanvasKeyFrames(el, type, imgs, options) { 21 | if (!el || !imgs) { 22 | throw new Error('el和imgs是必填参数') 23 | } 24 | 25 | if (type !== 'array' && type !== 'sprite') { 26 | throw new Error('只支持"array"和"sprite"模式') 27 | } 28 | this.el = el; 29 | this.mode = type; //模式 30 | this.imgs = imgs; 31 | this.imgsLen = null; 32 | this.canvas = null; 33 | this.ctx = null; 34 | this.timer = null; //定时器 35 | this.state = 'stop'; 36 | this.infinite = 1000000000; 37 | 38 | this.ispause = false; 39 | // 帧总量 40 | this.plusNum = 0; 41 | // 帧总量计数器 42 | this.plusCount = 0; 43 | this.count = 0; 44 | 45 | var defaultoptions = { 46 | cover: 0, 47 | fps: 24, 48 | loop: 'infinite', 49 | ratio: 1 50 | } 51 | this.options = options || defaultoptions; 52 | this.options.cover = options.cover || defaultoptions.cover; 53 | this.options.fps = options.fps || defaultoptions.fps; 54 | this.options.loop = options.loop || defaultoptions.loop; 55 | // 图片分辨比例，与@2x的概念相似，只有sprite需要该选项，默认为2 56 | this.options.ratio = options.ratio || defaultoptions.ratio; 57 | 58 | //记录起始帧 59 | this.recordFrom = 0; 60 | //记录结束帧 61 | this.recordTo = null; 62 | //记录循环方式 63 | this.recordInf = this.options.loop; 64 | init(this); 65 | } 66 | /** 67 | * 初始化 68 | */ 69 | function init(self) { 70 | createCanvas(self); 71 | if (self.mode === 'array') { 72 | self.imgsLen = self.imgs.length; 73 | } else if (self.mode === 'sprite') { 74 | //计算雪碧图数量 75 | self.wt = self.imgs.width / self.options._iw; 76 | self.ht = self.imgs.height / self.options._ih; 77 | var spriteArray = []; 78 | // 手动生成雪碧图坐标 一维数组 79 | for (var j=0;j= this.imgsLen ? 0 : this.count + 1; 153 | this.goto(n); 154 | }, 155 | /** 156 | * 上一帧 157 | */ 158 | prev: function() { 159 | var n = this.count - 1 <= 0 ? this.imgsLen - 1 : this.count - 1; 160 | this.goto(n); 161 | }, 162 | /** 163 | * @param {[type]} from [启始帧（从0开始）] 164 | * @param {[type]} to [结束帧数] 165 | * @param {[type]} loop [循环次数，默认是infiniten] 166 | * @param {Function} callback [description] 167 | */ 168 | fromTo: function(from, to, loop, callback) { 169 | var self = this; 170 | //先清除上次未执行完的动画 171 | clearInterval(this.timer); 172 | var keyCount = from; 173 | var timeFn = function timeFn() { 174 | if (self.ispause) { 175 | return; 176 | } 177 | 178 | //当总量计数器达到帧总量的时候退出 179 | if (self.plusNum <= self.plusCount) { 180 | clearInterval(self.timer); 181 | //还原状态 182 | self.timer = null; 183 | self.plusNum = 0; 184 | self.plusCount = 0; 185 | self.state = 'stop'; 186 | callback && callback(); 187 | return; 188 | } else { //未达到，继续循环 189 | //一次循环结束，重置keyCount为from 190 | if (keyCount > to) { 191 | keyCount = from; 192 | } 193 | self.goto(keyCount); 194 | //帧计数器 195 | keyCount++; 196 | //总量计数器 197 | self.plusCount++; 198 | } 199 | }; 200 | 201 | //总量计数器 202 | this.plusCount = 0; 203 | this.state = 'play'; 204 | loop = !loop || loop === 'infinite' ? this.infinite : loop; 205 | 206 | //帧总量 帧数*循环次数 207 | this.plusNum = (to - from + 1) * loop; 208 | this.ispause = false; 209 | 210 | this.recordFrom = from; 211 | this.recordTo = to; 212 | this.recordInf = loop; 213 | 214 | timeFn(); 215 | this.timer = setInterval(timeFn, 1000 / this.options.fps); 216 | }, 217 | /** 218 | * @param {[type]} to [启始帧（从高位开始）] 219 | * @param {[type]} from [结束帧数（从低位结束）] 220 | * @param {[type]} loop [循环次数，默认是infiniten] 221 | * @param {Function} callback [description] 222 | */ 223 | toFrom: function(to, from, loop, callback) { 224 | var self = this; 225 | 226 | //先清除上次未执行完的动画 227 | clearInterval(this.timer); 228 | var keyCount = to; 229 | var timeFn = function timeFn() { 230 | if (self.ispause) { 231 | return; 232 | } 233 | 234 | //当总量计数器达到帧总量的时候退出 235 | if (self.plusNum <= self.plusCount) { 236 | clearInterval(self.timer); 237 | //还原状态 238 | self.timer = null; 239 | self.plusNum = 0; 240 | self.plusCount = 0; 241 | self.state = 'stop'; 242 | callback && callback(); 243 | return; 244 | } else { //未达到，继续循环 245 | 246 | //一次循环结束，重置keyCount为to 247 | if (keyCount < from) { 248 | keyCount = to; 249 | } 250 | self.goto(keyCount); 251 | //帧计数器 252 | keyCount--; 253 | //总量计数器 254 | self.plusCount++; 255 | } 256 | }; 257 | 258 | //总量计数器 259 | this.plusCount = 0; 260 | this.state = 'play'; 261 | loop = !loop || loop === 'infinite' ? this.infinite : loop; 262 | 263 | //帧总量 帧数*循环次数 264 | this.plusNum = (to - from + 1) * loop; 265 | this.ispause = false; 266 | 267 | this.recordFrom = from; 268 | this.recordTo = to; 269 | this.recordInf = loop; 270 | 271 | timeFn(); 272 | this.timer = setInterval(timeFn, 1000 / this.options.fps); 273 | }, 274 | /** 275 | * fromto正着播一遍,然后回调fromBack,倒着播一遍，然后再回调toBack,进行逻辑判断 276 | * @param {[type]} from [启始帧（从0开始）] 277 | * @param {[type]} to [结束帧数] 278 | * @param {[type]} loop [循环次数，默认是infinite正播过去，再倒播回来] 279 | * @param {Function} callback [description] 280 | 281 | */ 282 | repeatplay: function(from, to, loop, callback) { 283 | var self = this; 284 | var count = 0; 285 | 286 | loop = !loop || loop === 'infinite' ? this.infinite : loop; 287 | 288 | var toBack = function toBack() { 289 | count++; 290 | if (count === loop) { 291 | callback && callback(); 292 | } else { 293 | self.fromTo(from, to, 1, fromBack); 294 | } 295 | }; 296 | 297 | var fromBack = function fromBack() { 298 | self.toFrom(to, from, 1, toBack); 299 | } 300 | 301 | this.fromTo(from, to, 1, fromBack); 302 | }, 303 | /** 304 | * @param {[type]} from [启始帧（从0开始）] 305 | * @param {[type]} loop [循环次数，默认是infinite] 306 | * @param {Function} callback [description] 307 | * @return {[type]} [description] 308 | */ 309 | from: function(from, loop, callback) { 310 | //计算结束帧 311 | var to = this.imgsLen - 1; 312 | this.fromTo(from, to, loop, callback); 313 | }, 314 | /** 315 | * @param {[type]} to [结束帧数] 316 | * @param {[type]} loop [循环次数，默认是infinite] 317 | * @param {Function} callback [description] 318 | * @return {[type]} [description] 319 | */ 320 | to: function(to, loop, callback) { 321 | //默认起始帧是0 322 | var from = 0; 323 | this.fromTo(from, to, loop, callback); 324 | }, 325 | /** 326 | * 暂停动画 327 | * @return {[type]} [description] 328 | */ 329 | pause: function() { 330 | this.ispause = true; 331 | this.state = 'stop'; 332 | }, 333 | /** 334 | * 停止并回到第一帧或cover帧 335 | */ 336 | stop: function() { 337 | clearInterval(this.timer); 338 | this.state = 'stop'; 339 | this.plusNum = 0; 340 | this.plusCount = 0; 341 | this.ispause = false; 342 | //重置记录 343 | this.recordFrom = 0; 344 | this.recordTo = this.imgsLen - 1; 345 | this.recordInf = this.options.loop; 346 | 347 | //初始状态的封面帧 348 | drawImg(this, this.options.cover); 349 | }, 350 | /** 351 | * 从当前位置播放动画，会继承上次使用fromTo、form或to的属性 352 | */ 353 | play: function(callback) { 354 | if (this.state === 'play') { 355 | return; 356 | } 357 | if (!this.ispause) { 358 | this.fromTo(this.recordFrom, this.recordTo, this.recordInf, callback) 359 | } else { 360 | this.ispause = false; 361 | } 362 | }, 363 | /** 364 | * 销毁对象 365 | */ 366 | destroy: function() { 367 | clearInterval(this.timer); 368 | this.timer = null; 369 | this.ctx = null; 370 | this.canvas.remove(); 371 | this.canvas = null; 372 | 373 | for (var key in this) { 374 | delete this[key]; 375 | } 376 | } 377 | } 378 | 379 | // Add support for AMD (Asynchronous Module Definition) libraries such as require.js. 380 | if (typeof define === 'function' && define.amd) { 381 | define([], function() { 382 | return CanvasKeyFrames; 383 | }) 384 | } 385 | //Add support form CommonJS libraries such as browserify. 386 | if (typeof exports !== 'undefined') { 387 | exports.CanvasKeyFrames = CanvasKeyFrames; 388 | } 389 | //Define globally in case AMD is not available or unused 390 | if (typeof window !== 'undefined') { 391 | window.CanvasKeyFrames = CanvasKeyFrames; 392 | } 393 | })(); 394 | -------------------------------------------------------------------------------- /static/wx.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wenyiweb/canvasKeyFrames/621808c041e4f0289e11178f307befc9ddfc1261/static/wx.jpg -------------------------------------------------------------------------------- /test/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | require('should'); 3 | const CanvasKeyframes = require('../src/canvas-keyframes'); 4 | 5 | describe('CanvasKeyframes Test', () => { 6 | it('should get "CanvasKeyframes"', () => { 7 | console.log(CanvasKeyframes) 8 | }); 9 | }); --------------------------------------------------------------------------------