wx-canvas-2d/miniprogram_dist/WxCanvas2d.js

微信小程序 canvas-2d 绘图工具，支持按需引用，支持内容配置，支持功能扩展，适配各种机型，超轻量，超易用，无需学习，直接上手。

"use strict";function _typeof(t){return(_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function _toConsumableArray(t){return _arrayWithoutHoles(t)||_iterableToArray(t)||_unsupportedIterableToArray(t)||_nonIterableSpread()}function _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _unsupportedIterableToArray(t,e){var r;if(t)return"string"==typeof t?_arrayLikeToArray(t,e):"Map"===(r="Object"===(r=Object.prototype.toString.call(t).slice(8,-1))&&t.constructor?t.constructor.name:r)||"Set"===r?Array.from(t):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?_arrayLikeToArray(t,e):void 0}function _iterableToArray(t){if("undefined"!=typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}function _arrayWithoutHoles(t){if(Array.isArray(t))return _arrayLikeToArray(t)}function _arrayLikeToArray(t,e){(null==e||e>t.length)&&(e=t.length);for(var r=0,n=new Array(e);r<e;r++)n[r]=t[r];return n}function ownKeys(e,t){var r,n=Object.keys(e);return Object.getOwnPropertySymbols&&(r=Object.getOwnPropertySymbols(e),t&&(r=r.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),n.push.apply(n,r)),n}function _objectSpread(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?ownKeys(Object(r),!0).forEach(function(t){_defineProperty(e,t,r[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):ownKeys(Object(r)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})}return e}function _defineProperty(t,e,r){return(e=_toPropertyKey(e))in t?Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):t[e]=r,t}function _classCallCheck(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function _defineProperties(t,e){for(var r=0;r<e.length;r++){var n=e[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,_toPropertyKey(n.key),n)}}function _createClass(t,e,r){return e&&_defineProperties(t.prototype,e),r&&_defineProperties(t,r),Object.defineProperty(t,"prototype",{writable:!1}),t}function _toPropertyKey(t){t=_toPrimitive(t,"string");return"symbol"==_typeof(t)?t:t+""}function _toPrimitive(t,e){if("object"!=_typeof(t)||!t)return t;var r=t[Symbol.toPrimitive];if(void 0===r)return("string"===e?String:Number)(t);r=r.call(t,e||"default");if("object"!=_typeof(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}var SYS_INFO=wx.getSystemInfoSync(),WxCanvas2d=function(){return _createClass(function t(){_classCallCheck(this,t),this.query=null,this.bgColor=null,this.radius=null,this.component=null,this.canvas=null,this.canvasInfo=null,this.ctx=null,this.dpr=null,this.rootWidth=null,this.fontFamily="sans-serif",this.startTime=null,this.$listener={}},[{key:"canvasSize",get:function(){return{width:this.canvas.width/SYS_INFO.screenWidth/this.dpr*this.rootWidth,height:this.canvas.height/SYS_INFO.screenWidth/this.dpr*this.rootWidth}}},{key:"queryCanvas",value:function(){var n=this;return new Promise(function(e,r){(n.component||wx).createSelectorQuery().select(n.query).fields({node:!0,size:!0}).exec(function(t){(t[0]?e:(n.debugLogout("找不到画布","error"),r))(t)})})}},{key:"create",value:function(t){var a=this;return new Promise(function(o,e){var i=_objectSpread({query:"",rootWidth:375},t);i.query||e(new Error("[WxCanvas2d] 'query' is empty.")),a.query=i.query,a.bgColor=i.bgColor,a.component=i.component,a.radius=i.radius,a.queryCanvas().then(function(t){var e=t[0].node,r=e.getContext("2d"),n=SYS_INFO.pixelRatio;a.canvas=e,a.canvasInfo=t,a.ctx=r,a.dpr=n,a.rootWidth=i.rootWidth,a.canvas.width=t[0].width*a.dpr,a.canvas.height=t[0].height*a.dpr,o()}).catch(function(t){e(t)})})}},{key:"clear",value:function(){var t,e=[0,0,this.xDpr(this.canvasSize.width),this.xDpr(this.canvasSize.height)];(t=this.ctx).clearRect.apply(t,e),this.radius&&(this.drawRectPath({x:0,y:0,width:this.canvasSize.width,height:this.canvasSize.height,radius:this.radius}),this.ctx.clip()),this.bgColor&&(this.ctx.fillStyle=this.bgColor,(t=this.ctx).fillRect.apply(t,e))}},{key:"xDpr",value:function(t){return t*this.dpr*SYS_INFO.screenWidth/this.rootWidth}},{key:"draw",value:function(t){var u=this;return new Promise(function(c,s){u.startTime=Date.now();var e=t.series;u.queryCanvas().then(function(t){u.canvas.width=t[0].width*u.dpr,u.canvas.height=t[0].height*u.dpr,u.clear();function i(){var t,e,r=0<arguments.length&&void 0!==arguments[0]?arguments[0]:0,n=Date.now(),o=a[r];u.ctx.save(),r<a.length?(e=o.type,t=(e=void 0===e?{}:e).name,e=e.handler,t&&"function"==typeof e?(u.emit("beforeDraw",{index:r,config:o}),e.call(u,o).then(function(){u.debugLogout("绘制成功 - ".concat(t," [").concat(r+1,"/").concat(a.length,"] (").concat(Date.now()-n,"ms)")),u.emit("afterDraw",{index:r,config:o}),i(++r)}).catch(function(t){u.debugLogout("绘制失败"),u.emit("afterDraw",{index:r,config:o,error:t}),s(t)})):(u.debugLogout("未知类型","error"),i(++r))):(u.debugLogout("绘制完成 (".concat(Date.now()-u.startTime,"ms)")),c()),u.ctx.restore()}var a=e.map(function(t){return _objectSpread(_objectSpread({},t),{},{zIndex:t.zIndex||0})}).sort(function(t,e){return t.zIndex-e.zIndex});u.debugLogout("开始绘制"),i()}).catch(function(t){s(t)})})}},{key:"drawRectPath",value:function(t){var n=this,e=t.x,e=void 0===e?0:e,r=t.y,r=void 0===r?0:r,o=t.width,o=void 0===o?0:o,i=t.height,i=void 0===i?0:i,a=Math.min(o,i)/2,c=Math.max(0,Math.min(t.radius||0,a)),t={top:1.5*Math.PI,right:0,bottom:.5*Math.PI,left:Math.PI},s=[[t.left,t.top],[t.top,t.right],[t.right,t.bottom],[t.bottom,t.left]],u=[[e+c,r+c].map(function(t){return n.xDpr(t)}),[e+o-c,r+c].map(function(t){return n.xDpr(t)}),[e+o-c,r+i-c].map(function(t){return n.xDpr(t)}),[e+c,r+i-c].map(function(t){return n.xDpr(t)})];this.ctx.beginPath(),Array(4).fill().forEach(function(t,e){var r;(r=n.ctx).arc.apply(r,_toConsumableArray(u[e]).concat([n.xDpr(c)],_toConsumableArray(s[e])))}),this.ctx.closePath()}},{key:"setLineStyle",value:function(t){var e=this,t=null!=t?t:{},r=t.cap,n=t.join,n=void 0===n?"bevel":n,o=t.offset,o=void 0===o?0:o,i=t.dash,i=void 0===i?[1,0]:i,a=t.color,a=void 0===a?"#000":a,t=t.width,t=void 0===t?2:t;this.ctx.lineCap=void 0===r?"butt":r,this.ctx.setLineDash(i.map(function(t){return e.xDpr(t)})),this.ctx.lineDashOffset=this.xDpr(o),this.ctx.lineJoin=n,this.ctx.lineWidth=this.xDpr(t),this.ctx.strokeStyle=a}},{key:"debugLogout",value:function(){}},{key:"on",value:function(t,e){this.$listener[t]?this.$listener[t].includes(e)||this.$listener[t].push(e):this.$listener[t]=[e]}},{key:"off",value:function(r,n){var o=this,t=this.$listener[r];t&&(n?t.some(function(t,e){return t===n&&delete o.$listener[r][e]}):delete this.$listener[r])}},{key:"emit",value:function(e,r){Array.isArray(this.$listener[e])&&this.$listener[e].forEach(function(t){return t(_objectSpread({event:e},r))})}}])}();WxCanvas2d.use=function(){var o=0<arguments.length&&void 0!==arguments[0]?arguments[0]:{};o.name&&o.handler&&(WxCanvas2d.prototype[o.name]=function(){for(var t,e=arguments.length,r=new Array(e),n=0;n<e;n++)r[n]=arguments[n];return(t=o.handler).call.apply(t,[this].concat(r))})},module.exports=WxCanvas2d;