【微信小程序之画布】三：手指触摸绘画椭圆

微信小程序开发交流qq群   173683895

   承接微信小程序开发。扫码加微信。

正文：

功能：根据手指触摸绘画一个椭圆路径--> 起点为手指开始触摸时的坐标，终点为手指触摸结束时的坐标

效果图：

组件属性的描述在上一节中描述过了，这里不再赘述。

<canvas class='myCanvas' canvas-id="myCanvas" bindtouchstart='EventHandleStart' bindtouchend='EventHandle' binderror="canvasIdErrorCallback" />

.myCanvas{
  border: 1px solid;
  margin: 0 auto;
}

本节重点在 bezierCurveTo  -->创建三次方贝塞尔曲线路径。在最下方会有详细描述

var my_carvas,strat_x,strat_y,end_x,end_y;

Page({
  data: {},
  onLoad: function () {},
  onReady:function(){
    my_carvas = wx.createCanvasContext('myCanvas', this) //1.创建carvas实例对象，方便后续使用。
  },
  // 手指触摸事件
  EventHandleStart:function(e){
    console.log(e)
    strat_x = e.touches[0].x; // 手指开始触摸时的x轴 x轴--->相对于画布左边的距离
    strat_y = e.touches[0].y;// 手指开始触摸时的y轴 y轴--->相对于画布顶部的距离
  },
  //手指触摸结束时的事件
  EventHandle: function (e) {
    console.log(e)
    end_x = e.changedTouches[0].x; // 手指结束触摸时的x轴 x轴--->相对于画布左边的距离
    end_y = e.changedTouches[0].y;// 手指结束触摸时的y轴 y轴--->相对于画布顶部的距离
    my_carvas.beginPath(); //创建一条路径  
    my_carvas.setStrokeStyle('red');  //设置边框为红色
    my_carvas.moveTo(strat_x,strat_y) //描述路径的起点为手指触摸的x轴和y轴
    
    my_carvas.bezierCurveTo(strat_x, strat_y + 20, end_x, end_y + 20, end_x, end_y) 
    my_carvas.moveTo(strat_x, strat_y); //描述路径的起点为手指触摸的x轴和y轴
    my_carvas.bezierCurveTo(strat_x, strat_y - 20, end_x, end_y - 20, end_x, end_y)

    my_carvas.stroke() //画出当前路径的边框
    my_carvas.draw() //将之前在绘图上下文中的描述（路径、变形、样式）画到 canvas 中。
  }

})

 

官方文档 bezierCurveTo 是这么描述的：

 

 

参数

参数	类型	说明
cp1x	Number	第一个贝塞尔控制点的 x 坐标
cp1y	Number	第一个贝塞尔控制点的 y 坐标
cp2x	Number	第二个贝塞尔控制点的 x 坐标
cp2y	Number	第二个贝塞尔控制点的 y 坐标
x	Number	结束点的 x 坐标
y	Number	结束点的 y 坐标

 

 

 

针对 moveTo(20, 20) bezierCurveTo(20, 100, 200, 100, 200, 20) 的三个关键坐标如下：

• 红色：起始点(20, 20)
• 蓝色：两个控制点(20, 100) (200, 100)
• 绿色：终止点(200, 20)

我对 bezierCurveTo 的理解：

1.通过 bezierCurveTo 可以画出一条两端对称的弧线；

2.前四个数分别是左边和右边的坐标

3.可以确定的是第一个蓝点的X坐标和第二个蓝点的X坐标分别对应的是起点和终点的X坐标

4.那么还有最后的两个点，也就是官方描述中的两个100，它们为什么要是100呢？ 我们应该这样理解它们。它们分别应该是起点的Y坐标和终点的Y坐标往上或者往下的弧度。 例如我文中写的 起点坐标+20 和终点坐标+20，含义就是往上弧度为20.这个值可以根据你的需求调整。