draw
直线绘制

直线绘制 - drawLine(x1, y1, x2, y2, color, lineWidth, dashPattern = null)

功能：在位图上绘制一条直线，支持虚线样式。

参数：

  • {number} x1, y1 - 起点坐标
  • {number} x2, y2 - 终点坐标
  • {string} color - 线条颜色
  • {number} lineWidth - 线条宽度
  • {Array<number>} [dashPattern=null] - 虚线模式数组
1
2
3
4
5
6
7
8
9
10
11
12
13
Bitmap.prototype.drawLine = function(x1, y1, x2, y2, color, lineWidth, dashPattern = null) {
    const ctx = this.context;
    ctx.strokeStyle = color;
    ctx.lineWidth = lineWidth;
    const hasDash = dashPattern && dashPattern.length > 0;
    if (hasDash) ctx.setLineDash(dashPattern);
    ctx.beginPath();
    ctx.moveTo(Math.floor(x1) + 0.5, Math.floor(y1) + 0.5);
    ctx.lineTo(Math.floor(x2) + 0.5, Math.floor(y2) + 0.5);
    ctx.stroke();
    if (hasDash) ctx.setLineDash([]);
    this._baseTexture.update();
};

圆弧绘制

圆弧绘制 - drawArc(x, y, radius, startDeg, endDeg, color, lineWidth, [anticlockwise])

功能：绘制一段圆弧线条。

参数：

  • {number} x, y - 圆心坐标
  • {number} radius - 半径
  • {number} startDeg, endDeg - 起始角度与结束角度（度）
  • {string} color - 线条颜色
  • {number} lineWidth - 线条宽度
  • {boolean} [anticlockwise=false] - 是否逆时针绘制
1
2
3
4
5
6
7
8
9
10
11
12
13
Bitmap.prototype.drawArc = function(x, y, radius, startDeg, endDeg, color, lineWidth, anticlockwise = false) {
    const ctx = this.context;
    ctx.save();
    ctx.strokeStyle = color;
    ctx.lineWidth = lineWidth;
    const startAngle = Math.toRadians(startDeg);
    const endAngle = Math.toRadians(endDeg);
    ctx.beginPath();
    ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
    ctx.stroke();
    ctx.restore();
    this._baseTexture.update();
};

贝塞尔曲线绘制

贝塞尔曲线绘制 - drawCurve(x1, y1, x2, y2, color, lineWidth, t)

功能：绘制一段圆弧线条。

参数：

  • {number} x1 - 起点x坐标
  • {number} y1 - 起点y坐标
  • {number} x2 - 终点x坐标
  • {number} y2 - 终点y坐标f
  • {string} color - 线条颜色
  • {number} lineWidth - 线条宽度
  • {number} [t=0.5] - 控制点计算系数，决定曲线弯曲程度
1
2
3
4
5
6
7
8
9
10
11
12
13
Bitmap.prototype.drawCurve = function(x1, y1, x2, y2, color, lineWidth, t = 0.5) {
    const ctx = this.context;
    const cp = Math.computeCP({x: x1, y: y1}, {x: x2, y: y2}, t);
    ctx.save();
    ctx.strokeStyle = color;
    ctx.lineWidth = lineWidth;
    ctx.beginPath();
    ctx.moveTo(x1, y1);
    ctx.quadraticCurveTo(cp.x, cp.y, x2, y2);
    ctx.stroke();
    ctx.restore();
    this._baseTexture.update();
};

剪裁
设置传输上下文

设置传输上下文 - Bitmap.prototype.setupBltContext(source, sw, sh, dw, dh)

功能：为位块传输操作准备源图像与目标尺寸的上下文对象。若源无效则返回 null。

参数：

  • {Bitmap} source - 源位图
  • {number} sw - 源图像裁剪宽度
  • {number} sh - 源图像裁剪高度
  • {number} dw - 目标绘制宽度；未提供时依次回退至 sw 或图像宽度
  • {number} dh - 目标绘制高度；未提供时依次回退至 sh 或图像高度

返回值：

  • {Object|null} - 包含 image（源图像）、dw（目标宽度）、dh（目标高度）的上下文对象；无效源时返回 null
1
2
3
4
5
6
7
8
9
10
11
12
Bitmap.prototype.setupBltContext = function(source, sw, sh, dw, dh) {
    if (!source) return null;
    const image = source._canvas || source._image;
    if (!image || (image.width === 0)) return null;
    const targetW = (dw !== undefined) ? dw : (sw !== undefined ? sw : image.width);
    const targetH = (dh !== undefined) ? dh : (sh !== undefined ? sh : image.height);
    return {
        image: image,
        dw: targetW,
        dh: targetH
    };
};

剪裁图形

剪裁图形 - bltShape(source, sx, sy, sw, sh, dx, dy, dw, dh, func)

功能：以指定的形状路径作为裁剪区域，将源图像绘制到目标位图上。

