mp-painter - npm Package Compare versions

Comparing version 1.0.0-beta.1 to 1.0.0

dist/lib/painter-element/element-transform.d.ts

@@ -38,3 +38,6 @@ import Painter from "../painter";
 }
-declare type PaitnerTransformOriginOption = [PaitnerTransformOriginHorizontalOption, PaitnerTransformOriginVerticalOption];
+declare type PaitnerTransformOriginOption = [
+    PaitnerTransformOriginHorizontalOption,
+    PaitnerTransformOriginVerticalOption
+];
 declare type PaitnerTransformOriginHorizontalOption = "left" | "center" | "right";
@@ -41,0 +44,0 @@ declare type PaitnerTransformOriginVerticalOption = "top" | "center" | "bottom";

dist/lib/painter.d.ts

@@ -20,5 +20,7 @@ /// <reference types="uni-app" />
     createElement(elementOption: BuiltInPainterElementOption): import("./painter-element/element-text").PainterTextElement | import("./painter-element/element-text-block").PainterTextBlockElement | import("./painter-element/element-image").PainterImageElement | import("./painter-element/element-line").PainterLineElement | import("./painter-element/element-rect").PainterRectagleElement | import("./painter-element/element-container").PainterContainerElement | import("./painter-element/element-clip").PainterClipElement | import("./painter-element/element-transform").PainterTransformElement;
-    /** 获取指定元素的尺寸 */
+    /** 获取指定元素的内部尺寸, 结果不包含元素的 left 和 top */
     layout(elementOption: BuiltInPainterElementOption): Promise<import("./value").Size>;
+    /** 兼容将 painter 实例保存在 uniapp this 上, 勿手动调用 */
+    toJSON(): string;
 }
 export {};

dist/lib/painter.js

