commit message

js_sdk/u-draw-poster/extends/draw-function/draw-image-fit.d.ts

@@ -0,0 +1,12 @@
+import { DrawPosterUseCtxOpts } from '../../utils/interface';
+import { ObjectFit, ObjectPosition, Size } from "../../utils/object-sizing";
+export interface ImageFitOption {
+    radius?: number;
+    objectFit?: ObjectFit;
+    intrinsicSize?: Size;
+    specifiedSize?: Size;
+    intrinsicPosition?: ObjectPosition;
+    specifiedPosition?: [number, number];
+}
+declare const _default: DrawPosterUseCtxOpts;
+export default _default;

js_sdk/u-draw-poster/extends/draw-function/draw-image-fit.js

@@ -0,0 +1,25 @@
+import { calculateConcreteRect } from "../../utils/object-sizing";
+import uni from "../../utils/global";
+export default {
+    name: 'drawImageFit',
+    handle: async (canvas, ctx, url, options) => {
+        var _a, _b, _c;
+        const [error, imageInfo] = await uni.getImageInfo({ src: url });
+        // 配置默认值
+        const style = Object.assign({ radius: 0, objectFit: 'cover', intrinsicSize: { width: (_a = imageInfo === null || imageInfo === void 0 ? void 0 : imageInfo.width) !== null && _a !== void 0 ? _a : 100, height: (_b = imageInfo === null || imageInfo === void 0 ? void 0 : imageInfo.height) !== null && _b !== void 0 ? _b : 100 }, specifiedSize: { width: 100, height: 100 }, intrinsicPosition: ['center', 'center'], specifiedPosition: [0, 0] }, options);
+        // 计算图片尺寸
+        const drawImageInfo = calculateConcreteRect(style, style.intrinsicSize, style.specifiedSize);
+        // 如有圆角, 则进行裁剪
+        if (style.radius > 0) {
+            ctx.save();
+            (_c = ctx.setFillStyle) === null || _c === void 0 ? void 0 : _c.call(ctx, 'transparent');
+            ctx.fillStyle = 'transparent';
+            ctx.fillRoundRect(style.specifiedPosition[0], style.specifiedPosition[1], style.specifiedSize.width, style.specifiedSize.height, style.radius);
+            ctx.clip();
+        }
+        const result = await ctx.drawImage(url, ...Object.values(drawImageInfo));
+        if (style.radius > 0)
+            ctx.restore();
+        return result;
+    }
+};

js_sdk/u-draw-poster/extends/draw-function/draw-image.d.ts

@@ -0,0 +1,4 @@
+import { DrawPosterUseCtxOpts } from '../../utils/interface';
+declare const _default: DrawPosterUseCtxOpts;
+/** 等待绘制图片原型方法 */
+export default _default;

js_sdk/u-draw-poster/extends/draw-function/draw-image.js

@@ -0,0 +1,42 @@
+import { downloadImgUrl } from '../../utils/wx-utils';
+/** 等待绘制图片原型方法 */
+export default {
+    name: 'drawImage',
+    init: (canvas, ctx) => {
+        ctx.drawImageProto = ctx.drawImage;
+    },
+    handle: async (canvas, ctx, url, sx, sy, sh, sw, dx, dy, dh, dw) => {
+        // 下载路径
+        const path = await downloadImgUrl(url);
+        // 标记当前绘画存在图片绘制
+        let result = false;
+        // 基本绘制方法, 如果是 fit 方式, 则传入所有参数, 不然则只传入四个参数
+        const baseDrawImage = (imageResource) => {
+            const isFit = typeof dx === 'number' && typeof dw === 'number';
+            if (isFit) {
+                ctx.drawImageProto(imageResource, sx, sy, sh, sw, dx, dy, dh, dw);
+            }
+            else {
+                ctx.drawImageProto(imageResource, sx, sy, sh, sw);
+            }
+        };
+        // 如果是 context 绘制方式, 则直接绘制
+        if (ctx.drawType === 'context') {
+            baseDrawImage(path);
+            result = true;
+        }
+        // 如果是 type2d 绘制方式, 则等待图片绘制完毕
+        if (ctx.drawType === 'type2d') {
+            result = await new Promise(resolve => {
+                const image = canvas.createImage();
+                image.src = path;
+                image.onload = () => {
+                    baseDrawImage(image);
+                    resolve(true);
+                };
+                image.onerror = () => resolve(false);
+            });
+        }
+        return result;
+    }
+};

