@skit/wxmini-canvas2d
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.3 • Public • Published

    wxmini-canvas2d

    NPM Version NPM Download License


    特性

    • 将微信小程序或小游戏中提供的 Canvas 2D API,转化为链式调用形式;
    • 除了完整封装原生 API,还提供了以下几个便捷方法;
      1. rectWithRadius:类似 rect,但支持绘制指定半径的圆角。
      2. fillRectWithRadius:类似 rect + fill,但支持绘制指定半径的圆角。
      3. strokeRectWithRadius:类似 rect + stroke,但支持绘制指定半径的圆角。
      4. drawImageWithRadius:类似 drawImage,但支持绘制指定半径的圆角。
      5. fillTextWithWrap:类似 fillText,但支持指定最大高度的自动换行。
      6. strokeTextWithWrap:类似 strokeText,但支持指定最大高度的自动换行。
    • 可单独拷贝到项目中使用;
    • 支持离屏画布(OffscreenCanvas);
    • 支持 TypeScript。

    用法

    安装:

    npm install @skit/wxmini-promisify

    导入:

    import { FluentCanvas2D } from '@skit/wxmini-canvas2d';

    使用链式方法:

    FluentCanvas2D.select({
        selector: '#myCanvasId',
        autoScaleWithDPR: true
    }).then((fcanvas) => {
        fcanvas
            .beginPath()
            .arc(20, 20, 2, 0, 2 * Math.PI)
            .setFillStyle('red')
            .fill()
            .closePath();
    });
    
    /**
     * @example 以上示例代码等同于下方原生实现:
     */
    wx.createSelectorQuery()
        .select('#myCanvasId')
        .fields({
            node: true,
            size: true
        })
        .exec((res) => {
            const canvas = res[0].node;
            const dpr = wx.getSystemInfoSync().pixelRatio;
            canvas.width = res[0].width * dpr;
            canvas.height = res[0].height * dpr;
    
            const context = canvas.getContext('2d');
            context.beginPath();
            context.arc(20, 20, 2, 0, 2 * Math.PI);
            context.fillStyle = 'red';
            context.fill();
            context.closePath();
        });

    更多用法请参考示例项目和 TypeScript 声明文件。


    迭代计划

    • [ ] 异步链式方法。

    • [ ] 配置式海报工具。

    • [ ] rpx 单位自动转换。

    • [ ] fillTextWithWrapstrokeTextWithWrap 支持指定单词截断方式。

    Install

    npm i @skit/wxmini-canvas2d

    DownloadsWeekly Downloads

    3

    Version

    0.0.3

    License

    MIT

    Unpacked Size

    65.2 kB

    Total Files

    11

    Last publish

    Collaborators

    • fudiwei