Android如何利用控制点的拖拽画一个粽子(android,开发技术)

实现逻辑

拖拽控制点实现这里有两个主要逻辑：

• 控制点的命中判断：即拖拽开始时判断哪个控制点被命中，需要移动。

• 监听触控位置的移动过程：移动过程中动态绘制新的图形，以便直接看到对应的效果。

控制点的命中判断在完成绘制后，首先需要监听触控按下事件，看看触控点是否覆盖了某个控制点的触控响应范围，同时对于距离较近的点，可能会同时命中多个点的触控响应范围，这个时候需要取距离最近的那个点。对于触控范围，我们定义为每个触控点的周边10个像素点。命中触控点的实现代码如下：

intcheckPointToMove(OffsetpressedPoint){//控制点非空才查找if(points.isNotEmpty){varpointsToCheck=<Offset>[];finalmaxDistance=10.0;//查找触控响应范围内的控制点for(Offsetpinpoints){if((p.dx-pressedPoint.dx).abs()<maxDistance&&(p.dy-pressedPoint.dy).abs()<maxDistance){pointsToCheck.add(p);}}//未找到if(pointsToCheck.length==0){return-1;}elseif(pointsToCheck.length==1){//只有一个点，直接返回returnpoints.indexOf(pointsToCheck[0]);}else{//有多个点命中，找到距离最近的点返回Offsetpoint=pointsToCheck[0];vardistance=distanceBetween(pointsToCheck[0],pressedPoint);for(inti=1;i<pointsToCheck.length;i++){varnewDistance=distanceBetween(pointsToCheck[i],pressedPoint);if(newDistance<distance){point=pointsToCheck[i];distance=newDistance;}}returnpoints.indexOf(point);}}return-1;}

移动过程的处理就比较简单了，我们已经找到了命中的控制点，那就在触控位置移动监听响应方法onPointerMove中更新控制点位置，并重新绘制即可，代码如下，其中indexOfPointToMove是一个状态变量，即找到的控制点下标：

onPointerMove:((event){if(indexOfPointToMove!=-1){points[indexOfPointToMove]=event.localPosition;setState((){});}}),

应用

逻辑完成了，我们就来做一个绘制应用吧。考虑端午节快到了，我们尝试来绘制一个粽子的线条画看看。下面是调整前后的对比效果以及调整过程的动图，可以看到，调整后的还是更像粽子一些。