参数：

  • {Bitmap} source - 源位图
  • {number} sx - 源矩形 x 坐标
  • {number} sy - 源矩形 y 坐标
  • {number} sw - 源图像裁剪宽度
  • {number} sh - 源图像裁剪高度
  • {number} dx - 目标矩形 x 坐标
  • {number} dy - 目标矩形 y 坐标
  • {number} dw - 目标绘制宽度
  • {number} dh - 目标绘制高度
  • {function} func(ctx, x, y, w, h) - 定义裁剪形状的回调函数。
  • 接收 (ctx, x, y, w, h) 四个参数：
    • ctx：Canvas 2D 上下文
    • x, y：目标绘制区域左上角坐标（即 dx, dy）
    • w, h：目标绘制区域的宽度和高度（即内部处理后的 dw, dh）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Bitmap.prototype.bltShape = function(source, sx, sy, sw, sh, dx, dy, dw, dh, func) {
    const setup = this.setupBltContext(source, sw, sh, dw, dh);
    if (!setup) return;
    const ctx = this.context;
    ctx.save();
    try {
        ctx.beginPath();
        func(ctx, dx, dy, setup.dw, setup.dh);
        ctx.closePath();
        ctx.clip();
        ctx.drawImage(setup.image, sx, sy, sw, sh, dx, dy, setup.dw, setup.dh);
    } catch (e) {
    } finally {
        ctx.restore();
    }
    if (this._baseTexture) this._baseTexture.update();
};

图像旋转剪裁

图像旋转剪裁 - bltEx(source, sx, sy, sw, sh, dx, dy, dw, dh, deg, opacity)

功能：将源图像的指定区域绘制到目标画布上，支持旋转和透明度控制。

参数：

  • {Bitmap} source - 源位图
  • {number} sx - 源矩形 x 坐标
  • {number} sy - 源矩形 y 坐标
  • {number} sw - 源图像裁剪宽度
  • {number} sh - 源图像裁剪高度
  • {number} dx - 目标矩形 x 坐标
  • {number} dy - 目标矩形 y 坐标
  • {number} dw - 目标绘制宽度
  • {number} dh - 目标绘制高度
  • {number} [opacity=1] - 透明度乘数（0 ~ 1）
  • {number} [deg=0] - 旋转角度（度）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
Bitmap.prototype.bltEx = function(source, sx, sy, sw, sh, dx, dy, dw, dh, opacity = 1.0, deg = 0) {
    const setup = this.setupBltContext(source,sw, sh, dw, dh);
    if (!setup || opacity <= 0) return;
    const ctx = this.context;
    const { image, dw: targetW, dh: targetH } = setup;
    const needsTransform = deg !== 0 || opacity < 1.0;
    if (needsTransform) {
        ctx.save();
        if (opacity < 1.0) ctx.globalAlpha *= opacity;
        if (deg !== 0) {
            const centerX = dx + targetW / 2;
            const centerY = dy + targetH / 2;
            ctx.translate(centerX, centerY);
            ctx.rotate(Math.toRadians(deg));
            ctx.drawImage(image, sx, sy, sw, sh, -targetW / 2, -targetH / 2, targetW, targetH);
        } else {
            ctx.drawImage(image, sx, sy, sw, sh, dx, dy, targetW, targetH);
        }
        ctx.restore();
    } else {
        ctx.drawImage(image, sx, sy, sw, sh, dx, dy, targetW, targetH);
    }
    this._baseTexture.update();
};

源图像叠加剪裁

图像叠加剪裁 - bltAtop(source, sx, sy, sw, sh, dx, dy, dw, dh)

功能：使用 source-atop 源图像仅绘制于目标位图已有不透明区域，重叠部分保留、超出部分裁剪.

参数：

  • {Bitmap} source - 源位图
  • {number} sx - 源矩形 x 坐标
  • {number} sy - 源矩形 y 坐标
  • {number} sw - 源图像裁剪宽度
  • {number} sh - 源图像裁剪高度
  • {number} dx - 目标矩形 x 坐标
  • {number} dy - 目标矩形 y 坐标
  • {number} dw - 目标绘制宽度
  • {number} dh - 目标绘制高度
1
2
3
4
5
6
7
8
9
10
Bitmap.prototype.bltAtop = function(source, sx, sy, sw, sh, dx, dy, dw, dh) {
    const setup = this.setupBltContext(source, dw, dh);
    if (!setup) return;
    const ctx = this.context;
    ctx.save();
    ctx.globalCompositeOperation = 'source-atop';
    ctx.drawImage(setup.image, sx, sy, sw, sh, dx, dy, setup.dw, setup.dh);
    ctx.restore();
    this._baseTexture.update();
};

水平翻转剪裁

水平翻转剪裁 - bltHorz(source, sx, sy, sw, sh, dx, dy, dw, dh)

功能：将源位图的指定区域水平翻转后绘制到目标位图的指定区域。

参数：

  • {Bitmap} source - 源位图
  • {number} sx - 源矩形 x 坐标
  • {number} sy - 源矩形 y 坐标
  • {number} sw - 源图像裁剪宽度
  • {number} sh - 源图像裁剪高度
  • {number} dx - 目标矩形 x 坐标
  • {number} dy - 目标矩形 y 坐标
  • {number} dw - 目标绘制宽度
  • {number} dh - 目标绘制高度
