鍍金池/ 問答/HTML5  室內(nèi)設(shè)計(jì)  HTML/ javascript移動(dòng)鼠標(biāo)畫一條線

javascript移動(dòng)鼠標(biāo)畫一條線

圖片描述

如圖,從上面的點(diǎn)按下鼠標(biāo),移動(dòng)鼠標(biāo)到下面的點(diǎn),松開鼠標(biāo)畫一條從上至下的連線;
目前在網(wǎng)上查的是用canvas畫的,但是我目前的dom結(jié)構(gòu)只是用了svg還沒有用canvas。
除了canvas之外有什么可行的解決方案嗎?

回答
編輯回答
孤毒

因?yàn)檫€在加班所以大致提個(gè)思路,當(dāng)然不一定對(duì)啊..
0、先寫個(gè)div,border為1px,隱藏
1、在上面的點(diǎn)點(diǎn)擊時(shí),修改一個(gè)狀態(tài)表示flag = true,并記下點(diǎn)擊坐標(biāo)
2、在hover到下面的點(diǎn)的時(shí)候,如果flag == true,那讓div顯示出來,然后獲得移入坐標(biāo)
3、給div做變換,scale跟rotate用起點(diǎn)跟終點(diǎn)的坐標(biāo)算
4、顯示div
5、flag = false

2018年8月13日 05:37
編輯回答
維她命

畫一個(gè)寬度為0的div

2017年11月4日 07:49