@@ -1,1 +0,1 @@
-module.exports=function(t){var e={};function i(n){if(e[n])return e[n].exports;var o=e[n]={i:n,l:!1,exports:{}};return t[n].call(o.exports,o,o.exports,i),o.l=!0,o.exports}return i.m=t,i.c=e,i.d=function(t,e,n){i.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:n})},i.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},i.t=function(t,e){if(1&e&&(t=i(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(i.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var o in t)i.d(n,o,function(e){return t[e]}.bind(null,o));return n},i.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return i.d(e,"a",e),e},i.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},i.p="",i(i.s=0)}([function(t,e,i){"use strict";i.r(e);const n="object"==typeof swan?"mp-baidu":"object"==typeof my?"mp-alipay":"object"==typeof wx?"mp-weixin":"object"==typeof window?"h5":"mp-weixin",o=function(){if("undefined"!=typeof uni)return uni;if("undefined"!=typeof wx)return wx;if("undefined"!=typeof window)return{upx2px:t=>t,getSystemInfoSync:()=>({screenWidth:window.innerWidth}),downloadFile:t=>{var e,i;return null===(i=(e=t).success)||void 0===i?void 0:i.call(e,{tempFilePath:t.url})}};throw new Error("enviroment not support")}();var r=function(t,e,i,n){return new(i||(i=Promise))((function(o,r){function s(t){try{a(n.next(t))}catch(t){r(t)}}function h(t){try{a(n.throw(t))}catch(t){r(t)}}function a(t){var e;t.done?o(t.value):(e=t.value,e instanceof i?e:new i((function(t){t(e)}))).then(s,h)}a((n=n.apply(t,e||[])).next())}))};class s{constructor(t,e,i){var n,o,r;this.offsetTop=0,this.offsetLeft=0,this.contentHeight=0,this.contentWidth=0,this.painter=t,this.parent=i,this.position=null!=(n=e.position)?n:"static",this.left=null!=(o=e.left)?o:0,this.top=null!=(r=e.top)?r:0}layout(){return r(this,void 0,void 0,(function*(){let t=yield this._layout();return this.contentHeight=t.height,this.contentWidth=t.width,t}))}get anchorX(){var t,e;return null!=(e=null===(t=this.parent)||void 0===t?void 0:t.elementX)?e:0}get anchorY(){var t,e;return null!=(e=null===(t=this.parent)||void 0===t?void 0:t.elementY)?e:0}get elementX(){switch(this.position){case"absolute":return this.left+this.anchorX;case"static":return this.left+this.offsetLeft+this.anchorX;default:throw new TypeError("unknown position type")}}get elementY(){switch(this.position){case"absolute":return this.top+this.anchorY;case"static":return this.top+this.offsetTop+this.anchorY;default:throw new TypeError("unknown position type")}}get offsetHeight(){return this.top+this.contentHeight}get offsetWidth(){return this.left+this.contentWidth}}class h extends class{constructor(t){this.element=t}get painter(){return this.element.painter}}{constructor(t,e){super(t),this.option=e}get style(){const{ctx:t,upx2px:e}=this.painter,{x1:i,x2:n,y1:o,y2:r}=this.option,s=t.createLinearGradient(e(this.element.elementX+i),e(this.element.elementY+o),e(this.element.elementX+n),e(this.element.elementY+r));return this.option.colorStops.forEach(t=>{s.addColorStop(t.offset,t.color)}),s}}function a(t,e){if("string"==typeof e)return e;switch(e.type){case"liner-gradient":return new h(t,e).style;default:throw new Error("Unkwon option type")}}function l(t,e,i=1){return i%2?[Math.floor(t)+.5,Math.floor(e)+.5]:[Math.round(t),Math.round(e)]}class c extends s{constructor(t,e,i){var n,o,r,s,h;super(t,e,i),this.option={dx:(n=e.dx,null!=n?n:0),dy:(o=e.dy,null!=o?o:0),color:(r=e.color,null!=r?r:"#000"),dashPattern:(s=e.dashPattern,null!=s?s:[1,0]),lineWidth:(h=e.lineWidth,null!=h?h:1)}}_layout(){return{width:this.option.dx,height:this.option.dy}}paint(){let t=this.painter.upx2px(this.elementX),e=this.painter.upx2px(this.elementY),i=this.painter.upx2px(this.elementX+this.option.dx),n=this.painter.upx2px(this.elementY+this.option.dy),o=this.painter.upx2px(this.option.lineWidth);this.painter.ctx.beginPath(),this.painter.ctx.moveTo(...l(t,e,o)),this.painter.ctx.lineTo(...l(i,n,o)),this.painter.ctx.setLineDash(this.option.dashPattern.map(t=>this.painter.upx2px(t))),this.painter.ctx.setStrokeStyle(a(this,this.option.color)),this.painter.ctx.lineWidth=o,this.painter.ctx.stroke()}}function u(t){return t.replace(/[\n\r]/g,"")}class p extends s{constructor(t,e,i){var n,o,r,s,h,a,l,c,p,d;super(t,e,i),this.option={color:(n=e.color,null!=n?n:"#000"),align:(o=e.align,null!=o?o:"left"),fontWeight:(r=e.fontWeight,null!=r?r:"normal"),fontStyle:(s=e.fontStyle,null!=s?s:"normal"),fontFamily:(h=e.fontFamily,null!=h?h:"serial"),fontSize:(a=e.fontSize,null!=a?a:30),baseline:(l=e.baseline,null!=l?l:"top"),content:(c=e.content,null!=c?c:""),width:(p=e.width,null!=p?p:void 0),textDecoration:(d=e.textDecoration,null!=d?d:"none")},this.option.content=u(this.option.content)}_layout(){var t;return{width:null!=(t=this.option.width)?t:this.painter.ctx.measureTextWidth(this.option.content,this.option.fontSize),height:this.option.fontSize}}paint({inTextBlock:t=!1}={}){this.painter.ctx.font=["normal"!=this.option.fontWeight&&this.option.fontWeight,"normal"!=this.option.fontStyle&&this.option.fontStyle,this.painter.upx2px(this.option.fontSize)+"px",this.option.fontFamily].filter(Boolean).join(" "),t||this.painter.ctx.setFillStyle(a(this,this.option.color)),this.painter.ctx.setFontSize(this.painter.upx2px(this.option.fontSize)),this.painter.ctx.setTextBaseline(this.option.baseline),this.painter.ctx.setTextAlign(this.option.align),this.painter.ctx.fillText(this.option.content,this.painter.upx2px(this.elementX),this.painter.upx2px(this.elementY)),console.debug("mp-painter:fillText:",this.option.content,"x=",this.elementX,"y=",this.elementY),this.paintTextDecoration()}paintTextDecoration(){"line-through"==this.option.textDecoration&&new c(this.painter,{top:this.elementY+.4*this.option.fontSize,left:this.elementX,dx:this.contentWidth,dy:0,color:this.option.color}).paint()}}class d{constructor(t){this.fontSize=t.fontSize,this.lineClamp=t.lineClamp||1/0,this.width=t.width,this.ctx=t.painter.ctx,this.painter=t.painter,this.content=t.content,this.lines=[],this.currentLineText="",this.position=0,this.endPostion=this.position,this.isOverflow=!1,this.isDry=!1,this.isFull=!1}split(){return this.painter.ctx.setFontSize(this.fontSize),this.fillText(),this.lines}minCharNumberInWidth(t){return Math.ceil(t/this.fontSize)}freeSpaceInCurrentLine(){if(this.currentLineText.length){let t=this.painter.ctx.measureTextWidth(this.currentLineText,this.fontSize);return this.width-(t||0)}return this.width}adjustCharNumberInCurrentLine(t){let e=this.currentLineText.length+t,i=this.content.length;e=Math.min(e,i),this.isDry=e==i,this.currentLineText=this.content.slice(0,e)}commitLine(){this.content=this.content.slice(this.currentLineText.length),this.lines.push(this.currentLineText),this.currentLineText="",this.lines.length==this.lineClamp&&(this.isFull=!0,0==this.isDry&&(this.isOverflow=!0))}handleOverflow(){let t=this.lines.pop();t=t.substring(0,Math.max(0,t.length-1))+"...",this.lines.push(t)}fillText(){let t=this.freeSpaceInCurrentLine();if(t<=0){if(this.adjustCharNumberInCurrentLine(-1),this.commitLine(),this.isOverflow&&this.handleOverflow(),this.isFull)return;t=this.freeSpaceInCurrentLine()}else if(this.isDry)return void this.commitLine();let e=this.minCharNumberInWidth(t);this.adjustCharNumberInCurrentLine(e),this.fillText()}}var f=function(t,e,i,n){return new(i||(i=Promise))((function(o,r){function s(t){try{a(n.next(t))}catch(t){r(t)}}function h(t){try{a(n.throw(t))}catch(t){r(t)}}function a(t){var e;t.done?o(t.value):(e=t.value,e instanceof i?e:new i((function(t){t(e)}))).then(s,h)}a((n=n.apply(t,e||[])).next())}))};class x extends s{constructor(t,e,i){var n,o,r,s,h,a,l;super(t,e,i),this.option=Object.assign(Object.assign({},e),{width:(n=e.width,null!=n?n:100),height:(o=e.height,null!=o?o:"auto"),fontSize:(r=e.fontSize,null!=r?r:30),content:(s=e.content,null!=s?s:""),lineHeight:(h=e.lineHeight,null!=h?h:40),lineClamp:(a=e.lineClamp,null!=a?a:0),color:(l=e.color,null!=l?l:"black")}),this.lines=[],this.option.content=u(this.option.content)}_layout(){return this.lines=new d({fontSize:this.option.fontSize,lineClamp:this.option.lineClamp,width:this.option.width,painter:this.painter,content:this.option.content}).split(),{width:this.option.width,height:"auto"==this.option.height?(this.lines.length-1)*this.option.lineHeight+this.option.fontSize:this.option.height}}paint(){return f(this,void 0,void 0,(function*(){this.painter.ctx.setFillStyle(a(this,this.option.color)),this.lines.map((t,e)=>{let i=Object.assign(Object.assign({},this.option),{type:"text",top:this.elementY+e*this.option.lineHeight,left:this.elementX,position:this.position,content:t});new p(this.painter,i).paint({inTextBlock:!0})})}))}}function m(t){let e=new Map;return function(i){return e.has(i)||e.set(i,t(i)),e.get(i)}}function w(){let t=!1;const e=t=>{let e=Object.getOwnPropertyDescriptors(Object.getPrototypeOf(t)),i={};for(let t in e){const n=e[t],o={};o.enumerable=n.enumerable,o.configurable=n.configurable,n.value&&"function"==typeof n.value&&(o.value=function(...t){return n.value.call(this.context,...t)}),n.value&&"function"!=typeof n.value&&(o.get=function(){return this.context[t]},o.set=function(e){this.context[t]=e}),n.get&&(o.get=function(){var t;return null===(t=n.get)||void 0===t?void 0:t.call(this.context)}),n.set&&(o.set=function(t){var e;null===(e=n.set)||void 0===e||e.call(this.context,t)}),i[t]=o}return Object.defineProperties({},i)},i=function(n){if(!(this instanceof i))throw new Error("mp-painter: `this` is not instance of `constructor`");if(this.context=n,!t)for(let n=this,o=Object.getPrototypeOf(n);null!==o;n=o,o=Object.getPrototypeOf(n))if(n.constructor===i){Object.setPrototypeOf(n,e(this.context)),t=!0;break}};return i}var y=function(t,e,i,n){return new(i||(i=Promise))((function(o,r){function s(t){try{a(n.next(t))}catch(t){r(t)}}function h(t){try{a(n.throw(t))}catch(t){r(t)}}function a(t){var e;t.done?o(t.value):(e=t.value,e instanceof i?e:new i((function(t){t(e)}))).then(s,h)}a((n=n.apply(t,e||[])).next())}))};class g extends(w()){constructor(t,e){super(e),this.painter=t}draw(t,e){e()}setFillStyle(t){super.fillStyle=t}setStrokeStyle(t){super.strokeStyle=t}drawImageWithSrc(t,e,i,n,o,r,s,h,a){const l=Object.create(null,{drawImage:{get:()=>super.drawImage}});return y(this,void 0,void 0,(function*(){let c=yield v(t);r&&s&&h&&a?l.drawImage.call(this,c,e,i,n,o,r,s,h,a):l.drawImage.call(this,c,e,i,n,o)}))}setTextAlign(t){super.textAlign=t}setTextBaseline(t){super.textBaseline="normal"===t?"alphabetic":t}setFontSize(t){var e,i;console.debug("set font size for h5, before is %s after is %s",super.font,null===(e=super.font)||void 0===e?void 0:e.replace(/\b\w+px\b/,this.painter.upx2px(t)+"px sans-serif")),super.font=null===(i=super.font)||void 0===i?void 0:i.replace(/\b\w+px\b/,this.painter.upx2px(t)+"px")}measureTextWidth(t,e){this.setFontSize(e);let i=this.measureText(t).width;return console.debug('measureText: result of measure text "%s" with font size %s is %s',t,this.font,i),null!=i?i:0}}function v(t){let e=new Image;return e.src=t,new Promise(t=>e.addEventListener("load",i=>t(e),{once:!0}))}var b=function(t,e,i,n){return new(i||(i=Promise))((function(o,r){function s(t){try{a(n.next(t))}catch(t){r(t)}}function h(t){try{a(n.throw(t))}catch(t){r(t)}}function a(t){var e;t.done?o(t.value):(e=t.value,e instanceof i?e:new i((function(t){t(e)}))).then(s,h)}a((n=n.apply(t,e||[])).next())}))};const S=m((function(t){return b(this,void 0,void 0,(function*(){try{let{width:i=100,height:n=100}=yield(e=uni.getImageInfo,function(t={}){return new Promise((i,n)=>{t.success=i,t.fail=n,e(t)})})({src:t});return{width:i,height:n}}catch(t){return console.log("mp-painter:getImageOriginSize: fail, use default size: width = 100, height = 100"),{width:100,height:100}}var e}))})),T=m((function(t){return b(this,void 0,void 0,(function*(){let e=yield v(t);return{width:e.naturalWidth,height:e.naturalHeight}}))}));class W extends s{constructor(t,e,i){var n,o,r,s;super(t,e,i),this.option={width:(n=e.width,null!=n?n:100),height:(o=e.height,null!=o?o:100),objectFit:(r=e.objectFit,null!=r?r:"fill"),objectPosition:(s=e.objectPosition,null!=s?s:["center","center"]),src:e.src}}_layout(){return{width:this.option.width,height:this.option.height}}paint(){return b(this,void 0,void 0,(function*(){let t=this.painter.upx2px;if(!this.option.src)return;let e=yield function(t,e){return b(this,void 0,void 0,(function*(){let i=t.platform;return"h5"!=i&&/^\./.test(e.src)||"h5"!=i&&/^\/static/.test(e.src)||"h5"!=i&&/^data:image\//.test(e.src)||"mp-alipay"==i&&/^https:\/\/resource\//.test(e.src)||"mp-weixin"==i&&/^wxfile:/.test(e.src)||"mp-baidu"==i&&/^bdfile:\/\/tmp/.test(e.src)?e.src:(console.log("mp-painter:绘制图片: 下载图片文件:",e.src),"h5"==i?e.src:yield(n=e.src,new Promise((t,e)=>o.downloadFile({url:n,success:e=>t(e.tempFilePath),fail:e}))).catch(t=>(console.log("mp-painter:下载错误: ",t),"")));var n}))}(this.painter,this.option);if(e)if(console.log("mp-painter:调用小程序drawImage，使用:",e),"fill"!=this.option.objectFit){let{sx:i,sy:n,sh:o,sw:r,dx:s,dy:h,dh:a,dw:l}=function(t,e,i){var n,o;let r=e.width/e.height,s=i.width/i.height,h=1;if(r>s&&"contain"==t.objectFit||r<=s&&"cover"==t.objectFit)h=i.width/e.width;else{if(!(r>s&&"cover"==t.objectFit||r<=s&&"contain"==t.objectFit))throw new Error("Unkonwn concreteScale");h=i.height/e.height}let a=e.width*h,l=e.height*h,c={left:0,center:.5,right:1}[(null===(n=t.objectPosition)||void 0===n?void 0:n[0])||"center"],u={top:0,center:.5,bottom:1}[(null===(o=t.objectPosition)||void 0===o?void 0:o[1])||"center"],p=(i.width-a)*c,d=(i.height-l)*u,f=(t,e)=>[(t-p)/h,(e-d)/h],[x,m]=f(0,0),[w,y]=f(i.width,i.height);return{sx:Math.max(x,0),sy:Math.max(m,0),sw:Math.min(w-x,e.width),sh:Math.min(y-m,e.height),dx:Math.max(p,0),dy:Math.max(d,0),dw:Math.min(a,i.width),dh:Math.min(l,i.height)}}({objectFit:this.option.objectFit,objectPosition:this.option.objectPosition},yield("h5"==this.painter.platform?T:S)(e),{width:this.option.width,height:this.option.height});this.painter.ctx.drawImageWithSrc(e,i,n,r,o,t(s+this.elementX),t(h+this.elementY),t(l),t(a))}else this.painter.ctx.drawImageWithSrc(e,t(this.elementX),t(this.elementY),t(this.option.width),t(this.option.height))}))}}class O extends class{constructor(t,e){var i,n;this.element=t,this.left=null!=(i=e.left)?i:0,this.top=null!=(n=e.top)?n:0}get painter(){return this.element.painter}get pathX(){return this.element.elementX+this.left}get pathY(){return this.element.elementY+this.top}}{constructor(t,e){super(t,e),this.option=e,this.option.borderRadius&&this.assertBorderRadius()}assertBorderRadius(){this.normalizedBorderRadius.some(t=>t<0)&&(console.warn("border radius must greater than 0, got:",this.normalizedBorderRadius.join(",")),this.option.borderRadius=0)}paint(){this.reduceBorderRadius();let[t,e,i,n]=this.normalizedBorderRadius,{ctx:o,upx2px:r}=this.painter;o.beginPath(),o.moveTo(r(this.pathX),r(this.pathY+t)),this.painter.ctx.arcTo(r(this.pathX),r(this.pathY),r(this.pathX+t),r(this.pathY),r(t)),this.painter.ctx.arcTo(r(this.pathX+this.option.width),r(this.pathY),r(this.pathX+this.option.width),r(this.pathY+e),r(e)),this.painter.ctx.arcTo(r(this.pathX+this.option.width),r(this.pathY+this.option.height),r(this.pathX+this.option.width-i),r(this.pathY+this.option.height),r(i)),this.painter.ctx.arcTo(r(this.pathX),r(this.pathY+this.option.height),r(this.pathX),r(this.pathY+this.option.height-n),r(n)),o.closePath()}get normalizedBorderRadius(){return"number"==typeof this.option.borderRadius?Array.from({length:4}).fill(this.option.borderRadius):[...this.option.borderRadius]}reduceBorderRadius(){let[t,e,i,n]=this.normalizedBorderRadius,o=Math.min(this.option.width/(t+e),this.option.height/(e+i),this.option.width/(n+i),this.option.height/(t+n));o>=1||(this.option.borderRadius=this.normalizedBorderRadius.map(t=>t*o))}}function P(t,e){switch(e.type){case"rounded-rect":return new O(t,e);default:throw new Error("Unkwon option type")}}class j extends s{constructor(t,e,i){var n,o,r,s,h,a,l;super(t,e,i),this.option={width:(n=e.width,null!=n?n:100),height:(o=e.height,null!=o?o:100),borderRadius:(r=e.borderRadius,null!=r?r:0),background:(s=e.background,null!=s?s:"transparent"),borderStyle:(h=e.borderStyle,null!=h?h:"solid"),borderWidth:(a=e.borderWidth,null!=a?a:0),borderColor:(l=e.borderColor,null!=l?l:"#000")}}_layout(){return{width:this.option.width,height:this.option.height}}paint(){(this.shouldFill||this.shouldStroke)&&(this.option.borderRadius?this.paintByPath():this.paintByRect())}get shouldFill(){return"trasparent"!==this.option.background}get shouldStroke(){return this.option.borderWidth>0}applyFillStyle(){this.painter.ctx.setFillStyle(a(this,this.option.background))}applyStrokeStyle(){var t,e;this.painter.ctx.setLineDash((t=this.option.borderStyle,{dashed:[e=this.option.borderWidth,e],solid:[10,0]}[t])),this.painter.ctx.lineWidth=this.painter.upx2px(this.option.borderWidth),this.painter.ctx.setStrokeStyle(this.option.borderColor)}paintByRect(){let t=[this.painter.upx2px(this.elementX),this.painter.upx2px(this.elementY),this.painter.upx2px(this.option.width),this.painter.upx2px(this.option.height)];this.shouldFill&&(this.applyFillStyle(),this.painter.ctx.fillRect(...t)),this.shouldStroke&&(this.applyStrokeStyle(),this.painter.ctx.strokeRect(...t))}paintByPath(){P(this,{type:"rounded-rect",height:this.option.height,width:this.option.width,borderRadius:this.option.borderRadius}).paint(),this.shouldFill&&(this.painter.ctx.setFillStyle(a(this,this.option.background)),this.painter.ctx.fill()),this.shouldStroke&&(this.applyStrokeStyle(),this.painter.ctx.stroke())}}var k=function(t,e,i,n){return new(i||(i=Promise))((function(o,r){function s(t){try{a(n.next(t))}catch(t){r(t)}}function h(t){try{a(n.throw(t))}catch(t){r(t)}}function a(t){var e;t.done?o(t.value):(e=t.value,e instanceof i?e:new i((function(t){t(e)}))).then(s,h)}a((n=n.apply(t,e||[])).next())}))};class F extends s{constructor(t,e,i){var n,o,r,s;super(t,e,i),this.childOffsetTop=0,this.childOffsetLeft=0,this.option={direction:(n=e.direction,null!=n?n:"vertical"),width:(o=e.width,null!=o?o:"auto"),height:(r=e.height,null!=r?r:"auto"),children:(s=e.children,null!=s?s:[])},this.children=this.option.children.map(t=>Y(this.painter,t,this))}_layout(){return k(this,void 0,void 0,(function*(){return yield this.layoutChildren(),{width:this.calcContainerWidth(),height:this.calcContainerHeight()}}))}layoutChildren(){return k(this,void 0,void 0,(function*(){for(let t of this.children)yield this.layoutChild(t)}))}layoutChild(t){return k(this,void 0,void 0,(function*(){yield t.layout(),"absolute"!=t.position&&("vertical"==this.option.direction?(t.offsetTop=this.childOffsetTop,this.childOffsetTop+=t.offsetHeight):(t.offsetLeft=this.childOffsetLeft,this.childOffsetLeft+=t.offsetWidth))}))}calcContainerWidth(){if("number"==typeof this.option.width)return this.option.width;switch(this.option.direction){case"vertical":return this.childrenMaxWidth();case"horizontal":return this.childOffsetLeft;default:throw new TypeError("Unknown direction")}}calcContainerHeight(){if("number"==typeof this.option.height)return this.option.height;switch(this.option.direction){case"vertical":return this.childOffsetTop;case"horizontal":return this.childrenMaxHeight();default:throw new TypeError("Unknown direction")}}paint(){return k(this,void 0,void 0,(function*(){for(let t of this.children)yield t.paint()}))}childrenMaxWidth(){return Math.max(...this.children.map(t=>t.offsetWidth),0)}childrenMaxHeight(){return Math.max(...this.children.map(t=>t.offsetHeight),0)}}var z=function(t,e,i,n){return new(i||(i=Promise))((function(o,r){function s(t){try{a(n.next(t))}catch(t){r(t)}}function h(t){try{a(n.throw(t))}catch(t){r(t)}}function a(t){var e;t.done?o(t.value):(e=t.value,e instanceof i?e:new i((function(t){t(e)}))).then(s,h)}a((n=n.apply(t,e||[])).next())}))};class I extends s{constructor(t,e,i){super(t,e,i),this.contentElement=Y(t,e.content,this),this.clipPath=P(this,e.path)}_layout(){return this.contentElement.layout()}paint(){return z(this,void 0,void 0,(function*(){this.painter.ctx.save(),yield this.clipPath.paint(),this.painter.ctx.clip(),yield this.contentElement.paint(),this.painter.ctx.restore()}))}}var C=function(t,e,i,n){return new(i||(i=Promise))((function(o,r){function s(t){try{a(n.next(t))}catch(t){r(t)}}function h(t){try{a(n.throw(t))}catch(t){r(t)}}function a(t){var e;t.done?o(t.value):(e=t.value,e instanceof i?e:new i((function(t){t(e)}))).then(s,h)}a((n=n.apply(t,e||[])).next())}))};class X extends s{constructor(t,e,i){var n,o;super(t,e,i),this.contentElement=Y(t,e.content,this),this.transformOptions=null!=(n=e.transform)?n:[],this.transformOrigin=null!=(o=e.transformOrigin)?o:["center","center"]}_layout(){return this.contentElement.layout()}paint(){return C(this,void 0,void 0,(function*(){this.painter.ctx.save(),this.withTransformOrigin(()=>this.transform()),yield this.contentElement.paint(),this.painter.ctx.restore()}))}transform(){this.transformOptions.forEach(t=>this.singleTransform(t))}singleTransform(t){var e,i,n,o;switch(t.type){case"translate":return this.painter.ctx.translate(this.painter.upx2px(null!=(e=t.x)?e:0),this.painter.upx2px(null!=(i=t.y)?i:0));case"rotate":return this.painter.ctx.rotate(t.rotate/180*Math.PI);case"scale":return this.painter.ctx.scale(null!=(n=t.scaleWidth)?n:1,null!=(o=t.scaleHeight)?o:1);case"set-matrix":return this.painter.ctx.setTransform(t.scaleX,t.skewX,t.skewY,t.scaleY,this.painter.upx2px(t.translateX),this.painter.upx2px(t.translateY));default:throw new Error("Unknown transform type.")}}withTransformOrigin(t){const e={x:this.elementX+this.contentWidth*{left:0,center:.5,right:1}[this.transformOrigin[0]],y:this.elementY+this.contentHeight*{top:0,center:.5,bottom:1}[this.transformOrigin[1]]};this.singleTransform({type:"translate",x:e.x,y:e.y}),t(),this.singleTransform({type:"translate",x:-e.x,y:-e.y})}}function Y(t,e,i){switch(e.type){case"text":return new p(t,e,i);case"text-block":return new x(t,e,i);case"image":return new W(t,e,i);case"line":return new c(t,e,i);case"rect":return new j(t,e,i);case"container":return new F(t,e,i);case"clip":return new I(t,e,i);case"transform":return new X(t,e,i);default:throw new TypeError("Unkown painter element type")}}let L=function(){var t;if("function"==typeof o.upx2px)return o.upx2px;let e=(null!=(t=o.getSystemInfoSync().screenWidth)?t:375)/750;return function(t){return t*e}}();const M=[.296,.313,.436,.638,.586,.89,.87,.256,.334,.334,.455,.742,.241,.433,.241,.427,.586,.586,.586,.586,.586,.586,.586,.586,.586,.586,.241,.241,.742,.742,.742,.483,1.031,.704,.627,.669,.762,.55,.531,.744,.773,.294,.396,.635,.513,.977,.813,.815,.612,.815,.653,.577,.573,.747,.676,1.018,.645,.604,.62,.334,.416,.334,.742,.448,.295,.553,.639,.501,.64,.567,.347,.64,.616,.266,.267,.544,.266,.937,.616,.636,.639,.64,.382,.463,.373,.616,.525,.79,.507,.529,.492,.334,.269,.334,.742,.296];var R=function(t,e,i,n){return new(i||(i=Promise))((function(o,r){function s(t){try{a(n.next(t))}catch(t){r(t)}}function h(t){try{a(n.throw(t))}catch(t){r(t)}}function a(t){var e;t.done?o(t.value):(e=t.value,e instanceof i?e:new i((function(t){t(e)}))).then(s,h)}a((n=n.apply(t,e||[])).next())}))};const E=w();class B extends E{constructor(t,e){super(e),this.painter=t}drawImageWithSrc(t,e,i,n,o,r,s,h,a){const l=Object.create(null,{drawImage:{get:()=>super.drawImage}});return R(this,void 0,void 0,(function*(){r&&s&&h&&a?l.drawImage.call(this,t,e,i,n,o,r,s,h,a):l.drawImage.call(this,t,e,i,n,o)}))}measureTextWidth(t,e){var i;return this.setFontSize(e),null!=(i=this.measureText(t).width)?i:0}}class H extends B{measureTextWidth(t,e){return t.split("").reduce((t,e)=>{let i=e.charCodeAt(0);return t+(M[i-32]||1)},0)*e}}var _=function(t,e,i,n){return new(i||(i=Promise))((function(o,r){function s(t){try{a(n.next(t))}catch(t){r(t)}}function h(t){try{a(n.throw(t))}catch(t){r(t)}}function a(t){var e;t.done?o(t.value):(e=t.value,e instanceof i?e:new i((function(t){t(e)}))).then(s,h)}a((n=n.apply(t,e||[])).next())}))};class D extends B{measureTextWidth(t,e){var i;return"top"==t&&console.log("measureText("+t+").width=",super.measureText(t).width),(null!=(i=super.measureText(t).width)?i:0)/10*e}drawImageWithSrc(t,e,i,n,o,r,s,h,a){const l=Object.create(null,{drawImageWithSrc:{get:()=>super.drawImageWithSrc}});return _(this,void 0,void 0,(function*(){r&&s&&h&&a?l.drawImageWithSrc.call(this,t,r,s,h,a,e,i,n,o):l.drawImageWithSrc.call(this,t,e,i,n,o)}))}}class U extends B{arcTo(t,e,i,n,o){return o<2?this.lineTo(t,e):super.arcTo(t,e,i,n,o)}measureTextWidth(t,e){return(t.includes("\n")||t.includes("\r"))&&console.warn(`mp-painter:measureText:字符串 "${t}" 中包含换行符，结果在 iPhone 上可能不准确`),super.measureTextWidth(t,e)}}i.d(e,"default",(function(){return N}));var A=function(t,e,i,n){return new(i||(i=Promise))((function(o,r){function s(t){try{a(n.next(t))}catch(t){r(t)}}function h(t){try{a(n.throw(t))}catch(t){r(t)}}function a(t){var e;t.done?o(t.value):(e=t.value,e instanceof i?e:new i((function(t){t(e)}))).then(s,h)}a((n=n.apply(t,e||[])).next())}))};class N{constructor(t,{platform:e=n,upx2px:i}={}){this.platform=e,this.upx2px=null!=i?i:L,"mp-alipay"==e&&(this.upx2px=t=>(null!=i?i:L)(2*t)),this.ctx=function(t,e){switch(t.platform){case"h5":return new g(t,e);case"mp-weixin":return new U(t,e);case"mp-alipay":return new H(t,e);case"mp-baidu":return new D(t,e);default:throw new Error("mp-painter: unexpect platform :"+t.platform)}}(this,t)}draw(t,e={}){return A(this,void 0,void 0,(function*(){let e=Y(this,t),i=yield e.layout();return yield e.paint(),yield new Promise(t=>this.ctx.draw(!0,t)),yield function(t=0){return new Promise(e=>setTimeout(e,t))}(100),i}))}createElement(t){return Y(this,t)}layout(t){return A(this,void 0,void 0,(function*(){return yield this.createElement(t).layout()}))}}}]);
+module.exports=function(t){var e={};function i(n){if(e[n])return e[n].exports;var o=e[n]={i:n,l:!1,exports:{}};return t[n].call(o.exports,o,o.exports,i),o.l=!0,o.exports}return i.m=t,i.c=e,i.d=function(t,e,n){i.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:n})},i.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},i.t=function(t,e){if(1&e&&(t=i(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(i.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var o in t)i.d(n,o,function(e){return t[e]}.bind(null,o));return n},i.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return i.d(e,"a",e),e},i.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},i.p="",i(i.s=0)}([function(t,e,i){"use strict";i.r(e);const n="object"==typeof swan?"mp-baidu":"object"==typeof my?"mp-alipay":"object"==typeof wx?"mp-weixin":"object"==typeof window?"h5":"mp-weixin",o=function(){if("undefined"!=typeof uni)return uni;if("undefined"!=typeof wx)return wx;if("undefined"!=typeof window)return{upx2px:t=>t,getSystemInfoSync:()=>({screenWidth:window.innerWidth}),downloadFile:t=>{var e;return null===(e=t.success)||void 0===e?void 0:e.call(t,{tempFilePath:t.url})}};throw new Error("enviroment not support")}();var r=function(t,e,i,n){return new(i||(i=Promise))((function(o,r){function s(t){try{l(n.next(t))}catch(t){r(t)}}function h(t){try{l(n.throw(t))}catch(t){r(t)}}function l(t){var e;t.done?o(t.value):(e=t.value,e instanceof i?e:new i((function(t){t(e)}))).then(s,h)}l((n=n.apply(t,e||[])).next())}))};class s{constructor(t,e,i){var n,o,r;this.offsetTop=0,this.offsetLeft=0,this.contentHeight=0,this.contentWidth=0,this.painter=t,this.parent=i,this.position=null!==(n=e.position)&&void 0!==n?n:"static",this.left=null!==(o=e.left)&&void 0!==o?o:0,this.top=null!==(r=e.top)&&void 0!==r?r:0}layout(){return r(this,void 0,void 0,(function*(){let t=yield this._layout();return this.contentHeight=t.height,this.contentWidth=t.width,t}))}get anchorX(){var t,e;return null!==(e=null===(t=this.parent)||void 0===t?void 0:t.elementX)&&void 0!==e?e:0}get anchorY(){var t,e;return null!==(e=null===(t=this.parent)||void 0===t?void 0:t.elementY)&&void 0!==e?e:0}get elementX(){switch(this.position){case"absolute":return this.left+this.anchorX;case"static":return this.left+this.offsetLeft+this.anchorX;default:throw new TypeError("unknown position type")}}get elementY(){switch(this.position){case"absolute":return this.top+this.anchorY;case"static":return this.top+this.offsetTop+this.anchorY;default:throw new TypeError("unknown position type")}}get offsetHeight(){return this.top+this.contentHeight}get offsetWidth(){return this.left+this.contentWidth}}class h extends class{constructor(t){this.element=t}get painter(){return this.element.painter}}{constructor(t,e){super(t),this.option=e}get style(){const{ctx:t,upx2px:e}=this.painter,{x1:i,x2:n,y1:o,y2:r}=this.option,s=t.createLinearGradient(e(this.element.elementX+i),e(this.element.elementY+o),e(this.element.elementX+n),e(this.element.elementY+r));return this.option.colorStops.forEach(t=>{s.addColorStop(t.offset,t.color)}),s}}function l(t,e){if("string"==typeof e)return e;switch(e.type){case"liner-gradient":return new h(t,e).style;default:throw new Error("Unkwon option type")}}function a(t,e,i=1){return i%2?[Math.floor(t)+.5,Math.floor(e)+.5]:[Math.round(t),Math.round(e)]}class c extends s{constructor(t,e,i){var n,o,r,s,h;super(t,e,i),this.option={dx:null!==(n=e.dx)&&void 0!==n?n:0,dy:null!==(o=e.dy)&&void 0!==o?o:0,color:null!==(r=e.color)&&void 0!==r?r:"#000",dashPattern:null!==(s=e.dashPattern)&&void 0!==s?s:[1,0],lineWidth:null!==(h=e.lineWidth)&&void 0!==h?h:1}}_layout(){return{width:this.option.dx,height:this.option.dy}}paint(){let t=this.painter.upx2px(this.elementX),e=this.painter.upx2px(this.elementY),i=this.painter.upx2px(this.elementX+this.option.dx),n=this.painter.upx2px(this.elementY+this.option.dy),o=this.painter.upx2px(this.option.lineWidth);this.painter.ctx.beginPath(),this.painter.ctx.moveTo(...a(t,e,o)),this.painter.ctx.lineTo(...a(i,n,o)),this.painter.ctx.setLineDash(this.option.dashPattern.map(t=>this.painter.upx2px(t))),this.painter.ctx.setStrokeStyle(l(this,this.option.color)),this.painter.ctx.lineWidth=o,this.painter.ctx.stroke()}}function u(t){return t.replace(/[\n\r]/g,"")}class p extends s{constructor(t,e,i){var n,o,r,s,h,l,a,c,p,d;super(t,e,i),this.option={color:null!==(n=e.color)&&void 0!==n?n:"#000",align:null!==(o=e.align)&&void 0!==o?o:"left",fontWeight:null!==(r=e.fontWeight)&&void 0!==r?r:"normal",fontStyle:null!==(s=e.fontStyle)&&void 0!==s?s:"normal",fontFamily:null!==(h=e.fontFamily)&&void 0!==h?h:"serial",fontSize:null!==(l=e.fontSize)&&void 0!==l?l:30,baseline:null!==(a=e.baseline)&&void 0!==a?a:"top",content:null!==(c=e.content)&&void 0!==c?c:"",width:null!==(p=e.width)&&void 0!==p?p:void 0,textDecoration:null!==(d=e.textDecoration)&&void 0!==d?d:"none"},this.option.content=u(this.option.content)}_layout(){var t;return{width:null!==(t=this.option.width)&&void 0!==t?t:this.painter.ctx.measureTextWidth(this.option.content,this.option.fontSize),height:this.option.fontSize}}paint({inTextBlock:t=!1}={}){this.painter.ctx.font=["normal"!=this.option.fontWeight&&this.option.fontWeight,"normal"!=this.option.fontStyle&&this.option.fontStyle,this.painter.upx2px(this.option.fontSize)+"px",this.option.fontFamily].filter(Boolean).join(" "),t||this.painter.ctx.setFillStyle(l(this,this.option.color)),this.painter.ctx.setFontSize(this.painter.upx2px(this.option.fontSize)),this.painter.ctx.setTextBaseline(this.option.baseline),this.painter.ctx.setTextAlign(this.option.align),this.painter.ctx.fillText(this.option.content,this.painter.upx2px(this.elementX),this.painter.upx2px(this.elementY)),console.debug("mp-painter:fillText:",this.option.content,"x=",this.elementX,"y=",this.elementY),this.paintTextDecoration()}paintTextDecoration(){"line-through"==this.option.textDecoration&&new c(this.painter,{top:this.elementY+.4*this.option.fontSize,left:this.elementX,dx:this.contentWidth,dy:0,color:this.option.color}).paint()}}class d{constructor(t){this.fontSize=t.fontSize,this.lineClamp=t.lineClamp||1/0,this.width=t.width,this.ctx=t.painter.ctx,this.painter=t.painter,this.content=t.content,this.lines=[],this.currentLineText="",this.position=0,this.endPostion=this.position,this.isOverflow=!1,this.isDry=!1,this.isFull=!1}split(){return this.painter.ctx.setFontSize(this.fontSize),this.fillText(),this.lines}minCharNumberInWidth(t){return Math.ceil(t/this.fontSize)}freeSpaceInCurrentLine(){if(this.currentLineText.length){let t=this.painter.ctx.measureTextWidth(this.currentLineText,this.fontSize);return this.width-(t||0)}return this.width}adjustCharNumberInCurrentLine(t){let e=this.currentLineText.length+t,i=this.content.length;e=Math.min(e,i),this.isDry=e==i,this.currentLineText=this.content.slice(0,e)}commitLine(){this.content=this.content.slice(this.currentLineText.length),this.lines.push(this.currentLineText),this.currentLineText="",this.lines.length==this.lineClamp&&(this.isFull=!0,0==this.isDry&&(this.isOverflow=!0))}handleOverflow(){let t=this.lines.pop();t=t.substring(0,Math.max(0,t.length-1))+"...",this.lines.push(t)}fillText(){let t=this.freeSpaceInCurrentLine();if(t<=0){if(this.adjustCharNumberInCurrentLine(-1),this.commitLine(),this.isOverflow&&this.handleOverflow(),this.isFull)return;t=this.freeSpaceInCurrentLine()}else if(this.isDry)return void this.commitLine();let e=this.minCharNumberInWidth(t);this.adjustCharNumberInCurrentLine(e),this.fillText()}}var f=function(t,e,i,n){return new(i||(i=Promise))((function(o,r){function s(t){try{l(n.next(t))}catch(t){r(t)}}function h(t){try{l(n.throw(t))}catch(t){r(t)}}function l(t){var e;t.done?o(t.value):(e=t.value,e instanceof i?e:new i((function(t){t(e)}))).then(s,h)}l((n=n.apply(t,e||[])).next())}))};class m extends s{constructor(t,e,i){var n,o,r,s,h,l,a;super(t,e,i),this.option=Object.assign(Object.assign({},e),{width:null!==(n=e.width)&&void 0!==n?n:100,height:null!==(o=e.height)&&void 0!==o?o:"auto",fontSize:null!==(r=e.fontSize)&&void 0!==r?r:30,content:null!==(s=e.content)&&void 0!==s?s:"",lineHeight:null!==(h=e.lineHeight)&&void 0!==h?h:40,lineClamp:null!==(l=e.lineClamp)&&void 0!==l?l:0,color:null!==(a=e.color)&&void 0!==a?a:"black"}),this.lines=[],this.option.content=u(this.option.content)}_layout(){return this.lines=new d({fontSize:this.option.fontSize,lineClamp:this.option.lineClamp,width:this.option.width,painter:this.painter,content:this.option.content}).split(),{width:this.option.width,height:"auto"==this.option.height?(this.lines.length-1)*this.option.lineHeight+this.option.fontSize:this.option.height}}paint(){return f(this,void 0,void 0,(function*(){this.painter.ctx.setFillStyle(l(this,this.option.color)),this.lines.map((t,e)=>{const i=Object.assign(Object.assign({},this.option),{type:"text",top:this.elementY+e*this.option.lineHeight,left:this.elementX,position:this.position,content:t});return new p(this.painter,i)}).forEach(t=>t.paint({inTextBlock:!0}))}))}}function x(t){let e=new Map;return function(i){return e.has(i)||e.set(i,t(i)),e.get(i)}}function w(){let t=!1;const e=t=>{let e=Object.getOwnPropertyDescriptors(Object.getPrototypeOf(t)),i={};for(let t in e){const n=e[t],o={};o.enumerable=n.enumerable,o.configurable=n.configurable,n.value&&"function"==typeof n.value&&(o.value=function(...t){return n.value.call(this.context,...t)}),n.value&&"function"!=typeof n.value&&(o.get=function(){return this.context[t]},o.set=function(e){this.context[t]=e}),n.get&&(o.get=function(){var t;return null===(t=n.get)||void 0===t?void 0:t.call(this.context)}),n.set&&(o.set=function(t){var e;null===(e=n.set)||void 0===e||e.call(this.context,t)}),i[t]=o}return Object.defineProperties({},i)},i=function(n){if(!(this instanceof i))throw new Error("mp-painter: `this` is not instance of `constructor`");if(this.context=n,!t)for(let n=this,o=Object.getPrototypeOf(n);null!==o;n=o,o=Object.getPrototypeOf(n))if(n.constructor===i){Object.setPrototypeOf(n,e(this.context)),t=!0;break}};return i}var v=function(t,e,i,n){return new(i||(i=Promise))((function(o,r){function s(t){try{l(n.next(t))}catch(t){r(t)}}function h(t){try{l(n.throw(t))}catch(t){r(t)}}function l(t){var e;t.done?o(t.value):(e=t.value,e instanceof i?e:new i((function(t){t(e)}))).then(s,h)}l((n=n.apply(t,e||[])).next())}))};class y extends(w()){constructor(t,e){super(e),this.painter=t}draw(t,e){e()}setFillStyle(t){super.fillStyle=t}setStrokeStyle(t){super.strokeStyle=t}drawImageWithSrc(t,e,i,n,o,r,s,h,l){const a=Object.create(null,{drawImage:{get:()=>super.drawImage}});return v(this,void 0,void 0,(function*(){let c=yield g(t);"number"==typeof r&&"number"==typeof s&&"number"==typeof h&&"number"==typeof l?a.drawImage.call(this,c,e,i,n,o,r,s,h,l):a.drawImage.call(this,c,e,i,n,o)}))}setTextAlign(t){super.textAlign=t}setTextBaseline(t){super.textBaseline="normal"===t?"alphabetic":t}setFontSize(t){var e,i;console.debug("set font size for h5, before is %s after is %s",super.font,null===(e=super.font)||void 0===e?void 0:e.replace(/\b\w+px\b/,this.painter.upx2px(t)+"px sans-serif")),super.font=null===(i=super.font)||void 0===i?void 0:i.replace(/\b\w+px\b/,this.painter.upx2px(t)+"px")}measureTextWidth(t,e){this.setFontSize(e);let i=this.measureText(t).width;return console.debug('measureText: result of measure text "%s" with font size %s is %s',t,this.font,i),null!=i?i:0}}function g(t){let e=new Image;return e.src=t,new Promise(t=>e.addEventListener("load",i=>t(e),{once:!0}))}var b=function(t,e,i,n){return new(i||(i=Promise))((function(o,r){function s(t){try{l(n.next(t))}catch(t){r(t)}}function h(t){try{l(n.throw(t))}catch(t){r(t)}}function l(t){var e;t.done?o(t.value):(e=t.value,e instanceof i?e:new i((function(t){t(e)}))).then(s,h)}l((n=n.apply(t,e||[])).next())}))};const S=x((function(t){return b(this,void 0,void 0,(function*(){try{let{width:i=100,height:n=100}=yield(e=uni.getImageInfo,function(t={}){return new Promise((i,n)=>{t.success=i,t.fail=n,e(t)})})({src:t});return{width:i,height:n}}catch(t){return console.log("mp-painter:getImageOriginSize: fail, use default size: width = 100, height = 100"),{width:100,height:100}}var e}))})),T=x((function(t){return b(this,void 0,void 0,(function*(){let e=yield g(t);return{width:e.naturalWidth,height:e.naturalHeight}}))}));class W extends s{constructor(t,e,i){var n,o,r,s;super(t,e,i),this.option={width:null!==(n=e.width)&&void 0!==n?n:100,height:null!==(o=e.height)&&void 0!==o?o:100,objectFit:null!==(r=e.objectFit)&&void 0!==r?r:"fill",objectPosition:null!==(s=e.objectPosition)&&void 0!==s?s:["center","center"],src:e.src}}_layout(){return{width:this.option.width,height:this.option.height}}paint(){return b(this,void 0,void 0,(function*(){let t=this.painter.upx2px;if(!this.option.src)return;let e=yield function(t,e){return b(this,void 0,void 0,(function*(){let i=t.platform;return"h5"!=i&&/^\./.test(e.src)||"h5"!=i&&/^\/static/.test(e.src)||"h5"!=i&&/^data:image\//.test(e.src)||"mp-alipay"==i&&/^https:\/\/resource\//.test(e.src)||"mp-weixin"==i&&/^wxfile:/.test(e.src)||"mp-baidu"==i&&/^bdfile:\/\/tmp/.test(e.src)?e.src:(console.log("mp-painter:绘制图片: 下载图片文件:",e.src),"h5"==i?e.src:yield(n=e.src,new Promise((t,e)=>o.downloadFile({url:n,success:e=>t(e.tempFilePath),fail:e}))).catch(t=>(console.log("mp-painter:下载错误: ",t),"")));var n}))}(this.painter,this.option);if(e)if(console.log("mp-painter:调用小程序drawImage，使用:",e),"fill"!=this.option.objectFit){let{sx:i,sy:n,sh:o,sw:r,dx:s,dy:h,dh:l,dw:a}=function(t,e,i){var n,o;let r=e.width/e.height,s=i.width/i.height,h=1;if(r>s&&"contain"==t.objectFit||r<=s&&"cover"==t.objectFit)h=i.width/e.width;else{if(!(r>s&&"cover"==t.objectFit||r<=s&&"contain"==t.objectFit))throw new Error("Unkonwn concreteScale");h=i.height/e.height}let l=e.width*h,a=e.height*h,c={left:0,center:.5,right:1}[(null===(n=t.objectPosition)||void 0===n?void 0:n[0])||"center"],u={top:0,center:.5,bottom:1}[(null===(o=t.objectPosition)||void 0===o?void 0:o[1])||"center"],p=(i.width-l)*c,d=(i.height-a)*u,f=(t,e)=>[(t-p)/h,(e-d)/h],[m,x]=f(0,0),[w,v]=f(i.width,i.height);return{sx:Math.max(m,0),sy:Math.max(x,0),sw:Math.min(w-m,e.width),sh:Math.min(v-x,e.height),dx:Math.max(p,0),dy:Math.max(d,0),dw:Math.min(l,i.width),dh:Math.min(a,i.height)}}({objectFit:this.option.objectFit,objectPosition:this.option.objectPosition},yield("h5"==this.painter.platform?T:S)(e),{width:this.option.width,height:this.option.height});this.painter.ctx.drawImageWithSrc(e,i,n,r,o,t(s+this.elementX),t(h+this.elementY),t(a),t(l))}else this.painter.ctx.drawImageWithSrc(e,t(this.elementX),t(this.elementY),t(this.option.width),t(this.option.height))}))}}class O extends class{constructor(t,e){var i,n;this.element=t,this.left=null!==(i=e.left)&&void 0!==i?i:0,this.top=null!==(n=e.top)&&void 0!==n?n:0}get painter(){return this.element.painter}get pathX(){return this.element.elementX+this.left}get pathY(){return this.element.elementY+this.top}}{constructor(t,e){super(t,e),this.option=e,this.option.borderRadius&&this.assertBorderRadius()}assertBorderRadius(){this.normalizedBorderRadius.some(t=>t<0)&&(console.warn("mp-painter:border radius must greater than 0, got:",this.normalizedBorderRadius.join(",")),this.option.borderRadius=0)}paint(){this.reduceBorderRadius();const{ctx:t,upx2px:e}=this.painter,i=e(this.pathX),n=e(this.pathY),o=e(this.option.height),r=e(this.option.width),[s,h,l,a]=this.normalizedBorderRadius.map(t=>e(t));t.beginPath(),t.moveTo(i,n+s),t.arcTo(i,n,i+s,n,s),t.arcTo(i+r,n,i+r,n+h,h),t.arcTo(i+r,n+o,i+r-l,n+o,l),t.arcTo(i,n+o,i,n+o-a,a),t.closePath()}get normalizedBorderRadius(){return"number"==typeof this.option.borderRadius?Array.from({length:4}).fill(this.option.borderRadius):[...this.option.borderRadius]}reduceBorderRadius(){let[t,e,i,n]=this.normalizedBorderRadius,o=Math.min(this.option.width/(t+e),this.option.height/(e+i),this.option.width/(n+i),this.option.height/(t+n));o>=1||(this.option.borderRadius=this.normalizedBorderRadius.map(t=>t*o))}}function P(t,e){switch(e.type){case"rounded-rect":return new O(t,e);default:throw new Error("Unkwon option type")}}class j extends s{constructor(t,e,i){var n,o,r,s,h,l,a;super(t,e,i),this.option={width:null!==(n=e.width)&&void 0!==n?n:100,height:null!==(o=e.height)&&void 0!==o?o:100,borderRadius:null!==(r=e.borderRadius)&&void 0!==r?r:0,background:null!==(s=e.background)&&void 0!==s?s:"transparent",borderStyle:null!==(h=e.borderStyle)&&void 0!==h?h:"solid",borderWidth:null!==(l=e.borderWidth)&&void 0!==l?l:0,borderColor:null!==(a=e.borderColor)&&void 0!==a?a:"#000"}}_layout(){return{width:this.option.width,height:this.option.height}}paint(){(this.shouldFill||this.shouldStroke)&&(this.option.borderRadius?this.paintByPath():this.paintByRect())}get shouldFill(){return"trasparent"!==this.option.background}get shouldStroke(){return this.option.borderWidth>0}applyFillStyle(){this.painter.ctx.setFillStyle(l(this,this.option.background))}applyStrokeStyle(){var t,e;this.painter.ctx.setLineDash((t=this.option.borderStyle,{dashed:[e=this.option.borderWidth,e],solid:[10,0]}[t])),this.painter.ctx.lineWidth=this.painter.upx2px(this.option.borderWidth),this.painter.ctx.setStrokeStyle(this.option.borderColor)}paintByRect(){let t=[this.painter.upx2px(this.elementX),this.painter.upx2px(this.elementY),this.painter.upx2px(this.option.width),this.painter.upx2px(this.option.height)];this.shouldFill&&(this.applyFillStyle(),this.painter.ctx.fillRect(...t)),this.shouldStroke&&(this.applyStrokeStyle(),this.painter.ctx.strokeRect(...t))}paintByPath(){P(this,{type:"rounded-rect",height:this.option.height,width:this.option.width,borderRadius:this.option.borderRadius}).paint(),this.shouldFill&&(this.painter.ctx.setFillStyle(l(this,this.option.background)),this.painter.ctx.fill()),this.shouldStroke&&(this.applyStrokeStyle(),this.painter.ctx.stroke())}}var k=function(t,e,i,n){return new(i||(i=Promise))((function(o,r){function s(t){try{l(n.next(t))}catch(t){r(t)}}function h(t){try{l(n.throw(t))}catch(t){r(t)}}function l(t){var e;t.done?o(t.value):(e=t.value,e instanceof i?e:new i((function(t){t(e)}))).then(s,h)}l((n=n.apply(t,e||[])).next())}))};class F extends s{constructor(t,e,i){var n,o,r,s;super(t,e,i),this.childOffsetTop=0,this.childOffsetLeft=0,this.option={direction:null!==(n=e.direction)&&void 0!==n?n:"vertical",width:null!==(o=e.width)&&void 0!==o?o:"auto",height:null!==(r=e.height)&&void 0!==r?r:"auto",children:null!==(s=e.children)&&void 0!==s?s:[]},this.children=this.option.children.map(t=>M(this.painter,t,this))}_layout(){return k(this,void 0,void 0,(function*(){return yield this.layoutChildren(),{width:this.calcContainerWidth(),height:this.calcContainerHeight()}}))}layoutChildren(){return k(this,void 0,void 0,(function*(){for(let t of this.children)yield this.layoutChild(t)}))}layoutChild(t){return k(this,void 0,void 0,(function*(){yield t.layout(),"absolute"!=t.position&&("vertical"==this.option.direction?(t.offsetTop=this.childOffsetTop,this.childOffsetTop+=t.offsetHeight):(t.offsetLeft=this.childOffsetLeft,this.childOffsetLeft+=t.offsetWidth))}))}calcContainerWidth(){if("number"==typeof this.option.width)return this.option.width;switch(this.option.direction){case"vertical":return this.childrenMaxWidth();case"horizontal":return this.childOffsetLeft;default:throw new TypeError("Unknown direction")}}calcContainerHeight(){if("number"==typeof this.option.height)return this.option.height;switch(this.option.direction){case"vertical":return this.childOffsetTop;case"horizontal":return this.childrenMaxHeight();default:throw new TypeError("Unknown direction")}}paint(){return k(this,void 0,void 0,(function*(){for(let t of this.children)yield t.paint()}))}childrenMaxWidth(){return Math.max(...this.children.map(t=>t.offsetWidth),0)}childrenMaxHeight(){return Math.max(...this.children.map(t=>t.offsetHeight),0)}}var z=function(t,e,i,n){return new(i||(i=Promise))((function(o,r){function s(t){try{l(n.next(t))}catch(t){r(t)}}function h(t){try{l(n.throw(t))}catch(t){r(t)}}function l(t){var e;t.done?o(t.value):(e=t.value,e instanceof i?e:new i((function(t){t(e)}))).then(s,h)}l((n=n.apply(t,e||[])).next())}))};class I extends s{constructor(t,e,i){super(t,e,i),this.contentElement=M(t,e.content,this),this.clipPath=P(this,e.path)}_layout(){return this.contentElement.layout()}paint(){return z(this,void 0,void 0,(function*(){this.painter.ctx.save(),yield this.clipPath.paint(),this.painter.ctx.clip(),yield this.contentElement.paint(),this.painter.ctx.restore()}))}}var C=function(t,e,i,n){return new(i||(i=Promise))((function(o,r){function s(t){try{l(n.next(t))}catch(t){r(t)}}function h(t){try{l(n.throw(t))}catch(t){r(t)}}function l(t){var e;t.done?o(t.value):(e=t.value,e instanceof i?e:new i((function(t){t(e)}))).then(s,h)}l((n=n.apply(t,e||[])).next())}))};class L extends s{constructor(t,e,i){var n,o;super(t,e,i),this.contentElement=M(t,e.content,this),this.transformOptions=null!==(n=e.transform)&&void 0!==n?n:[],this.transformOrigin=null!==(o=e.transformOrigin)&&void 0!==o?o:["center","center"]}_layout(){return this.contentElement.layout()}paint(){return C(this,void 0,void 0,(function*(){this.painter.ctx.save(),this.withTransformOrigin(()=>this.transform()),yield this.contentElement.paint(),this.painter.ctx.restore()}))}transform(){this.transformOptions.forEach(t=>this.singleTransform(t))}singleTransform(t){var e,i,n,o;switch(t.type){case"translate":return this.painter.ctx.translate(this.painter.upx2px(null!==(e=t.x)&&void 0!==e?e:0),this.painter.upx2px(null!==(i=t.y)&&void 0!==i?i:0));case"rotate":return this.painter.ctx.rotate(t.rotate/180*Math.PI);case"scale":return this.painter.ctx.scale(null!==(n=t.scaleWidth)&&void 0!==n?n:1,null!==(o=t.scaleHeight)&&void 0!==o?o:1);case"set-matrix":return this.painter.ctx.setTransform(t.scaleX,t.skewX,t.skewY,t.scaleY,this.painter.upx2px(t.translateX),this.painter.upx2px(t.translateY));default:throw new Error("Unknown transform type.")}}withTransformOrigin(t){const e={x:this.elementX+this.contentWidth*{left:0,center:.5,right:1}[this.transformOrigin[0]],y:this.elementY+this.contentHeight*{top:0,center:.5,bottom:1}[this.transformOrigin[1]]};this.singleTransform({type:"translate",x:e.x,y:e.y}),t(),this.singleTransform({type:"translate",x:-e.x,y:-e.y})}}function M(t,e,i){switch(e.type){case"text":return new p(t,e,i);case"text-block":return new m(t,e,i);case"image":return new W(t,e,i);case"line":return new c(t,e,i);case"rect":return new j(t,e,i);case"container":return new F(t,e,i);case"clip":return new I(t,e,i);case"transform":return new L(t,e,i);default:throw new TypeError("Unkown painter element type")}}let R=function(){var t;if("function"==typeof o.upx2px)return o.upx2px;let e=(null!==(t=o.getSystemInfoSync().screenWidth)&&void 0!==t?t:375)/750;return function(t){return t*e}}();const E=[.296,.313,.436,.638,.586,.89,.87,.256,.334,.334,.455,.742,.241,.433,.241,.427,.586,.586,.586,.586,.586,.586,.586,.586,.586,.586,.241,.241,.742,.742,.742,.483,1.031,.704,.627,.669,.762,.55,.531,.744,.773,.294,.396,.635,.513,.977,.813,.815,.612,.815,.653,.577,.573,.747,.676,1.018,.645,.604,.62,.334,.416,.334,.742,.448,.295,.553,.639,.501,.64,.567,.347,.64,.616,.266,.267,.544,.266,.937,.616,.636,.639,.64,.382,.463,.373,.616,.525,.79,.507,.529,.492,.334,.269,.334,.742,.296];var X=function(t,e,i,n){return new(i||(i=Promise))((function(o,r){function s(t){try{l(n.next(t))}catch(t){r(t)}}function h(t){try{l(n.throw(t))}catch(t){r(t)}}function l(t){var e;t.done?o(t.value):(e=t.value,e instanceof i?e:new i((function(t){t(e)}))).then(s,h)}l((n=n.apply(t,e||[])).next())}))};const Y=w();class B extends Y{constructor(t,e){super(e),this.painter=t}drawImageWithSrc(t,e,i,n,o,r,s,h,l){const a=Object.create(null,{drawImage:{get:()=>super.drawImage}});return X(this,void 0,void 0,(function*(){"number"==typeof r&&"number"==typeof s&&"number"==typeof h&&"number"==typeof l?a.drawImage.call(this,t,e,i,n,o,r,s,h,l):a.drawImage.call(this,t,e,i,n,o)}))}measureTextWidth(t,e){var i;return this.setFontSize(e),null!==(i=this.measureText(t).width)&&void 0!==i?i:0}}class H extends B{measureTextWidth(t,e){return t.split("").reduce((t,e)=>{let i=e.charCodeAt(0);return t+(E[i-32]||1)},0)*e}}var _=function(t,e,i,n){return new(i||(i=Promise))((function(o,r){function s(t){try{l(n.next(t))}catch(t){r(t)}}function h(t){try{l(n.throw(t))}catch(t){r(t)}}function l(t){var e;t.done?o(t.value):(e=t.value,e instanceof i?e:new i((function(t){t(e)}))).then(s,h)}l((n=n.apply(t,e||[])).next())}))};class D extends B{measureTextWidth(t,e){var i;return"top"==t&&console.log("measureText("+t+").width=",super.measureText(t).width),(null!==(i=super.measureText(t).width)&&void 0!==i?i:0)/10*e}drawImageWithSrc(t,e,i,n,o,r,s,h,l){const a=Object.create(null,{drawImageWithSrc:{get:()=>super.drawImageWithSrc}});return _(this,void 0,void 0,(function*(){"number"==typeof r&&"number"==typeof s&&"number"==typeof h&&"number"==typeof l?a.drawImageWithSrc.call(this,t,r,s,h,l,e,i,n,o):a.drawImageWithSrc.call(this,t,e,i,n,o)}))}}class U extends B{arcTo(t,e,i,n,o){return o<2?this.lineTo(t,e):super.arcTo(t,e,i,n,o)}measureTextWidth(t,e){return(t.includes("\n")||t.includes("\r"))&&console.warn(`mp-painter:measureText:字符串 "${t}" 中包含换行符，结果在 iPhone 上可能不准确`),super.measureTextWidth(t,e)}}i.d(e,"default",(function(){return A}));var N=function(t,e,i,n){return new(i||(i=Promise))((function(o,r){function s(t){try{l(n.next(t))}catch(t){r(t)}}function h(t){try{l(n.throw(t))}catch(t){r(t)}}function l(t){var e;t.done?o(t.value):(e=t.value,e instanceof i?e:new i((function(t){t(e)}))).then(s,h)}l((n=n.apply(t,e||[])).next())}))};class A{constructor(t,{platform:e=n,upx2px:i}={}){this.platform=e,this.upx2px=null!=i?i:R,"mp-alipay"==e&&(this.upx2px=t=>(null!=i?i:R)(2*t)),this.ctx=function(t,e){switch(t.platform){case"h5":return new y(t,e);case"mp-weixin":return new U(t,e);case"mp-alipay":return new H(t,e);case"mp-baidu":return new D(t,e);default:throw new Error("mp-painter: unexpect platform :"+t.platform)}}(this,t)}draw(t,e={}){return N(this,void 0,void 0,(function*(){let e=M(this,t),i=yield e.layout();return yield e.paint(),yield new Promise(t=>this.ctx.draw(!0,t)),yield function(t=0){return new Promise(e=>setTimeout(e,t))}(100),i}))}createElement(t){return M(this,t)}layout(t){return N(this,void 0,void 0,(function*(){return yield this.createElement(t).layout()}))}toJSON(){return"Painter Instance"}}}]);

dist/lib/value.d.ts

@@ -13,3 +13,4 @@ import { PainterElementOption } from "./painter-element/base";
 export declare type BaseLine = "top" | "middle" | "bottom" | "normal";
-export declare type BorderRadius = number | [number, number, number, number];
+export declare type BorderRadius = number | BorderRadius4;
+export declare type BorderRadius4 = [topLeft: number, topRight: number, bottomLeft: number, bottomRight: number];
 export declare type BorderStyle = "solid" | "dashed";
@@ -16,0 +17,0 @@ /** @example "#rrggbb" | "#rgb" | "colorName" */

package.json

 {
   "name": "mp-painter",
-  "version": "1.0.0-beta.1",
+  "version": "1.0.0",
   "description": "A declarative canvas lib using with mini-program, espacially with uniapp.",
@@ -41,3 +41,3 @@ "keywords": [
     "ts-loader": "^6.2.1",
-    "typescript": "^3.7.4",
+    "typescript": "^4.1.3",
     "webpack": "^4.41.6",
@@ -44,0 +44,0 @@ "webpack-cli": "^3.3.11"

readme.md

@@ -6,4 +6,4 @@ mp-painter
 ![build & deploy demo](https://github.com/xlfsummer/mp-painter/workflows/build%20&%20deploy%20demo/badge.svg)
-- 声明式地创建适用于 uniapp 和原生微信小程序的 canvas 海报
-- 目前对H5、微信、支付宝、百度端做了兼容处理，其它端还未调试过
+- 声明式地创建适用于 **Uniapp**, **原生微信小程序**, **原生H5**(beta) 的 canvas 海报
+- 目前对H5、微信、支付宝、百度端做了兼容处理，其它端未测试
 - 支持 text / rect / line / text-block / image 等对象绘制
@@ -23,2 +23,5 @@ - 支持基于文字宽度的多行文本换行，lineClamp 控制
 npm install mp-painter --save
+
+# 安装 beta 版
+npm install mp-painter@next --save
 ```
@@ -40,3 +43,3 @@
     type: "text",
-    color: "#fcc",
+    color: "#f33",
     fontSize: 60, // = 60rpx
@@ -52,2 +55,13 @@ content: "Hello World" //绘制的文本
 ![DEMO站点二维码](https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=https://mp-painter.xlf-summer.cn/)
+
+- 交互式体验：将下面的代码复制到 [Playground](https://mp-painter.xlf-summer.cn/#/pages/playground/playground) , 运行并查看效果
+```json
+{
+    "type": "text",
+    "color": "#f33",
+    "fontSize": 60,
+    "content": "Hello World"
+}
+```
+
 - 推荐通过查看在线 DEMO 站点与对应 DEMO 源码的方式理解和学习本插件

src/lib/painter-context/context-h5.ts

@@ -28,5 +28,8 @@ import Painter from "../painter";
         let image = await normalizeImageResource(imageResource);
-
-        if(dx && dy && dWidth && dHeight){
-            super.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);    
+        if(typeof dx === "number"
+            && typeof dy === "number"
+            && typeof dWidth === "number"
+            && typeof dHeight === "number"
+        ) {
+            super.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
         } else {
@@ -33,0 +36,0 @@ super.drawImage(image, sx, sy, sWidth, sHeight);

src/lib/painter-context/context-uni-mp-baidu.ts

@@ -13,3 +13,7 @@ import { PainterUniContext } from "./context-uni";
     async drawImageWithSrc(imageResource: string, sx: number, sy: number, sWidth: number, sHeigt: number, dx?: number, dy?: number, dWidth?: number, dHeight?: number){
-        if (dx && dy && dWidth && dHeight){
+        if (typeof dx === "number"
+            && typeof dy === "number"
+            && typeof dWidth === "number"
+            && typeof dHeight === "number"
+        ){
             super.drawImageWithSrc(imageResource, dx, dy, dWidth, dHeight, sx, sy, sWidth, sHeigt);
@@ -16,0 +20,0 @@ } else {

src/lib/painter-context/context-uni.ts

@@ -17,3 +17,7 @@ import Painter from "../painter";
     async drawImageWithSrc(imageResource: string, sx: number, sy: number, sWidth: number, sHeight: number, dx?: number, dy?: number, dWidth?: number, dHeight?: number){
-        if(dx && dy && dWidth && dHeight){
+        if(typeof dx === "number"
+            && typeof dy === "number"
+            && typeof dWidth === "number"
+            && typeof dHeight === "number"
+        ){
             super.drawImage(imageResource, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);    
@@ -20,0 +24,0 @@ } else {

src/lib/painter-element/element-rect.ts

@@ -97,5 +97,4 @@ import Painter from "../painter";
       this.painter.upx2px(this.option.height)
-    ];;
+    ];
 
-
     if(this.shouldFill){
@@ -102,0 +101,0 @@ this.applyFillStyle();

src/lib/painter-element/element-text-block.ts

@@ -65,3 +65,4 @@ import Painter from "../painter";
       this.lines.map((line, row) => {
-        let option = {
+
+        const option = {
           ...this.option,
@@ -74,6 +75,7 @@ type: "text",
         } as PainterTextElementOption
-        let t = new PainterTextElement(this.painter, option);
-        t.paint({ inTextBlock: true });
-      });
+        
+        return new PainterTextElement(this.painter, option);
+
+      }).forEach(text => text.paint({ inTextBlock: true }));
     }
   }

src/lib/painter-path/path-rounded-rect.ts

 import { PainterPath, PainterPathOption,  } from "./base";
-import { BorderRadius } from "../value";
+import { BorderRadius, BorderRadius4 } from "../value";
 import { PainterElement } from "../painter-element/base";
@@ -29,3 +29,3 @@
         if(this.normalizedBorderRadius.some(radius => radius < 0)){
-            console.warn("border radius must greater than 0, got:", this.normalizedBorderRadius.join(","));
+            console.warn("mp-painter:border radius must greater than 0, got:", this.normalizedBorderRadius.join(","));
             this.option.borderRadius = 0;
@@ -38,46 +38,54 @@ }
 
-        let [leftTopRadius, rightTopRadius, rightBottomRaidus, leftBottomRadius] = this.normalizedBorderRadius;
-        let { ctx, upx2px } = this.painter;
+        const { ctx, upx2px } = this.painter;
+        
+        const uX = upx2px(this.pathX);
+        const uY = upx2px(this.pathY);
+        const uH = upx2px(this.option.height);
+        const uW = upx2px(this.option.width);
+
+        const [
+          uTopLeftR,
+          uTopRightR,
+          uBottomRightR,
+          uBottomLeftR
+        ] = this.normalizedBorderRadius.map(r => upx2px(r));
     
         ctx.beginPath();
-    
+
+        //  ╭─────╮
+        // →│1   2|
+        //  │     |
+        //  │4   3|
+        //  ╰─────╯
+
         ctx.moveTo(
-          upx2px(this.pathX),
-          upx2px(this.pathY + leftTopRadius)
+          uX,                       uY + uTopLeftR
         );
-    
-        // left top
-        this.painter.ctx.arcTo(
-          upx2px(this.pathX),
-          upx2px(this.pathY),
-          upx2px(this.pathX + leftTopRadius),
-          upx2px(this.pathY),
-          upx2px(leftTopRadius)
+
+        // top left
+        ctx.arcTo(
+          uX,                       uY,
+          uX + uTopLeftR,           uY,
+          uTopLeftR
         );
     
-        // right top
-        this.painter.ctx.arcTo(
-          upx2px(this.pathX + this.option.width),
-          upx2px(this.pathY),
-          upx2px(this.pathX + this.option.width),
-          upx2px(this.pathY + rightTopRadius),
-          upx2px(rightTopRadius)
+        // top right
+        ctx.arcTo(
+          uX + uW,                  uY,
+          uX + uW,                  uY + uTopRightR,
+          uTopRightR
         );
     
-        // right bottom
-        this.painter.ctx.arcTo(
-          upx2px(this.pathX + this.option.width),
-          upx2px(this.pathY + this.option.height),
-          upx2px(this.pathX + this.option.width - rightBottomRaidus),
-          upx2px(this.pathY + this.option.height),
-          upx2px(rightBottomRaidus)
+        // bottom right
+        ctx.arcTo(
+          uX + uW,                  uY + uH,
+          uX + uW - uBottomRightR,  uY + uH,
+          uBottomRightR
         );
     
-        // left bottom
-        this.painter.ctx.arcTo(
-          upx2px(this.pathX),
-          upx2px(this.pathY + this.option.height),
-          upx2px(this.pathX),
-          upx2px(this.pathY + this.option.height - leftBottomRadius),
-          upx2px(leftBottomRadius)
+        // bottom left
+        ctx.arcTo(
+          uX,                       uY + uH,
+          uX,                       uY + uH - uBottomLeftR,
+          uBottomLeftR
         )
@@ -88,7 +96,7 @@
 
-    private get normalizedBorderRadius(): [number, number, number, number]{
+    private get normalizedBorderRadius(): BorderRadius4 {
         if(typeof this.option.borderRadius == "number"){
-          return Array.from({ length: 4 }).fill(this.option.borderRadius) as [number, number, number, number];
+          return Array.from({ length: 4 }).fill(this.option.borderRadius) as BorderRadius4;
         } else {
-          return [...this.option.borderRadius] as [number, number, number, number];
+          return [...this.option.borderRadius];
         }
@@ -104,12 +112,14 @@ }
     private reduceBorderRadius(){
-        let [leftTopRadius, rightTopRadius, rightBottomRaidus, leftBottomRadius] = this.normalizedBorderRadius;
+
+        let [topLeftR, topRightR, bottomRightR, bottomLeftR] = this.normalizedBorderRadius;
+
         let f = Math.min(
         // top
-        this.option.width / (leftTopRadius + rightTopRadius),
+        this.option.width  / (topLeftR    + topRightR),
         // right
-        this.option.height / (rightTopRadius + rightBottomRaidus),
+        this.option.height / (topRightR   + bottomRightR),
         // bottom
-        this.option.width / (leftBottomRadius + rightBottomRaidus),
+        this.option.width  / (bottomLeftR + bottomRightR),
         // left
-        this.option.height / (leftTopRadius + leftBottomRadius)
+        this.option.height / (topLeftR    + bottomLeftR)
         );
@@ -119,4 +129,4 @@
 
-        this.option.borderRadius = this.normalizedBorderRadius.map(radius => radius * f) as [number, number, number, number];
+        this.option.borderRadius = this.normalizedBorderRadius.map(radius => radius * f) as BorderRadius4;
     }
 }

src/lib/painter.ts

@@ -56,6 +56,9 @@ import { delay } from "../utils/delay";
 
-  /** 获取指定元素的尺寸 */
+  /** 获取指定元素的内部尺寸, 结果不包含元素的 left 和 top */
   async layout(elementOption: BuiltInPainterElementOption){
     return await this.createElement(elementOption).layout();
   }
-}
+
+  /** 兼容将 painter 实例保存在 uniapp this 上, 勿手动调用 */
+  toJSON(){ return "Painter Instance" }
+}

src/lib/value.ts

@@ -16,3 +16,4 @@ import { PainterElementOption } from "./painter-element/base";
 export type BaseLine = "top" | "middle" | "bottom" | "normal";
-export type BorderRadius = number | [number, number, number, number]
+export type BorderRadius = number | BorderRadius4;
+export type BorderRadius4 = [topLeft: number, topRight: number, bottomLeft: number, bottomRight: number];
 export type BorderStyle = "solid" | "dashed";
@@ -36,3 +37,3 @@ /** @example "#rrggbb" | "#rgb" | "colorName" */
 
-export type OmitBaseOption<T> = Omit<T, keyof PainterElementOption>
+export type OmitBaseOption<T> = Omit<T, keyof PainterElementOption>;
 
@@ -46,2 +47,2 @@
     return map[borderStyle];
-}
+};

src/utils/delay.spec.ts

@@ -12,4 +12,4 @@ import { delay } from "./delay";
         timer += Date.now()
-        expect(timer).toBeCloseTo(1000, -1);
+        expect(timer).toBeCloseTo(1000, -2);
     });
 });

src/utils/promiseQueue.spec.ts

@@ -22,3 +22,3 @@ import { promiseQueue } from "./promiseQueue";
         time += Date.now();
-        expect(time).toBeCloseTo(600, -1);
+        expect(time).toBeCloseTo(600, -2);
     });
@@ -25,0 +25,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Deprecated

Maintenance

The maintainer of the package marked it as deprecated. This could indicate that a single version should not be used, or that the package is no longer maintained and any new vulnerabilities will not be fixed.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

128673

increased by1.65%

Number of package files

85

increased by1.19%

Lines of code

2450

increased by1.41%

Number of low quality alerts

0

decreased by-100%

Number of lines in readme file

64

increased by28%

Worsened metrics

Number of medium maintenance alerts

1

increased byInfinity%

No dependency changes