xiaoe_mp_npm 0.1.13 → 0.1.14

package/src/SharePoster/createPoster/utils/drawImage.js

@@ -1,267 +1,267 @@
-import { TYPES, TEXT_OVERFLOW } from '../../libs/constant';
-export function drawImage(ctx, obj, proportion) {
-    let h = obj.height*proportion;
-    let w = obj.width*proportion;
-    let x = obj.x * proportion;
-    let y = obj.y * proportion;
-    ctx.beginPath();
-    // 恢复裁剪前的状态
-    ctx.restore();
-    ctx.save();
-    // 裁剪
-    if (obj.border) {
-        console.log(obj);
-        // 正方形
-        if (w === h) {
-            ctx.arc(
-                (w * proportion) / 2 + obj.x * proportion,
-                (w * proportion) / 2 + obj.y * proportion,
-                obj.border * proportion,
-                0,
-                Math.PI * 2,
-                true
-            );
-            ctx.clip();
-        }
-        // 圆角矩形图片
-        else {
-        }
-    } else {
-        if(obj.imgRoundType === 'halfRoundRect'){
-            ctx.moveTo(x,y+h);
-            ctx.lineTo(x,y+24);
-            ctx.quadraticCurveTo(x,y,x+24,y);
-            ctx.lineTo(x+w-24,y);
-            ctx.quadraticCurveTo(x+w,y,x+w,y+24);
-            ctx.lineTo(x+w,y+h);
-            ctx.lineTo(x,y+h);
-            ctx.lineWidth = 0.5;
-            ctx.stroke()
-            ctx.clip();
-        }else if(obj.imgRoundType === 'fullRoundRect'){
-            ctx.moveTo(x,y+h-24);
-            ctx.lineTo(x,y+24);
-            ctx.quadraticCurveTo(x,y,x+24,y);
-            ctx.lineTo(x+w-24,y);
-            ctx.quadraticCurveTo(x+w,y,x+w,y+24);
-            ctx.lineTo(x+w,y+h-24);
-            ctx.quadraticCurveTo(x+w,y+h,x+w-24,y+h);
-            ctx.lineTo(x+24,y+h);
-            ctx.quadraticCurveTo(x,y+h,x,y+h-24);
-            ctx.lineWidth = 0.5;
-            ctx.stroke()
-            ctx.clip();
-        }else if(obj.imgRoundType === 'top'){
-            ctx.moveTo(x, y + h);
-            ctx.lineTo(x, y + 24);
-            ctx.arcTo(x, y, x + 24, y, 24);
-            ctx.lineTo(x + w - 24, y);
-            ctx.arcTo(x + w, y, x + w, y + 24, 24);
-            ctx.lineTo(x + w, y + h);
-            ctx.lineTo(x, y + h);
-            ctx.lineWidth = 0.5;
-            ctx.stroke()
-            ctx.clip();
-        }
-    }
-    ctx.drawImage(
-        obj.imgOnload,
-        obj.x * proportion,
-        obj.y * proportion,
-        obj.width * proportion,
-        obj.height * proportion
-    );
-    ctx.closePath();
-    ctx.restore();  //恢复裁剪前的状态，不然会影响其它字体的显示 
-}
-export function drawBase64Img(ctx, obj, proportion, base64,canvas) {
-    let img = canvas.createImage()
-    img.src = base64;
-    obj.imgOnload = img;
-    drawImage(ctx, obj, proportion);
-}
-export function handleDefaultProps(props) {
-    const result = props;
-    switch (props.type) {
-    case TYPES.TEXT:
-        result.x = props.x || 0;
-        result.y = props.y || 0;
-        result.maxWidth = props.maxWidth || 400;
-        result.fontSize = props.size || 12;
-        result.lineHeight = props.lineHeight || props.size;
-        result.fontWeight = props.fontWeight || 'normal'; // normal lighter bold border
-        result.fontFamily = props.fontFamily || 'Arial,sans-serif';
-        result.color = props.color || 'black';
-        result.textBaseline = props.textBaseline || 'hanging';
-        result.textOverflow = props.textOverflow || TEXT_OVERFLOW.ELLIPSIS;
-        result.textStyle = props.textStyle || 'fill';
-        break;
-
-    case TYPES.IMG:
-        result.x = props.x || 0;
-        result.y = props.y || 0;
-        result.width = props.width;
-        result.height = props.height;
-        result.borderRadius = props.borderRadius || 0;
-        break;
-
-    case TYPES.BG_IMG:
-        result.x = 0;
-        result.y = 0;
-        result.width = this.width;
-        result.height = this.height;
-        result.borderRadius = props.borderRadius || 0;
-        break;
-
-    case TYPES.SHAPE:
-        result.x = props.x || 0;
-        result.y = props.y || 0;
-        result.color = props.color || 'black';
-        result.width = props.width;
-        result.height = props.height;
-        result.borderRadius = props.borderRadius || 0;
-        break;
-
-    default:
-        break;
-    }
-    return result;
-}
-export function drawText(ctx,obj) {
-    let { value, textOverflow } = handleDefaultProps(obj);
-    if (!value) return;
-
-    ctx.save();
-    initTextStyle(ctx,obj);
-
-    const drawFnMap = {
-        [TEXT_OVERFLOW.WRAP]: drawMultiLineWrapText,
-        [TEXT_OVERFLOW.ELLIPSIS]: drawSingleLineEllipsisText
-    };
-
-    const fn = drawFnMap[textOverflow];
-    if (fn) {
-        fn(obj,ctx);
-    } else {
-        ctx.beginPath();
-        fillText(value, obj,ctx);
-        ctx.closePath();
-    }
-    ctx.restore();
-}
-export function fillText(text, obj,ctx) {
-    let { x, y, color, textStyle, fontSize } = handleDefaultProps(obj);
-    ctx.fillText(text, x, y);
-    if (textStyle === 'stroke') {
-        const textWidth = ctx.measureText(text).width;
-        const strokeLineY = y +  fontSize / 2-5;
-        ctx.rect(x, strokeLineY, textWidth, 2);
-        ctx.fillStyle = color;
-        ctx.fill();
-    }
-}
-export function initTextStyle(ctx,obj) {
-    let { fontSize, fontWeight, fontFamily, color, textBaseline } = handleDefaultProps(obj);
-
-    ctx.fillStyle = color;
-    ctx.font = `${fontWeight} ${fontSize}px ${fontFamily}`;
-    ctx.textBaseline = textBaseline;
-}
-export function drawMultiLineWrapText (obj,ctx) {
-    ctx.beginPath();
-    let { value, x, y, lineHeight, fontSize, maxWidth } = handleDefaultProps(obj);
-    const charArr = value.split('');
-    let currentLineText = '';
-    for (let i = 0; i < charArr.length; i++) {
-        const char = charArr[i];
-        const { width } = ctx.measureText(`${currentLineText}${char}`);
-
-        if (width > maxWidth) {
-            ctx.fillText(currentLineText, x, y);
-            // 因为加上这个 char 使得当前行超出宽度限制，所以这个字符变成下一行的首字
-            currentLineText = char;
-            // y 加上行高
-            y += lineHeight;
-        } else {
-            currentLineText += char;
-        }
-    }
-    ctx.fillText(currentLineText, x, y);
-    ctx.closePath();
-};
-export function drawSingleLineEllipsisText ( obj,ctx) {
-    ctx.beginPath();
-    let { value, x, y, maxWidth } = handleDefaultProps(obj);
-    const charArr = value.split('');
-    let sumText = '';
-    for (let i = 0; i < charArr.length; i++) {
-        const char = charArr[i];
-        const { width } = ctx.measureText(`${sumText}${char}`);
-
-        if (width > maxWidth) {
-            sumText += '...';
-            ctx.fillText(sumText, x, y);
-            break;
-        } else {
-            sumText += char;
-        }
-    }
-    fillText(sumText, obj, ctx);
-    ctx.closePath();
-};
-export function roundRect( ctx,obj,proportion){
-    let shapes = ['fullRoundRect','diagonalRoundRect','topRoundRect','bottomRoundRect'];
-    let {x, y, width, height, r} = obj;
-    x = x * proportion;
-    y = y * proportion;
-    let w = width * proportion;
-    let h = height * proportion;
-    r = r * proportion;
-    let color = obj.color;
-    let shape = obj.shape;
-    if(w<2*r)r = w/2;
-    if(h<2*r)r = h/2;
-    ctx.beginPath();
-    // 恢复裁剪前的状态
-    ctx.restore();
-    ctx.save();
-    ctx.moveTo(x+r,y);
-    if(shape === shapes[0]){
-        //画四个角都是圆形
-        ctx.arcTo(x+w, y, x+w, y+h, r);
-        ctx.arcTo(x+w, y+h, x, y+h, r);
-        ctx.arcTo(x, y+h, x, y, r);
-        ctx.arcTo(x, y, x+w, y, r);
-    }else if(shape === shapes[1]){
-        //只有右上角和左下角为圆形
-        ctx.arcTo(x+w, y, x+w, y+h, r);
-        ctx.lineTo(x+w,y+h);
-        ctx.lineTo(x+r,y+h)
-        ctx.arcTo(x, y+h, x, y, r);
-        ctx.lineTo(x,y);
-        ctx.lineTo(x+r,y);
-    }else if (shape === shapes[2]) {
-        ctx.moveTo(x, y + h);
-        ctx.lineTo(x, y + r);
-        ctx.arcTo(x, y, x + r, y, r);
-        ctx.lineTo(x + w - r, y);
-        ctx.arcTo(x + w, y, x + w, y + r, r);
-        ctx.lineTo(x + w, y + h);
-        ctx.lineTo(x, y + h);
-        ctx.clip();
-    }else if (shape === shapes[3]) {
-        ctx.moveTo(x, y);
-        ctx.lineTo(x + w, y);
-        ctx.lineTo(x + w, y + h - r);
-        ctx.arcTo(x + w, y + h, x + w - r, y + h, r);
-        ctx.lineTo(x + r, y + h);
-        ctx.arcTo(x, y + h, x, y + h - r, r);
-        ctx.lineTo(x, y);
-        ctx.clip();
-    }
-    ctx.closePath();
-    ctx.lineWidth = h;
-    ctx.strokeStyle = color;
-    ctx.stroke();
-    ctx.restore();
-}
+import { TYPES, TEXT_OVERFLOW } from '../../libs/constant';
+export function drawImage(ctx, obj, proportion) {
+    let h = obj.height*proportion;
+    let w = obj.width*proportion;
+    let x = obj.x * proportion;
+    let y = obj.y * proportion;
+    ctx.beginPath();
+    // 恢复裁剪前的状态
+    ctx.restore();
+    ctx.save();
+    // 裁剪
+    if (obj.border) {
+        console.log(obj);
+        // 正方形
+        if (w === h) {
+            ctx.arc(
+                (w * proportion) / 2 + obj.x * proportion,
+                (w * proportion) / 2 + obj.y * proportion,
+                obj.border * proportion,
+                0,
+                Math.PI * 2,
+                true
+            );
+            ctx.clip();
+        }
+        // 圆角矩形图片
+        else {
+        }
+    } else {
+        if(obj.imgRoundType === 'halfRoundRect'){
+            ctx.moveTo(x,y+h);
+            ctx.lineTo(x,y+24);
+            ctx.quadraticCurveTo(x,y,x+24,y);
+            ctx.lineTo(x+w-24,y);
+            ctx.quadraticCurveTo(x+w,y,x+w,y+24);
+            ctx.lineTo(x+w,y+h);
+            ctx.lineTo(x,y+h);
+            ctx.lineWidth = 0.5;
+            ctx.stroke()
+            ctx.clip();
+        }else if(obj.imgRoundType === 'fullRoundRect'){
+            ctx.moveTo(x,y+h-24);
+            ctx.lineTo(x,y+24);
+            ctx.quadraticCurveTo(x,y,x+24,y);
+            ctx.lineTo(x+w-24,y);
+            ctx.quadraticCurveTo(x+w,y,x+w,y+24);
+            ctx.lineTo(x+w,y+h-24);
+            ctx.quadraticCurveTo(x+w,y+h,x+w-24,y+h);
+            ctx.lineTo(x+24,y+h);
+            ctx.quadraticCurveTo(x,y+h,x,y+h-24);
+            ctx.lineWidth = 0.5;
+            ctx.stroke()
+            ctx.clip();
+        }else if(obj.imgRoundType === 'top'){
+            ctx.moveTo(x, y + h);
+            ctx.lineTo(x, y + 24);
+            ctx.arcTo(x, y, x + 24, y, 24);
+            ctx.lineTo(x + w - 24, y);
+            ctx.arcTo(x + w, y, x + w, y + 24, 24);
+            ctx.lineTo(x + w, y + h);
+            ctx.lineTo(x, y + h);
+            ctx.lineWidth = 0.5;
+            ctx.stroke()
+            ctx.clip();
+        }
+    }
+    ctx.drawImage(
+        obj.imgOnload,
+        obj.x * proportion,
+        obj.y * proportion,
+        obj.width * proportion,
+        obj.height * proportion
+    );
+    ctx.closePath();
+    ctx.restore();  //恢复裁剪前的状态，不然会影响其它字体的显示 
+}
+export function drawBase64Img(ctx, obj, proportion, base64,canvas) {
+    let img = canvas.createImage()
+    img.src = base64;
+    obj.imgOnload = img;
+    drawImage(ctx, obj, proportion);
+}
+export function handleDefaultProps(props) {
+    const result = props;
+    switch (props.type) {
+    case TYPES.TEXT:
+        result.x = props.x || 0;
+        result.y = props.y || 0;
+        result.maxWidth = props.maxWidth || 400;
+        result.fontSize = props.size || 12;
+        result.lineHeight = props.lineHeight || props.size;
+        result.fontWeight = props.fontWeight || 'normal'; // normal lighter bold border
+        result.fontFamily = props.fontFamily || 'Arial,sans-serif';
+        result.color = props.color || 'black';
+        result.textBaseline = props.textBaseline || 'hanging';
+        result.textOverflow = props.textOverflow || TEXT_OVERFLOW.ELLIPSIS;
+        result.textStyle = props.textStyle || 'fill';
+        break;
+
+    case TYPES.IMG:
+        result.x = props.x || 0;
+        result.y = props.y || 0;
+        result.width = props.width;
+        result.height = props.height;
+        result.borderRadius = props.borderRadius || 0;
+        break;
+
+    case TYPES.BG_IMG:
+        result.x = 0;
+        result.y = 0;
+        result.width = this.width;
+        result.height = this.height;
+        result.borderRadius = props.borderRadius || 0;
+        break;
+
+    case TYPES.SHAPE:
+        result.x = props.x || 0;
+        result.y = props.y || 0;
+        result.color = props.color || 'black';
+        result.width = props.width;
+        result.height = props.height;
+        result.borderRadius = props.borderRadius || 0;
+        break;
+
+    default:
+        break;
+    }
+    return result;
+}
+export function drawText(ctx,obj) {
+    let { value, textOverflow } = handleDefaultProps(obj);
+    if (!value) return;
+
+    ctx.save();
+    initTextStyle(ctx,obj);
+
+    const drawFnMap = {
+        [TEXT_OVERFLOW.WRAP]: drawMultiLineWrapText,
+        [TEXT_OVERFLOW.ELLIPSIS]: drawSingleLineEllipsisText
+    };
+
+    const fn = drawFnMap[textOverflow];
+    if (fn) {
+        fn(obj,ctx);
+    } else {
+        ctx.beginPath();
+        fillText(value, obj,ctx);
+        ctx.closePath();
+    }
+    ctx.restore();
+}
+export function fillText(text, obj,ctx) {
+    let { x, y, color, textStyle, fontSize } = handleDefaultProps(obj);
+    ctx.fillText(text, x, y);
+    if (textStyle === 'stroke') {
+        const textWidth = ctx.measureText(text).width;
+        const strokeLineY = y +  fontSize / 2-5;
+        ctx.rect(x, strokeLineY, textWidth, 2);
+        ctx.fillStyle = color;
+        ctx.fill();
+    }
+}
+export function initTextStyle(ctx,obj) {
+    let { fontSize, fontWeight, fontFamily, color, textBaseline } = handleDefaultProps(obj);
+
+    ctx.fillStyle = color;
+    ctx.font = `${fontWeight} ${fontSize}px ${fontFamily}`;
+    ctx.textBaseline = textBaseline;
+}
+export function drawMultiLineWrapText (obj,ctx) {
+    ctx.beginPath();
+    let { value, x, y, lineHeight, fontSize, maxWidth } = handleDefaultProps(obj);
+    const charArr = value.split('');
+    let currentLineText = '';
+    for (let i = 0; i < charArr.length; i++) {
+        const char = charArr[i];
+        const { width } = ctx.measureText(`${currentLineText}${char}`);
+
+        if (width > maxWidth) {
+            ctx.fillText(currentLineText, x, y);
+            // 因为加上这个 char 使得当前行超出宽度限制，所以这个字符变成下一行的首字
+            currentLineText = char;
+            // y 加上行高
+            y += lineHeight;
+        } else {
+            currentLineText += char;
+        }
+    }
+    ctx.fillText(currentLineText, x, y);
+    ctx.closePath();
+};
+export function drawSingleLineEllipsisText ( obj,ctx) {
+    ctx.beginPath();
+    let { value, x, y, maxWidth } = handleDefaultProps(obj);
+    const charArr = value.split('');
+    let sumText = '';
+    for (let i = 0; i < charArr.length; i++) {
+        const char = charArr[i];
+        const { width } = ctx.measureText(`${sumText}${char}`);
+
+        if (width > maxWidth) {
+            sumText += '...';
+            ctx.fillText(sumText, x, y);
+            break;
+        } else {
+            sumText += char;
+        }
+    }
+    fillText(sumText, obj, ctx);
+    ctx.closePath();
+};
+export function roundRect( ctx,obj,proportion){
+    let shapes = ['fullRoundRect','diagonalRoundRect','topRoundRect','bottomRoundRect'];
+    let {x, y, width, height, r} = obj;
+    x = x * proportion;
+    y = y * proportion;
+    let w = width * proportion;
+    let h = height * proportion;
+    r = r * proportion;
+    let color = obj.color;
+    let shape = obj.shape;
+    if(w<2*r)r = w/2;
+    if(h<2*r)r = h/2;
+    ctx.beginPath();
+    // 恢复裁剪前的状态
+    ctx.restore();
+    ctx.save();
+    ctx.moveTo(x+r,y);
+    if(shape === shapes[0]){
+        //画四个角都是圆形
+        ctx.arcTo(x+w, y, x+w, y+h, r);
+        ctx.arcTo(x+w, y+h, x, y+h, r);
+        ctx.arcTo(x, y+h, x, y, r);
+        ctx.arcTo(x, y, x+w, y, r);
+    }else if(shape === shapes[1]){
+        //只有右上角和左下角为圆形
+        ctx.arcTo(x+w, y, x+w, y+h, r);
+        ctx.lineTo(x+w,y+h);
+        ctx.lineTo(x+r,y+h)
+        ctx.arcTo(x, y+h, x, y, r);
+        ctx.lineTo(x,y);
+        ctx.lineTo(x+r,y);
+    }else if (shape === shapes[2]) {
+        ctx.moveTo(x, y + h);
+        ctx.lineTo(x, y + r);
+        ctx.arcTo(x, y, x + r, y, r);
+        ctx.lineTo(x + w - r, y);
+        ctx.arcTo(x + w, y, x + w, y + r, r);
+        ctx.lineTo(x + w, y + h);
+        ctx.lineTo(x, y + h);
+        ctx.clip();
+    }else if (shape === shapes[3]) {
+        ctx.moveTo(x, y);
+        ctx.lineTo(x + w, y);
+        ctx.lineTo(x + w, y + h - r);
+        ctx.arcTo(x + w, y + h, x + w - r, y + h, r);
+        ctx.lineTo(x + r, y + h);
+        ctx.arcTo(x, y + h, x, y + h - r, r);
+        ctx.lineTo(x, y);
+        ctx.clip();
+    }
+    ctx.closePath();
+    ctx.lineWidth = h;
+    ctx.strokeStyle = color;
+    ctx.stroke();
+    ctx.restore();
+}

