wux-weapp
Version:
一套组件化、可复用、易扩展的微信小程序 UI 组件库
1 lines • 3.99 kB
JavaScript
;var _observers,_baseComponent=_interopRequireDefault(require("../helpers/baseComponent")),_classNames2=_interopRequireDefault(require("../helpers/libs/classNames")),_styleToCssString=_interopRequireDefault(require("../helpers/libs/styleToCssString")),_useNativeAPI=require("../helpers/hooks/useNativeAPI"),_useCanvasAPI=require("../helpers/hooks/useCanvasAPI");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function _defineProperty(e,t,a){return t in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}(0,_baseComponent.default)({properties:{prefixCls:{type:String,value:"wux-water-mark"},content:{optionalTypes:[Array,String],type:String,value:""},fontColor:{type:String,value:"rgba(0, 0, 0, .15)"},fontStyle:{type:String,value:"normal"},fontFamily:{type:String,value:"sans-serif"},fontWeight:{type:String,value:"normal"},fontSize:{type:Number,value:14},fullPage:{type:Boolean,value:!0},gapX:{type:Number,value:24},gapY:{type:Number,value:48},width:{type:Number,value:120},height:{type:Number,value:64},image:{type:String,value:""},imageHeight:{type:Number,value:64},imageWidth:{type:Number,value:128},rotate:{type:Number,value:-22},zIndex:{type:Number,value:2e3}},data:{wrapStyle:"",base64Url:""},observers:(_observers={},_defineProperty(_observers,"zIndex, gapX, width, base64Url",function(){this.updateStyle.apply(this,arguments)}),_defineProperty(_observers,"prefixCls, gapX, gapY, rotate, fontStyle, fontWeight, width, height, fontFamily, fontColor, image, imageWidth, imageHeight, content, fontSize",function(){this.setBase64Url.apply(this,arguments)}),_observers),computed:{classes:["prefixCls, fullPage",function(e,t){return{wrap:(0,_classNames2.default)(e,_defineProperty({},"".concat(e,"--full-page"),t)),canvas:"".concat(e,"__canvas")}}]},methods:{setBase64Url:function(){for(var e=arguments.length,t=new Array(e),a=0;a<e;a++)t[a]=arguments[a];var r=t[0],n=t[1],i=t[2],o=t[3],s=t[4],l=t[5],u=t[6],f=t[7],g=t[8],p=t[9],h=t[10],c=t[11],v=t[12],m=t[13],y=t[14];this.createCanvasContext({prefixCls:r,gapX:n,gapY:i,rotate:o,fontStyle:s,fontWeight:l,width:u,height:f,fontFamily:g,fontColor:p,image:h,imageWidth:c,imageHeight:v,content:m,fontSize:y})},createCanvasContext:function(t){var a=this,e=t.prefixCls,u=t.gapX,f=t.gapY,g=t.rotate,p=t.fontStyle,h=t.fontWeight,c=t.width,v=t.height,m=t.fontFamily,y=t.fontColor,r=t.image,d=t.imageWidth,b=t.imageHeight,_=t.content,C=t.fontSize,n="".concat(e,"__canvas"),i=Promise.resolve();return r&&(i=i.then(function(){return(0,_useCanvasAPI.downloadImage)(r)})),i=(i=i.then(function(e){return function(l){return(0,_useCanvasAPI.getCanvasRef)(n,a).then(function(e){var a=e.getContext("2d"),t=(0,_useNativeAPI.getSystemInfoSync)(["window"]).pixelRatio,r=(u+c)*t,n=(f+v)*t,i=c*t,o=v*t;if(e.width=r,e.height=n,l)return a.translate(i/2,o/2),a.rotate(Math.PI/180*Number(g)),(0,_useCanvasAPI.createImage)({imageWidth:d,imageHeight:b,imageUrl:l},e).then(function(){return(0,_useCanvasAPI.toDataURL)({width:c,height:v},e).then(function(e){return a.restore(),e})});if(_){a.textBaseline="middle",a.textAlign="center",a.translate(i/2,o/2),a.rotate(Math.PI/180*Number(g));var s=Number(C)*t;return a.font="".concat(p," normal ").concat(h," ").concat(s,"px/").concat(o,"px ").concat(m),a.fillStyle=y,Array.isArray(_)?_.forEach(function(e,t){return a.fillText(e,0,t*s)}):a.fillText(_,0,0),(0,_useCanvasAPI.toDataURL)({width:c,height:v},e).then(function(e){return a.restore(),e})}})}(e)})).then(function(e){!function(e){t.base64Url!==e&&(a.setData({base64Url:e}),a.triggerEvent("load",{base64Url:e}))}(e)},function(e){a.triggerEvent("error",e)})},updateStyle:function(e,t,a,r){var n=(0,_styleToCssString.default)({zIndex:e,backgroundSize:"".concat(t+a,"px"),backgroundImage:r?"url('".concat(r,"')"):"unset"});this.setData({wrapStyle:n})}},ready:function(){var e=this.data,t=e.zIndex,a=e.gapX,r=e.width,n=e.base64Url;this.updateStyle(t,a,r,n),this.createCanvasContext(this.data)}});