js_sdk/u-draw-poster/extends/draw-function/draw-round-image.d.ts

@@ -0,0 +1,4 @@
+import { DrawPosterUseCtxOpts } from '../../utils/interface';
+declare const _default: DrawPosterUseCtxOpts;
+/** 绘制圆角图片原型方法 */
+export default _default;

js_sdk/u-draw-poster/extends/draw-function/draw-round-image.js

@@ -0,0 +1,15 @@
+/** 绘制圆角图片原型方法 */
+export default {
+    name: 'drawRoundImage',
+    handle: async (canvas, ctx, url, x, y, w, h, r = 15) => {
+        var _a;
+        ctx.save();
+        (_a = ctx.setFillStyle) === null || _a === void 0 ? void 0 : _a.call(ctx, 'transparent');
+        ctx.fillStyle = 'transparent';
+        ctx.fillRoundRect(x, y, w, h, r);
+        ctx.clip();
+        const result = await ctx.drawImage(url, x, y, w, h);
+        ctx.restore();
+        return result;
+    }
+};

js_sdk/u-draw-poster/extends/draw-function/fill-round-rect.d.ts

@@ -0,0 +1,4 @@
+import { DrawPosterUseCtxOpts } from '../../utils/interface';
+declare const _default: DrawPosterUseCtxOpts;
+/** 绘制填充圆角矩形方法 */
+export default _default;

js_sdk/u-draw-poster/extends/draw-function/fill-round-rect.js

@@ -0,0 +1,7 @@
+/** 绘制填充圆角矩形方法 */
+export default {
+    name: 'fillRoundRect',
+    handle: (canvas, ctx, x, y, w, h, r) => {
+        ctx.roundRect(x, y, w, h, r, true);
+    }
+};

js_sdk/u-draw-poster/extends/draw-function/fill-warp-text.d.ts

@@ -0,0 +1,4 @@
+import { DrawPosterUseCtxOpts } from '../../utils/interface';
+declare const _default: DrawPosterUseCtxOpts;
+/** 绘制换行字体原型方法 */
+export default _default;

js_sdk/u-draw-poster/extends/draw-function/fill-warp-text.js

@@ -0,0 +1,76 @@
+/** 绘制换行字体原型方法 */
+export default {
+    name: 'fillWarpText',
+    handle: (canvas, ctx, config) => {
+        const newConfig = config = Object.assign({ maxWidth: 100, layer: 2, lineHeight: Number(ctx.font.replace(/[^0-9.]/g, '')), x: 0, y: Number(ctx.font.replace(/[^0-9.]/g, '')) / 1.2, splitText: '', notFillText: false }, config);
+        const { text, splitText, maxWidth, layer, lineHeight, notFillText, x, y } = newConfig;
+        // 当字符串为空时, 抛出错误
+        if (!text) {
+            throw Error('warpFillText Error: text is empty string');
+        }
+        // 分割所有单个字符串
+        const chr = text.split(splitText);
+        // 存入的每行字体的容器
+        let row = [];
+        // 判断字符串
+        let timp = '';
+        if (splitText) {
+            row = chr;
+        }
+        else {
+            // 遍历所有字符串, 填充行容器
+            for (let i = 0; i < chr.length; i++) {
+                // 当超出行列时, 停止执行遍历, 节省计算时间
+                if (row.length > layer) {
+                    break;
+                }
+                if (ctx.measureText(timp).width < maxWidth) {
+                    // 如果超出长度, 添加进row数组
+                    timp += chr[i];
+                }
+                else {
+                    // 如超出一行长度, 则换行, 并清除容器
+                    i--;
+                    row.push(timp);
+                    timp = '';
+                }
+            }
+            // 如有剩下字体, 则在最后时添加一行
+            if (timp) {
+                row.push(timp);
+            }
+            // 如果数组长度大于指定行数
+            if (row.length > layer) {
+                row = row.slice(0, layer);
+                // 结束的索引
+                const end = layer - 1;
+                for (let i = 0; i < row[end].length; i++) {
+                    const currentWidth = ctx.measureText(`${row[end]}...`).width;
+                    if (currentWidth > maxWidth) {
+                        // 加上... 当前宽度大于最大宽度时, 去除一位字符串
+                        const strEnd = row[end].length - 1;
+                        row[end] = row[end].slice(0, strEnd);
+                    }
+                    else {
+                        row[end] += '...';
+                        break;
+                    }
+                }
+            }
+        }
+        // 储存并返回绘制信息
+        const drawInfos = row.map((item, index) => {
+            const info = {
+                text: item,
+                y: y + index * lineHeight,
+                x: x,
+            };
+            // 默认执行绘制信息
+            if (!notFillText) {
+                ctx.fillText(info.text, info.x, info.y);
+            }
+            return info;
+        });
+        return drawInfos;
+    }
+};