1
2
3
4
5
6
7
8
9
10
11
12
Bitmap.prototype.bltHorz = function(source, sx, sy, sw, sh, dx, dy, dw, dh) {
    const setup = this.setupBltContext(source, sw, sh, dw, dh);
    if (!setup) return;

    const ctx = this.context;
    ctx.save();
    ctx.translate(dx + setup.dw, dy);
    ctx.scale(-1, 1);
    ctx.drawImage(setup.image, sx, sy, sw, sh, 0, 0, setup.dw, setup.dh);
    ctx.restore();
    this._baseTexture.update();
};

垂直翻转剪裁

垂直翻转剪裁 - bltVert(source, sx, sy, sw, sh, dx, dy, dw, dh)

功能：将源位图在垂直方向翻转（沿水平轴镜像）后绘制到目标区域。

参数：

  • {Bitmap} source - 源位图
  • {number} sx - 源矩形 x 坐标
  • {number} sy - 源矩形 y 坐标
  • {number} sw - 源图像裁剪宽度
  • {number} sh - 源图像裁剪高度
  • {number} dx - 目标矩形 x 坐标
  • {number} dy - 目标矩形 y 坐标
  • {number} dw - 目标绘制宽度
  • {number} dh - 目标绘制高度
1
2
3
4
5
6
7
8
9
10
11
12
Bitmap.prototype.bltVert = function(source, sx, sy, sw, sh, dx, dy, dw, dh) {
    const setup = this.setupBltContext(source, sw, sh, dw, dh);
    if (!setup) return;

    const ctx = this.context;
    ctx.save();
    ctx.translate(dx, dy + setup.dh);
    ctx.scale(1, -1);
    ctx.drawImage(setup.image, sx, sy, sw, sh, 0, 0, setup.dw, setup.dh);
    ctx.restore();
    this._baseTexture.update();
};

圆角矩形剪裁

圆角矩形剪裁 - bltRound(source, radius, sx, sy, sw, sh, dx, dy, dw, dh)

功能：将源位图以圆角矩形形状绘制到当前位图上。

参数：

  • {Bitmap} source - 源位图
  • {number} radius - 圆角半径。为数字时四个角相同，对象可分别指定 {tl, tr, br, bl}
  • {number} sx - 源矩形 x 坐标
  • {number} sy - 源矩形 y 坐标
  • {number} sw - 源图像裁剪宽度
  • {number} sh - 源图像裁剪高度
  • {number} dx - 目标矩形 x 坐标
  • {number} dy - 目标矩形 y 坐标
  • {number} dw - 目标绘制宽度
  • {number} dh - 目标绘制高度
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Bitmap.prototype.bltRound = function(source, radius, sx, sy, sw, sh, dx, dy, dw, dh) {
    this.bltShape(source, sx, sy, sw, sh, dx, dy, dw, dh, (ctx, x, y, w, h) => {
        let r = Math.min(radius, w / 2, h / 2);
        if (r < 0) r = 0;
        if (typeof ctx.roundRect === 'function') {
            ctx.roundRect(x, y, w, h, r);
        } else {
            ctx.moveTo(x + r, y);
            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);
        }
    });
};

三角形剪裁

三角形剪裁 - bltTriangle - bltTriangle(source, sx, sy, sw, sh, dx, dy, dw, dh)

功能：将源位图以三角形形状绘制到目标位图上。

参数：

  • {Bitmap} source - 源位图
  • {number} radius - 圆角半径
  • {number} sx - 源矩形 x 坐标
  • {number} sy - 源矩形 y 坐标
  • {number} sw - 源图像裁剪宽度
  • {number} sh - 源图像裁剪高度
  • {number} dx - 目标矩形 x 坐标
  • {number} dy - 目标矩形 y 坐标
  • {number} dw - 目标绘制宽度
  • {number} dh - 目标绘制高度
1
2
3
4
5
6
7
8
9
10
Bitmap.prototype.bltTriangle = function(source, sx, sy, sw, sh, dx, dy, dw, dh) {
    this.bltShape(source, sx, sy, sw, sh, dx, dy, dw, dh, (ctx, x, y, w, h) => {
        const centerX = x + w / 2;
        const centerY = y + h / 2;
        const triangleH = Math.sin(Math.PI / 3) * w;
        ctx.moveTo(centerX - w / 2, centerY + triangleH / 2);
        ctx.lineTo(centerX + w / 2, centerY + triangleH / 2);
        ctx.lineTo(centerX, centerY - triangleH / 2);
    });
};

圆形剪裁

圆形剪裁 - bltCircle(source, sx, sy, sw, sh, dx, dy, dw, dh)

功能：将源位图的指定矩形区域以圆形裁切的方式绘制到目标区域。

参数：

  • {Bitmap} source - 源位图
  • {number} radius - 圆角半径
  • {number} sx - 源矩形 x 坐标
  • {number} sy - 源矩形 y 坐标
  • {number} sw - 源图像裁剪宽度
  • {number} sh - 源图像裁剪高度
  • {number} dx - 目标矩形 x 坐标
  • {number} dy - 目标矩形 y 坐标
  • {number} dw - 目标绘制宽度
  • {number} dh - 目标绘制高度

返回值：

  • {void} - 无返回值
