如何将一个图片裁剪出不规则图形

Creator 3.x
#1

根据一系列坐标点，有什么办法能根据这些坐标点绘制出一个裁剪的效果呢

#2

https://docs.cocos.com/creator/manual/zh/ui-system/components/editor/mask.html?h=mask
类型选择 GRAPHICS_STENCIL 应该就是你说的

#3

谢谢，自定义mask的graphics 处理这个是个好办法。
用graphics 动态的根据一系列坐标点绘制不规则图形这个还不清楚应该怎么搞，请问大佬，这个有思路么

#4

他这个就是让你用点来画图的啊

const mask = this.getComponent(Mask);
mask.type = Mask.Type.GRAPHICS_STENCIL;
const g = mask.graphics;
g.lineWidth = 10;
g.fillColor.fromHEX('#ff0000');
g.moveTo(-40, 0);
g.lineTo(0, -80);
g.lineTo(40, 0);
g.lineTo(0, 80);
g.close();
g.stroke();
g.fill();
#5

我这个图形可能是个不规则的圆形，坐标点的量还挺大的。
遍历坐标点，执行g.lineTo方法 会不会存在性能问题啊。。。

#6

是根据手势画出来的一个 不规则图形

#7

你可以先试试可以实现不，然后再考虑性能。
用shader也可以，不过门槛更高了。

#8

非常感谢，我这试试

#9

const len = this.tempDrawPointsNewWorldDraw.length;

    this.tempDrawPointsNewWorldDraw.push(pos);

let mask2: any = this.MaskBing.getComponent(cc.Mask);
if (len >= 2) {

        // 存在多个点，用线段来清除涂层

        // 冰层

        let prevPos = this.tempDrawPointsNewWorldDraw[len - 2];

        let curPos = this.tempDrawPointsNewWorldDraw[len - 1];
    let stencil2 = mask2._graphics;

stencil2.moveTo(prevPos.x - 13, prevPos.y - 13);

        stencil2.lineTo(curPos.x - 13, curPos.y - 13);

        stencil2.lineWidth = CLEAR_LINE_WIDTH;

        stencil2.lineCap = cc.Graphics.LineCap.ROUND;

        stencil2.lineJoin = cc.Graphics.LineJoin.ROUND;

        // stencil.fillColor = cc.color(255, 255, 255, 255);

        stencil2.strokeColor = cc.color(26, 178, 255, 255);

        stencil2.stroke();

}

tempDrawPointsNewWorldDraw 这个是你要画的那个不规则图形记录坐标的数组

1赞