【已解决】Graphics绘制组件异常显示

Creator版本:2.4.2
目标平台:手机WEB端
重现方式:长按屏幕1到2秒左右后绘制
手机型号:荣耀30
浏览器:内置
编辑器操作系统:Windows
重现概率:90%


面板设置


代码部分

方便您复制测试
this.node.on(cc.Node.EventType.TOUCH_START, function (res) { if (res.getTouches().length > 1) { return; } var position = this.node.convertToNodeSpaceAR(cc.v2(res.touch._point.x, res.touch._point.y)); this.node.getComponent(cc.Graphics).moveTo(position.x, position.y); }.bind(this)); this.node.on(cc.Node.EventType.TOUCH_MOVE, function (res) { if (res.getTouches().length > 1) { return; } var position = this.node.convertToNodeSpaceAR(cc.v2(res.touch._point.x, res.touch._point.y)); this.node.getComponent(cc.Graphics).lineTo(position.x, position.y); this.node.getComponent(cc.Graphics).stroke(); }.bind(this));
在pc浏览器中正常的显示效果

在手机浏览器中异常的显示效果

在TOUCH_MOVE的回调函数的最后一行加上

this.node.getComponent(cc.Graphics).moveTo(position.x, position.y);

stroke方法会把moveTo的起点到所有lineTo的端点连线再填充,所以每次lineTo后都要把起点移动到尾端,这样每次move的时候才能只画最后一小段

感谢= = 。 没想到一行代码就解决了。

关键啊。。