1
2
3
4
5
6
Bitmap.prototype.bltCircle = function(source, sx, sy, sw, sh, dx, dy, dw, dh) {
    this.bltShape(source, sx, sy, sw, sh, dx, dy, dw, dh, (ctx, x, y, w, h) => {
        const radius = Math.min(w, h) / 2;
        ctx.arc(x + w / 2, y + h / 2, radius, 0, Math.PI * 2);
    });
};

菱形剪裁

菱形剪裁 - bltDiamond(source, sx, sy, sw, sh, dx, dy, dw, dh)

功能：将源位图的指定矩形区域以菱形形状绘制到目标位图上。

参数：

  • {Bitmap} source - 源位图
  • {number} sx - 源矩形 x 坐标
  • {number} sy - 源矩形 y 坐标
  • {number} sw - 源图像裁剪宽度
  • {number} sh - 源图像裁剪高度
  • {number} dx - 目标矩形 x 坐标
  • {number} dy - 目标矩形 y 坐标
  • {number} dw - 目标绘制宽度
  • {number} dh - 目标绘制高度

返回值：

  • {void} - 无返回值
1
2
3
4
5
6
7
8
Bitmap.prototype.bltDiamond = function(source, sx, sy, sw, sh, dx, dy, dw, dh) {
    this.bltShape(source, sx, sy, sw, sh, dx, dy, dw, dh, (ctx, x, y, w, h) => {
        ctx.moveTo(x + w / 2, y);
        ctx.lineTo(x + w, y + h / 2);
        ctx.lineTo(x + w / 2, y + h);
        ctx.lineTo(x, y + h / 2);
    });
};

多边形剪裁

多边形剪裁 - bltGraphic(source, point, side, distance, startAngle, rota, rate, r1, r2, sx, sy, sw, sh, dx, dy, dw, dh)

功能：将源图像的指定区域，按照多边形平滑轮廓（二次贝塞尔曲线）进行混合绘制到目标区域。

参数：

  • {Bitmap} source - 源位图
  • {Object} point - 几何图形中心基准 {x, y}
  • {number} side - 顶点数量
  • {number} distance - 外廓尺寸
  • {number} startAngle - 初始相位
  • {number} rota - 扭曲角度
  • {number} rate - 向心缩放系数
  • {number} r1 - 向心曲率系数
  • {number} r2 - 离心曲率系数
  • {number} sx - 源矩形 x 坐标
  • {number} sy - 源矩形 y 坐标
  • {number} sw - 源图像裁剪宽度
  • {number} sh - 源图像裁剪高度
  • {number} dx - 目标矩形 x 坐标
  • {number} dy - 目标矩形 y 坐标
  • {number} dw - 目标绘制宽度
  • {number} dh - 目标绘制高度
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
Bitmap.prototype.bltGraphic = function(source, point, side, distance, startAngle, rota, rate, r1, r2, sx, sy, sw, sh, dx, dy, dw, dh) {
    this.bltShape(source, sx, sy, sw, sh, dx, dy, dw, dh, (ctx) => {
        const p1 = Math.calcPolygonPoints(point, side, distance, startAngle);
        const p2 = Math.transformPolygon(p1, point, rota);
        let p = null;
        for (let i = 0; i < p1.length; i++) {
            const np = {
                x: point.x + (p2[i].x - point.x) * rate / 2,
                y: point.y + (p2[i].y - point.y) * rate / 2
            };
            if (i === 0) {
                ctx.moveTo(p1[i].x, p1[i].y);
                const up = Math.computeCP(p1[i], np, r1);
                ctx.quadraticCurveTo(up.x, up.y, np.x, np.y);
                p = np;
            } else {
                const cp1 = Math.computeCP(p, p1[i], r2);
                ctx.quadraticCurveTo(cp1.x, cp1.y, p1[i].x, p1[i].y);
                const cp2 = Math.computeCP(p1[i], np, r1);
                ctx.quadraticCurveTo(cp2.x, cp2.y, np.x, np.y);
                p = np;
            }
            if (i === p1.length - 1) {
                const cpFinal = Math.computeCP(np, p1[0], r2);
                ctx.quadraticCurveTo(cpFinal.x, cpFinal.y, p1[0].x, p1[0].y);
            }
        }
    });
};

擦除
擦除路径

擦除路径 - clearShape(pathFunc)

功能：根据指定的路径函数，使用 destination-out 合成模式擦除画布上对应区域的内容。

参数：

  • {function} func - 擦除路径的回调函数，用于定义要擦除的路径。
1
2
3
4
5
6
7
8
9
10
Bitmap.prototype.clearShape = function(func) {
    const ctx = this.context;
    ctx.save();
    ctx.globalCompositeOperation = 'destination-out';
    ctx.beginPath();
    func(ctx);
    ctx.fill();
    ctx.restore();
    if (this._baseTexture) this._baseTexture.update();
};

擦除圆角矩形

擦除圆角矩形 - clearRound(x, y, width, height, radius)

功能：在画布上擦除指定位置的圆角矩形区域。

