首页 > 其他 > 详细

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

时间:2017-02-03 13:22:28      阅读:263      评论:0      收藏: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()

 

效果图:

技术分享

 

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

原文:http://www.cnblogs.com/mysnk/p/6362245.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!