QML+Canvas画粗线断裂问题的解决办法

Posted on 2017-02-03 11:53  S.N.K  阅读(1492)  评论(0)    收藏  举报

近期用Qt开发手机应用，有个让用户用手指在屏幕自由画线的需求，所以查阅了一些资料，初步实现了画线功能。

但是发现在设置线条粗细大于5.0，线条有弧度时，会产生明显的断裂效果。

效果图：

于是查看文档，发现线条样式除了设置宽以外，还有3个属性。

按文档描述，lineJoin应该可以解决断裂问题，但是测试并没有效果，查看示例代码，应该是需要在stroke之前画的2条线才会形成拐角效果。

于是只能尝试使用lineCap，即设置线条端点样式为圆形线帽，成功解决问题。

附上代码：

1 var ctx = getContext('2d')
2 ctx.beginPath();
3 ctx.lineCap="round";
4 ctx.moveTo(lastPosX, lastPosY)
5 lastPosX = area.mouseX
6 lastPosY = area.mouseY
7 ctx.lineTo(lastPosX, lastPosY)
8 ctx.stroke()

 

效果图：