参数：

  • {number} x - 矩形左上角 x 坐标
  • {number} y - 矩形左上角 y 坐标
  • {number} width - 矩形宽度
  • {number} height - 矩形高度
  • {number} radius - 圆角半径
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
Bitmap.prototype.clearRound = function(x, y, width, height, radius) {
    const rLimit = Math.min(width, height) / 2;
    const rad = typeof radius === 'number'
        ? {tl: radius, tr: radius, br: radius, bl: radius}
        : Object.assign({tl: 0, tr: 0, br: 0, bl: 0}, radius);
    for (let key in rad) {
        rad[key] = Math.max(0, Math.min(rad[key], rLimit));
    }
    this.clearShape(ctx => {
        if (typeof ctx.roundRect === 'function') {
            ctx.roundRect(x, y, width, height, [rad.tl, rad.tr, rad.br, rad.bl]);
        } else {
            ctx.moveTo(x + rad.tl, y);
            ctx.lineTo(x + width - rad.tr, y);
            ctx.arcTo(x + width, y, x + width, y + rad.tr, rad.tr);
            ctx.lineTo(x + width, y + height - rad.br);
            ctx.arcTo(x + width, y + height, x + width - rad.br, y + height, rad.br);
            ctx.lineTo(x + rad.bl, y + height);
            ctx.arcTo(x, y + height, x, y + height - rad.bl, rad.bl);
            ctx.lineTo(x, y + rad.tl);
            ctx.arcTo(x, y, x + rad.tl, y, rad.tl);
        }
        ctx.closePath();
    });
};

擦除菱角矩形

擦除菱角矩形 - clearChamfer(x, y, width, height, radius)

功能：在画布上擦除指定位置的菱角矩形区域。

参数：

  • {number} x - 矩形左上角 x 坐标
  • {number} y - 矩形左上角 y 坐标
  • {number} width - 矩形宽度
  • {number} height - 矩形高度
  • {number} radius - 菱角尺寸
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Bitmap.prototype.clearChamfer = function(x, y, width, height, radius) {
    const r = Math.max(0, Math.min(radius, width / 2, height / 2));
    if (r <= 0) return this.clearRect(x, y, width, height);
    const x1 = x + width;
    const y1 = y + height;
    this.clearShape(ctx => {
        ctx.moveTo(x + r, y);
        ctx.lineTo(x1 - r, y);
        ctx.lineTo(x1, y + r);
        ctx.lineTo(x1, y1 - r);
        ctx.lineTo(x1 - r, y1);
        ctx.lineTo(x + r, y1);
        ctx.lineTo(x, y1 - r);
        ctx.lineTo(x, y + r);
        ctx.closePath();
    });
};

擦除三角形

擦除三角形区域 - clearTriangle(x1, y1, x2, y2, x3, y3)

功能：在画布上擦除由三个顶点定义的三角形区域。

参数：

  • {number} x1 - 第一个顶点的 x 坐标
  • {number} y1 - 第一个顶点的 y 坐标
  • {number} x2 - 第二个顶点的 x 坐标
  • {number} y2 - 第二个顶点的 y 坐标
  • {number} x3 - 第三个顶点的 x 坐标
  • {number} y3 - 第三个顶点的 y 坐标
1
2
3
4
5
6
7
8
Bitmap.prototype.clearTriangle = function(x1, y1, x2, y2, x3, y3) {
    this.clearShape(ctx => {
        ctx.moveTo(x1, y1);
        ctx.lineTo(x2, y2);
        ctx.lineTo(x3, y3);
        ctx.closePath();
    });
};

擦除圆外区域

擦除圆外区域 - clearOutside(circles)

功能：在画布上擦除所有圆形区域以外的区域，仅保留参数圆形内部的区域。

参数：

  • {Array<{x: number, y: number, radius: number}>} circles - 圆形对象数组，每个对象包含圆心坐标 x、y 和半径 radius
1
2
3
4
5
6
7
8
9
Bitmap.prototype.clearOutside = function(circles) {
    this.clearShape(ctx => {
        circles.forEach(circle => {
            ctx.moveTo(circle.x + circle.radius, circle.y);
            ctx.arc(circle.x, circle.y, circle.radius, 0, Math.PI * 2, true);
        });
        ctx.rect(0, 0, this.width, this.height);
    });
};

擦除多边形

擦除图形 - clearGraphic(point, side, distance, startAngle, rota, rate, r1, r2)

功能：在画布上擦除根据指定参数绘制的多边形区域。

