移動端h5 使用canvas 實現連線答題功能
1. 先看效果圖
2. 需求描述
移動端,有個能連線答題的功能。從左側拖線移到右側。 1. 線需要在高度不固定的情況下,依舊生效,並且保持在中間的點。 2. 只要求 1對1 的情況。
3. 解決思路
- 首先左右二側的選項我就不說了。重點是劃線部分。
- 藉助於
canvas
實現 畫線功能,檢視示意圖。
-
二個
canvas
標籤,一個是觸控中 劃線的展示,另一個是為了觸控結束之後,真正展示的劃線功能。 -
難點是,
touchend
事件並不會知曉我拖到哪個標籤上了。這和滑鼠事件
截然不同。 -
思路:是不是可以手動算出來到哪的節點了?其實js提供了這個方法。
document.elementFromPoint(event.pageX, event.pageY);
根據 x,y 得出當前的dom元素。
4. 程式碼展示
- 說那麼多,我直接貼程式碼了。如果有不同的業務邏輯,可以自己修改調整。重點的劃線和拖動功能,都已經寫好了。
```js
```
「其他文章」