好家伙为了画这个椭圆我可真的是煞费苦心
首先在uni的canvas里面是没有画椭圆的函数的,想要实现椭圆有很多种方法
- 可以使用lineTo不停的改变很小的间距来画 但是十分耗费性能
- 使用arc画圆,使用scale进行变形
- 可以使用arcTo 贝塞尔曲线等进行椭圆的绘制,主要是要找到控制点,相对麻烦一些
那么我使用的就是第二种方法,主要是因为比较简单,虽然也有一定的弊端 比如进行缩放的时候他的位置会移动 ,再比如画出的曲线线条宽度不一致,但是无伤大雅
下面就是这篇文章的主要内容 椭圆是画出来了,但是我们有倾斜的需求该怎么办呢?就要使用到translate和rotate,具体的都在代码里写了
// 可以参考下思路 主要还是跟据场景来定
drawSkimLine(ctx, x,y,radius) {
ctx.lineWidth = 2;
ctx.strokeStyle = "red";
ctx.beginPath();
ctx.translate(x,y) //将画布的原点定位到 椭圆的圆心
ctx.rotate(30 * Math.PI / 180); //椭圆倾斜的角度
ctx.scale(0.3, 1);//因为arc画的是圆 是通过scale变形变成的椭圆
ctx.arc(0, 0, radius, 0, Math.PI * 2);//画圆 注意这里前两个参数是0,0
ctx.stroke();
ctx.draw();
}
那么这个的重点就是顺序一定一定要按照上面的顺序来,如果先scale 你会发现不管你怎么旋转都是没有用的,如果不先translate去定位原点,旋转和缩放就会脱离轨迹
如果有其他更好的方法欢迎指教,刚开始摸索canvas,嘻嘻,主要是为了记录自己的坑