参数：

  • {Object} point - 几何图形中心基准 {x, y}
  • {number} side - 顶点数量
  • {number} distance - 外廓尺寸
  • {number} startAngle - 初始相位
  • {number} rota - 扭曲角度
  • {number} rate - 向心缩放系数
  • {number} r1 - 向心曲率系数
  • {number} r2 - 离心曲率系数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Bitmap.prototype.clearGraphic = function(point, side, distance, startAngle, rota, rate, r1, r2) {
    this._clearByPath(ctx => {
        const p1 = Math.calcPolygonPoints(point, side, distance, startAngle);
        const p2 = Math.transformPolygon(p1, point, rota);
        let p = null;
        for (let i = 0; i < p1.length; i++) {
            const np = {
                x: point.x + (p2[i].x - point.x) * rate / 2,
                y: point.y + (p2[i].y - point.y) * rate / 2
            };
            if (i === 0) {
                ctx.moveTo(p1[i].x, p1[i].y);
                const up = Math.computeCP(p1[i], np, r1);
                ctx.quadraticCurveTo(up.x, up.y, np.x, np.y);
                p = np;
            } else {
                const cp1 = Math.computeCP(p, p1[i], r2);
                ctx.quadraticCurveTo(cp1.x, cp1.y, p1[i].x, p1[i].y);
                const cp2 = Math.computeCP(p1[i], np, r1);
                ctx.quadraticCurveTo(cp2.x, cp2.y, np.x, np.y);
                p = np;
            }
            if (i === p1.length - 1) {
                const cpFinal = Math.computeCP(np, p1[0], r2);
                ctx.quadraticCurveTo(cpFinal.x, cpFinal.y, p1[0].x, p1[0].y);
            }
        }
        ctx.closePath();
    });
};

填充
填充图形

填充图形 - drawShape(func, color, borderColor, lineWidth, dashPattern)

功能：在 Bitmap 上绘制指定形状，可设定填充色、边框色、线宽及虚线样式。

