Graphics 绘制 跟 canvas 不一致

Creator 3.x
#1

Graphics 绘制出来的内容和html canvas 不一致

<html>
    <head></head>
    <body>
        <canvas id="myCanvas" width="1024" height="1024"></canvas>
    </body>
    <script type="text/javascript">
        var canvas=document.getElementById('myCanvas');
        var ctx=canvas.getContext('2d');
        ctx.scale(1, -1)
        ctx.translate(0, -900)
        ctx.fillStyle='#FF0000';
        ctx?.moveTo(276, 728)
        ctx?.quadraticCurveTo (291, 722, 336, 729)
        ctx?.quadraticCurveTo (441, 762, 683, 784)
        ctx?.quadraticCurveTo (725, 788, 739, 785)
        ctx?.quadraticCurveTo (752, 775, 751, 769)
        ctx?.quadraticCurveTo (751, 765, 715, 695)
        ctx?.quadraticCurveTo (706, 682, 713, 677)
        ctx?.quadraticCurveTo (720, 673, 738, 683)
        ctx?.quadraticCurveTo (796, 717, 842, 728)
        ctx?.quadraticCurveTo (881, 738, 880, 747)
        ctx?.quadraticCurveTo (879, 757, 809, 813)
        ctx?.quadraticCurveTo (784, 834, 726, 820)
        ctx?.quadraticCurveTo (599, 808, 528, 794)
        ctx?.lineTo(489, 789)
        ctx?.quadraticCurveTo (437, 785, 376, 774)
        ctx?.quadraticCurveTo (327, 767, 278, 762)
        ctx?.bezierCurveTo (248, 759, 246, 732, 276, 728)
        ctx.fill()
        </script>
</html>

上面的在 html 中显示为：

截屏2021-04-30 下午5.59.58
截屏2021-04-30 下午5.59.581517×755 5.57 KB

在 creator 中显示为
截屏2021-04-30 下午6.00.41

忽略大小，只看形状

下面是cocos creator 代码

import { _decorator, Component, Graphics } from 'cc';
const { ccclass } = _decorator;

@ccclass('T')
export class T extends Component {

    start () {
        let ctx = this.getComponent(Graphics)
        ctx.moveTo(20, 20);
        ctx.quadraticCurveTo(20, 100, 200, 20);
        ctx.fill();
        ctx?.moveTo(276, 728)
        ctx?.quadraticCurveTo (291, 722, 336, 729)
        ctx?.quadraticCurveTo (441, 762, 683, 784)
        ctx?.quadraticCurveTo (725, 788, 739, 785)
        ctx?.quadraticCurveTo (752, 775, 751, 769)
        ctx?.quadraticCurveTo (751, 765, 715, 695)
        ctx?.quadraticCurveTo (706, 682, 713, 677)
        ctx?.quadraticCurveTo (720, 673, 738, 683)
        ctx?.quadraticCurveTo (796, 717, 842, 728)
        ctx?.quadraticCurveTo (881, 738, 880, 747)
        ctx?.quadraticCurveTo (879, 757, 809, 813)
        ctx?.quadraticCurveTo (784, 834, 726, 820)
        ctx?.quadraticCurveTo (599, 808, 528, 794)
        ctx?.lineTo(489, 789)
        ctx?.quadraticCurveTo (437, 785, 376, 774)
        ctx?.quadraticCurveTo (327, 767, 278, 762)
        ctx?.bezierCurveTo (248, 759, 246, 732, 276, 728)
        ctx.fill()
    }
}
#2

3.0 版本会出现这个问题

试了下 2.4.5 版本，不会出现这个问题

#3

截屏2021-05-03 下午6.25.08

3.0 版本下面，stroke 是正常的，但是fill 是有问题

#4

求助引擎组的大佬们

#5

@panda panda 求助求助 :rofl:，2.4.5 展示ok，但是 2.4.5 的 mask 的 type 不支持 Graphics

#6

具体是什么平台呢

#7

系统：截屏2021-05-08 下午7.10.22

cocos版本：


版本 3.0.1

引擎 76fc41a

编辑器 2561ff3

原生引擎 02f4f05

原生扩展 f68d1e5

cocos 命令行 0a3a1e1
#8

是预览，还是构建，还是编辑器，构建的是什么平台？

#9

浏览器预览

#10

此问题会在 3.5.0 修复，感谢反馈。

#11

3.5.1还是有这个问题

#12

大家好，这个问题可以通过修改引擎脚本 earcut.ts 中源码解决，添加如下图红框内的代码，之后编译引擎让代码生效即可：

#13

今天发布了3.6.2， 看changelog 说解决了这个问题，赶紧试了一下，哎，涛声依旧啊！

#14

3.6.2了已经，仍然没有解决！!!