package/src/SharePoster/createPoster/utils/util.js

@@ -1,40 +1,40 @@
-export function verfiyObjEmpty(obj) {
-    if (Object.prototype.toString(obj) !== '[object Object]') {
-        console.error('objToPoster的第一个参数必须为一个对象');
-        return;
-    }
-    if (JSON.stringify(obj) === '{}' && !Object.getOwnPropertySymbols(obj).length) {
-        console.error('objToPoster的第一个参数不能为空对象');
-        return;
-    }
-}
-// 因为旧设备兼容问题iphone5s等旧机型使用 Promise.allSettled 报错，所以单独实现一个allSettled
-export function PromiseAllSettled(promises = []) {
-    if (!promises.length) return Promise.resolve([]);
-
-    return new Promise(resolve => {
-        let count = promises.length;
-        const results = [];
-        for (let i = 0; i < promises.length; i++) {
-            promises[i].then(
-                value => {
-                    results[i] = {
-                        status: 'fulfilled',
-                        value
-                    };
-                    count--;
-                    if (count <= 0) resolve(results);
-                },
-                reason => {
-                    results[i] = {
-                        status: 'rejected',
-                        reason
-                    };
-                    count--;
-                    if (count <= 0) resolve(results);
-                }
-            );
-        }
-    });
-}
-
+export function verfiyObjEmpty(obj) {
+    if (Object.prototype.toString(obj) !== '[object Object]') {
+        console.error('objToPoster的第一个参数必须为一个对象');
+        return;
+    }
+    if (JSON.stringify(obj) === '{}' && !Object.getOwnPropertySymbols(obj).length) {
+        console.error('objToPoster的第一个参数不能为空对象');
+        return;
+    }
+}
+// 因为旧设备兼容问题iphone5s等旧机型使用 Promise.allSettled 报错，所以单独实现一个allSettled
+export function PromiseAllSettled(promises = []) {
+    if (!promises.length) return Promise.resolve([]);
+
+    return new Promise(resolve => {
+        let count = promises.length;
+        const results = [];
+        for (let i = 0; i < promises.length; i++) {
+            promises[i].then(
+                value => {
+                    results[i] = {
+                        status: 'fulfilled',
+                        value
+                    };
+                    count--;
+                    if (count <= 0) resolve(results);
+                },
+                reason => {
+                    results[i] = {
+                        status: 'rejected',
+                        reason
+                    };
+                    count--;
+                    if (count <= 0) resolve(results);
+                }
+            );
+        }
+    });
+}
+