参数：

  • {Function} func - 执行绘制操作的回调函数。
  • {string} [color=#000] - 填充颜色
  • {string} [borderColor=#fff] - 边框颜色
  • {number} [lineWidth=0] - 线条宽度
  • {Array<number>} [dashPattern=null] - 虚线模式数组
1
2
3
4
5
6
7
8
9
10
11
12
13
Bitmap.prototype.drawShape = function(drawFunc, color= '#000', borderColor= '#fff', lineWidth = 0, dashPattern = []) {
    const ctx = this.context;
    ctx.save();
    ctx.fillStyle = color;
    ctx.strokeStyle = borderColor || color;
    ctx.lineWidth = lineWidth;
    ctx.setLineDash(dashPattern || []);
    func(ctx);
    ctx.fill();
    if (lineWidth) ctx.stroke();
    ctx.restore();
    this._baseTexture.update();
};

填充圆角矩形

填充圆角矩形 - fillRounded(x, y, width, height, radius, color, borderColor, lineWidth, dashPattern)

功能：绘制一个带圆角的矩形，并填充颜色和描边。

参数：

  • {number} x - 矩形左上角 x 坐标
  • {number} y - 矩形左上角 y 坐标
  • {number} width - 矩形宽度
  • {number} height - 矩形高度
  • {number|Object} radius - 圆角半径。为数字时四个角相同，对象可分别指定 {tl, tr, br, bl}
  • {string} color - 填充颜色
  • {string} borderColor - 边框颜色
  • {number} lineWidth - 边框线宽
  • {Array<number>} dashPattern - 虚线样式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Bitmap.prototype.fillRounded = function(x, y, width, height, radius, color, borderColor, lineWidth, dashPattern) {
    const r = Math.min(width, height) / 2;
    const rad = typeof radius === 'number'
        ? {tl: radius, tr: radius, br: radius, bl: radius}
        : Object.assign({tl:0,tr:0,br:0,bl:0}, radius);
    for (let key in rad) rad[key] = Math.min(rad[key], r);
    this.drawShape(ctx => {
        ctx.beginPath();
        ctx.moveTo(x + rad.tl, y);
        ctx.lineTo(x + width - rad.tr, y);
        ctx.arcTo(x + width, y, x + width, y + rad.tr, rad.tr);
        ctx.lineTo(x + width, y + height - rad.br);
        ctx.arcTo(x + width, y + height, x + width - rad.br, y + height, rad.br);
        ctx.lineTo(x + rad.bl, y + height);
        ctx.arcTo(x, y + height, x, y + height - rad.bl, rad.bl);
        ctx.lineTo(x, y + rad.tl);
        ctx.arcTo(x, y, x + rad.tl, y, rad.tl);
        ctx.closePath();
    }, color, borderColor, lineWidth, dashPattern);
};

填充菱角矩形

填充菱角矩形 - fillChamfer(x, y, width, height, radius, color, borderColor, lineWidth, dashPattern)

功能：绘制一个带菱角的矩形，并填充颜色和描边。

参数：

  • {number} x - 矩形左上角 x 坐标
  • {number} y - 矩形左上角 y 坐标
  • {number} width - 矩形宽度
  • {number} height - 矩形高度
  • {number} radius - 菱角尺寸
  • {string} color - 填充颜色
  • {string} borderColor - 边框颜色
  • {number} lineWidth - 边框线宽
  • {Array<number>} dashPattern - 虚线样式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Bitmap.prototype.fillChamfer = function(x, y, width, height, radius, color, borderColor, lineWidth, dashPattern) {
    const r = Math.min(width, height) / 2;
    const cr = Math.min(r, radius);
    this.drawShape(ctx => {
        ctx.beginPath();
        ctx.moveTo(x + cr, y);
        ctx.lineTo(x + width - cr, y);
        ctx.lineTo(x + width, y + cr);
        ctx.lineTo(x + width, y + height - cr);
        ctx.lineTo(x + width - cr, y + height);
        ctx.lineTo(x + cr, y + height);
        ctx.lineTo(x, y + height - cr);
        ctx.lineTo(x, y + cr);
        ctx.lineTo(x + cr, y);
        ctx.closePath();
    }, color, borderColor, lineWidth, dashPattern);
};

填充三角形

填充三角形 - fillTriangle(x1, y1, x2, y2, x3, y3, color, borderColor, lineWidth, dashPattern)

功能：绘制一个填充的三角形，并填充颜色和描边。

参数：

  • {number} x1 - 第一个顶点的 x 坐标
  • {number} y1 - 第一个顶点的 y 坐标
  • {number} x2 - 第二个顶点的 x 坐标
  • {number} y2 - 第二个顶点的 y 坐标
  • {number} x3 - 第三个顶点的 x 坐标
  • {number} y3 - 第三个顶点的 y 坐标
  • {string} color - 填充颜色
  • {string} borderColor - 边框颜色
  • {number} [lineWidth] - 边框线宽
  • {Array<number>} dashPattern - 虚线样式
1
2
3
4
5
6
7
8
9
Bitmap.prototype.fillTriangle = function(x1, y1, x2, y2, x3, y3, color , borderColor, lineWidth, dashPattern) {
    this.drawShape(ctx => {
        ctx.beginPath();
        ctx.moveTo(x1, y1);
        ctx.lineTo(x2, y2);
        ctx.lineTo(x3, y3);
        ctx.closePath();
    }, color, borderColor, lineWidth, dashPattern);
};

填充偏移矩形

填充偏移矩形 - fillOffsetRect(x, y, width, height, offset, dire, color, borderColor, lineWidth, dashPattern)

功能：绘制一个经过水平偏移的四边形（平行四边形效果），并进行填充和描边。

参数：

  • {number} x - 矩形左上角 x 坐标
  • {number} y - 矩形左上角 y 坐标
  • {number} width - 矩形宽度
  • {number} height - 矩形高度
  • {number} offset - 水平偏移量
  • {boolean} dire - 偏移方向，true 时上边左移、下边右移，false 时相反
  • {string} color - 填充颜色
  • {string} borderColor - 边框颜色
  • {number} lineWidth - 边框线宽
  • {Array<number>} dashPattern - 虚线样式
1
2
3
4
5
6
7
8
9
10
11
12
Bitmap.prototype.fillOffsetRect = function(x, y, width, height, offset, dire = true, color, borderColor, lineWidth, dashPattern) {
    let p1 = {x: x, y: y}, 
        p2 = {x: x + width, y: y}, 
        p3 = {x: x + width, y: y + height}, 
        p4 = {x: x, y: y + height};
    if(dire){
        p1.x -= offset; p2.x -= offset; p3.x += offset; p4.x += offset;
    } else {
        p1.x += offset; p2.x += offset; p3.x -= offset; p4.x -= offset;
    }
    this.fillPolygon([p1,p2,p3,p4], color, borderColor, lineWidth, dashPattern);
};

填充多边形

填充多边形 - fillPolygon(points, color, borderColor, lineWidth, dashPattern)

功能：根据顶点数组绘制一个多边形，并进行填充和描边。

参数：

  • {Array<{x:number,y:number}>} points - 多边形顶点坐标数组，长度需大于等于 2
  • {string} color - 填充颜色
  • {string} [borderColor] - 边框颜色
  • {number} [lineWidth] - 边框线宽
  • {Array<number>} [dashPattern] - 虚线样式
1
2
3
4
5
6
7
8
9
Bitmap.prototype.fillPolygon = function(points, color, borderColor, lineWidth, dashPattern) {
    if(!points || points.length < 2) return;
    this.drawShape(ctx => {
        ctx.beginPath();
        ctx.moveTo(points[0].x, points[0].y);
        for (let i = 1; i < points.length; i++) ctx.lineTo(points[i].x, points[i].y);
        ctx.closePath();
    }, color, borderColor, lineWidth, dashPattern);
};

填充正多边形

填充正多边形 - fillRegularPolygon(x, y, side, size, color, borderColor, lineWidth, dashPattern)

功能：绘制一个正多边形，并进行填充和描边。

参数：

  • {number} x - 中心 x 坐标
  • {number} y - 中心 y 坐标
  • {number} [side=3] - 边数
  • {number} [radius=10] - 半径大小
  • {string} color - 填充颜色
  • {string} borderColor - 边框颜色
  • {number} lineWidth - 边框线宽
  • {Array<number>} dashPattern - 虚线样式
1
2
3
4
5
6
7
8
9
10
11
12
Bitmap.prototype.fillRegularPolygon = function(x, y, side = 3, radius = 10, color, borderColor, lineWidth, dashPattern) {
    this.drawShape(ctx => {
        ctx.beginPath();
        for (let i = 0; i < side; i++) {
            const angle = 2 * Math.PI / side * i;
            const xx = x + radius * Math.cos(angle);
            const yy = y + radius * Math.sin(angle);
            if (i === 0) ctx.moveTo(xx, yy); else ctx.lineTo(xx, yy);
        }
        ctx.closePath();
    }, color, borderColor, lineWidth, dashPattern);
};

填充星形

填充星形 - fillStar(x, y, side, size, color, borderColor, lineWidth, dashPattern)

功能：绘制一个星形图案，并填充颜色和描边。

参数：

  • {number} x - 星形中心 x 坐标
  • {number} y - 星形中心 y 坐标
  • {number} side - 星形的顶点数
  • {number} radius - 直径
  • {string} color - 填充颜色
  • {string} borderColor - 边框颜色
  • {number} lineWidth - 边框线宽
  • {Array<number>} dashPattern - 虚线样式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Bitmap.prototype.fillStar = function(x, y, side, radius, color, borderColor, lineWidth, dashPattern) {
    const innerRadius = radius / 2;
    const outerRadius = radius;
    const numPoints = side;
    const angleStep = Math.PI / numPoints;
    this.drawShape(ctx => {
        ctx.beginPath();
        ctx.translate(x, y);
        ctx.moveTo(0, -outerRadius);
        for (let i = 0; i < numPoints * 2; i++) {
            const r = i % 2 === 0 ? outerRadius : innerRadius;
            const angle = angleStep * i;
            ctx.lineTo(r * Math.sin(angle), -r * Math.cos(angle));
        }
        ctx.closePath();
        ctx.setTransform(1, 0, 0, 1, 0, 0);
    }, color, borderColor, lineWidth, dashPattern);
};

填充扇形

填充扇形 - fillSector(x, y, radius, startAngleDegree, degree, color, borderColor, lineWidth, dashPattern)

功能：绘制一个扇形图案，并填充颜色和描边。

参数：

  • {number} x - 圆心 x 坐标
  • {number} y - 圆心 y 坐标
  • {number} radius - 半径
  • {number} startAngleDegree - 起始角度
  • {number} degree - 扇形角度
  • {string} color - 填充颜色
  • {string} borderColor - 边框颜色
  • {number} lineWidth - 边框线宽
  • {Array<number>} dashPattern - 虚线样式
1
2
3
4
5
6
7
8
9
10
Bitmap.prototype.fillSector = function(x, y, radius, startAngleDegree, degree, color, borderColor, lineWidth, dashPattern) {
    const start = Math.toRadians(startAngleDegree);
    const end = Math.toRadians(startAngleDegree + degree);
    this.drawShape(ctx => {
        ctx.beginPath();
        ctx.moveTo(x, y);
        ctx.arc(x, y, radius, start, end, false);
        ctx.closePath();
    }, color, borderColor, lineWidth, dashPattern);
};

填充锯齿波

填充锯齿波 - fillSawtoothWave(x, y, width, height, sw, sh, color)

功能：在指定矩形区域内绘制锯齿波条纹填充。

参数：

  • {number} x - 区域左上角 x 坐标
  • {number} y - 区域左上角 y 坐标
  • {number} width - 区域宽度
  • {number} height - 区域高度
  • {number} sw - 单个锯齿波的宽度
  • {number} sh - 锯齿波振幅高度（从顶部或底部到波峰的距离）
  • {string} [color='#000'] - 填充颜色

返回值：

  • {void} - 无返回值
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
Bitmap.prototype.fillSawtoothWave = function(x, y, width, height, sw, sh, color = '#000') {
    const ctx = this.context;
    ctx.save();
    ctx.beginPath();
    ctx.rect(x, y, width, height);
    ctx.clip();
    ctx.fillStyle = color;
    ctx.fillRect(x, y + sh, width, height - sh*2);

    let fx = 0;
    ctx.beginPath();
    while(fx < width+sw){
        ctx.moveTo(x+fx, y+sh);
        ctx.lineTo(x+sw+fx, y+sh);
        ctx.lineTo(x+fx+sw/2, y);
        ctx.moveTo(x+fx-sw/2, y+sh+height-sh*2);
        ctx.lineTo(x+sw+fx-sw/2, y+sh+height-sh*2);
        ctx.lineTo(x+fx, y+sh+height);
        fx += sw;
    }
    ctx.fill();
    ctx.restore();
    this._baseTexture.update();
};

描边
描边圆角矩形

描边圆角矩形 - strokeRounded(x, y, width, height, radius, color, lineWidth)

功能：通过先填充圆角矩形再擦除内部区域的方式，绘制圆角矩形边框（描边效果）。

参数：

  • {number} x - 矩形左上角 x 坐标
  • {number} y - 矩形左上角 y 坐标
  • {number} width - 矩形宽度
  • {number} height - 矩形高度
  • {number|Object} radius - 圆角半径。为数字时四个角相同，对象可分别指定 {tl, tr, br, bl}
  • {string} color - 边框颜色
  • {number} lineWidth - 边框线宽
1
2
3
4
Bitmap.prototype.strokeRounded = function(x, y, width, height, radius, color, lineWidth) {
    this.fillRounded(x, y, width, height, radius, color)
    this.clearRound(x+lineWidth,y+lineWidth,width-lineWidth*2,height-lineWidth*2,radius)
};
INDEX
#JAVASCRIPT
ID.001 Bitmap扩展
ID.002 Math扩展
ID.003 Array扩展
ACCESS_GRANTED_BY_LIMPID