首页 > js h5 canvas拉线选择题

js h5 canvas拉线选择题

1.移动端js或者jq canvas 实现连线选择题功能
2.图片:
3.需求描述:
第一步

1.手指划过左边小手指图标(以下称小手),以小手为起点拉出一条直线
2.且跟随人手指移动而变化长短
3.当人指移到右图abcd任何一个图标且松开时,以abcd为终点汇出直线

第二步

如果已经连好直线的情况,
比如图中左图1连接了右图c的情况下,这时人指重新滑过图1则之前的连线(图1与图c)取消,
重新实现第一步
当我图1连图b时,汇出图1与图b的连线,并且取消先前图b与图orange的连线

通俗描述:就是个连线选择题,且连好线了还可以重新连线(更改答案),
一个图标只能连一根线,若有第二根线搭上,则取消前一根线搭上第二个线。

请教大神 此功能的详细思路 谢谢了
特别是第二步的详细思路,一个图标只能连一根线,在连好线的情况下怎么取消前一条线,重新拉出新线


第二步主要思路:一个答案只能对应一个来源。把答案对应的来源当做一个长度最大为1的数组[]。
当移动到该答案的时候,检查这个数组是否为空,若不为空,则清空,再绘制新的线。

【热门文章】
【热门文章】