js_sdk/u-draw-poster/extends/draw-function/index.d.ts

@@ -0,0 +1,7 @@
+export { default as drawImage } from "./draw-image";
+export { default as roundRect } from "./round-rect";
+export { default as fillRoundRect } from "./fill-round-rect";
+export { default as strokeRoundRect } from "./stroke-round-rect";
+export { default as fillWarpText } from "./fill-warp-text";
+export { default as drawRoundImage } from "./draw-round-image";
+export { default as drawImageFit } from "./draw-image-fit";

js_sdk/u-draw-poster/extends/draw-function/index.js

@@ -0,0 +1,15 @@
+/*
+ * @Author: Mr.Mao
+ * @LastEditors: Mr.Mao
+ * @Date: 2020-11-11 20:43:33
+ * @LastEditTime: 2021-01-02 00:16:59
+ * @Description:
+ * @任何一个傻子都能写出让电脑能懂的代码，而只有好的程序员可以写出让人能看懂的代码
+ */
+export { default as drawImage } from "./draw-image";
+export { default as roundRect } from "./round-rect";
+export { default as fillRoundRect } from "./fill-round-rect";
+export { default as strokeRoundRect } from "./stroke-round-rect";
+export { default as fillWarpText } from "./fill-warp-text";
+export { default as drawRoundImage } from "./draw-round-image";
+export { default as drawImageFit } from "./draw-image-fit";

js_sdk/u-draw-poster/extends/draw-function/round-rect.d.ts

@@ -0,0 +1,4 @@
+import { DrawPosterUseCtxOpts } from '../../utils/interface';
+declare const _default: DrawPosterUseCtxOpts;
+/** 绘制圆角矩形原型方法 */
+export default _default;

js_sdk/u-draw-poster/extends/draw-function/round-rect.js

@@ -0,0 +1,41 @@
+/** 绘制圆角矩形原型方法 */
+export default {
+    name: 'roundRect',
+    handle: (canvas, ctx, x, y, w, h, r = 15, fill = false, stroke = false) => {
+        if (r === 0) {
+            if (stroke)
+                ctx.strokeRect(x, y, w, h);
+            if (fill)
+                ctx.fillRect(x, y, w, h);
+            return;
+        }
+        if (w < 2 * r) {
+            r = w / 2;
+        }
+        if (h < 2 * r) {
+            r = h / 2;
+        }
+        // 开始绘制
+        ctx.beginPath();
+        ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5);
+        // 移动复制
+        ctx.moveTo(x + r, y);
+        ctx.lineTo(x + w - r, y);
+        ctx.lineTo(x + w, y + r);
+        // (x,y,z,j,f) x,y圆心z半径,j起始弧度f，终止弧度
+        ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2);
+        ctx.lineTo(x + w, y + h - r);
+        ctx.lineTo(x + w - r, y + h);
+        ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5);
+        ctx.lineTo(x + r, y + h);
+        ctx.lineTo(x, y + h - r);
+        ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI);
+        ctx.lineTo(x, y + r);
+        ctx.lineTo(x + r, y);
+        if (stroke)
+            ctx.stroke();
+        if (fill)
+            ctx.fill();
+        ctx.closePath();
+    }
+};

js_sdk/u-draw-poster/extends/draw-function/stroke-round-rect.d.ts

@@ -0,0 +1,4 @@
+import { DrawPosterUseCtxOpts } from '../../utils/interface';
+declare const _default: DrawPosterUseCtxOpts;
+/** 绘制填充圆角矩形方法 */
+export default _default;

js_sdk/u-draw-poster/extends/draw-function/stroke-round-rect.js

@@ -0,0 +1,7 @@
+/** 绘制填充圆角矩形方法 */
+export default {
+    name: 'strokeRoundRect',
+    handle: (canvas, ctx, x, y, w, h, r) => {
+        ctx.roundRect(x, y, w, h, r, false, true);
+    }
+};