當(dāng)前位置：首頁(yè) > 编程语言 > python >内容正文

python

python canvas画移动物体_如何实现Canvas图像的拖拽、点击等操作

發(fā)布時(shí)間：2025/3/8 python 15 豆豆

生活随笔收集整理的這篇文章主要介紹了 python canvas画移动物体_如何实现Canvas图像的拖拽、点击等操作小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

上一篇Canvas的博文寫完后，有位朋友希望能對(duì)Canvas繪制出來(lái)的圖像進(jìn)行點(diǎn)擊、拖拽等操作，因?yàn)镃anvas繪制出的圖像能很好的美化。好像是想做爐石什么的游戲，我也沒(méi)玩過(guò)。

Canvas在我的理解中就好像在一張畫布上繪制圖像，它只能看到卻“摸”不到，那要如何進(jìn)行操作呢。我不知道網(wǎng)上是怎么做的，這里用自己的想法做了個(gè)DEMO分享給大家。

思路：

雖然Canvas不能拖拽，但div可以拖拽，那怎么把二者結(jié)合起來(lái)呢。初步想法是將一個(gè)與Canvas圖像大小差不多的div覆蓋在其上，在拖拽div時(shí)將獲取的光標(biāo)坐標(biāo)修正后傳給Canvas繪制函數(shù)并刷新圖像的位置。

既然要覆蓋，先做些準(zhǔn)備工作：

1.將div與Canvas畫布均position:absolute，否則無(wú)法重疊。

2.將div的z-index值設(shè)置大點(diǎn)，保證其在Canvas畫面之上。

準(zhǔn)備工作完成后，我們先來(lái)看div的拖拽：

var divObj=document.getElementById("cover");var moveFlag=false;

divObj.οnmοusedοwn=function(e){

moveFlag=true;var clickEvent=window.event||e;var mwidth=clickEvent.clientX-divObj.offsetLeft;var mheight=clickEvent.clientY-divObj.offsetTop;

document.οnmοusemοve=function(e){var moveEvent=window.event||e;if(moveFlag){

divObj.style.left=moveEvent.clientX-mwidth+"px";

divObj.style.top=moveEvent.clientY-mheight+"px";

divObj.οnmοuseup=function(){

moveFlag=false;

}

};

來(lái)解讀下這段代碼：首先獲取div對(duì)象，設(shè)置拖拽標(biāo)志moveFlage,當(dāng)onmousedown時(shí)為true表示可以拖動(dòng)，當(dāng)onmouseup時(shí)為false表示不能拖動(dòng)了。

var clickEvent=window.event||e;var mwidth=clickEvent.clientX-divObj.offsetLeft;var mheight=clickEvent.clientY-divObj.offsetTop;

這三行代碼是為了修正光標(biāo)位置。當(dāng)點(diǎn)擊時(shí)，記錄下光標(biāo)在div上的位置。mwidth和mheight表示光標(biāo)落點(diǎn)相對(duì)于div左邊和上邊的距離。如果不加修正：

這就是不加修正的結(jié)果，當(dāng)光標(biāo)點(diǎn)下時(shí)，div的坐標(biāo)即左上角會(huì)與光標(biāo)坐標(biāo)一致。

修正后：

點(diǎn)擊時(shí)光標(biāo)總會(huì)“粘”在div某點(diǎn)上。

接下來(lái)繪制圖片：

首先定義全局變量X和Y，它們是為了實(shí)時(shí)更新圖像的繪制坐標(biāo)。

var ctx=document.getElementById("myCanvas").getContext("2d");var img=document.getElementById("myImg");functiondrawImg(){

ctx.clearRect(0,0,1000,500);

ctx.beginPath();

ctx.drawImage(img,X,Y);

ctx.closePath();

ctx.stroke();

}

window.οnlοad=function(){

setInterval(drawImg,1);

}

獲取“畫筆”，獲取圖片對(duì)象。這里setInterval循環(huán)執(zhí)行繪制圖片的函數(shù)，以刷新圖片的位置，setInterval的間隔值越小，拖拽起來(lái)越“流暢”。

同時(shí)別忘了clearRect，當(dāng)圖片移動(dòng)到下一個(gè)位置時(shí)，清除上一個(gè)位置的圖片，參數(shù)為Canvas畫布的坐標(biāo)和尺寸。

在拖拽時(shí)將修正后的光標(biāo)坐標(biāo)傳給X、Y：

X=moveEvent.clientX-mwidth;

Y=moveEvent.clientY-mheight;

最后加上div和圖像的活動(dòng)范圍：

if(moveEvent.clientX<=mwidth){

divObj.style.left=0+"px";

X=0;

}if(parseInt(divObj.style.left)+divObj.offsetWidth >=1000){

divObj.style.left=1000 - divObj.offsetWidth+"px";

X=1000 -divObj.offsetWidth;

}if(moveEvent.clientY<=mheight){

divObj.style.top=0+"px";

Y=0;

}if(parseInt(divObj.style.top)+divObj.offsetHeight>=500){

divObj.style.top=500-divObj.offsetHeight+"px";

Y=500-divObj.offsetHeight;

}

這個(gè)就看個(gè)人的要求了，注意是要同時(shí)限定div和圖片的活動(dòng)范圍。1000與500為本例的畫布大小，如果是在整個(gè)頁(yè)面里活動(dòng)就換成innerWidth或innerHeight。

徹底隱藏div看看效果：

最后說(shuō)下點(diǎn)擊事件，這里要注意的是在拖拽的過(guò)程中onmousedown與onmouseup二者就構(gòu)成了一個(gè)click過(guò)程，但我們不希望在拖拽結(jié)束后觸發(fā)點(diǎn)擊事件。

這里有個(gè)比較簡(jiǎn)單的辦法，定義一個(gè)clickFlag默認(rèn)為false,當(dāng)onmousedown時(shí)設(shè)為true，若進(jìn)行了onmousemove事件時(shí)設(shè)為false。

在最后onmouseup時(shí)判斷clickFlag的值，為true時(shí)才觸發(fā)點(diǎn)擊事件。也就是說(shuō)當(dāng)你按下鼠標(biāo)時(shí)，只有不發(fā)現(xiàn)移動(dòng)，松開(kāi)鼠標(biāo)時(shí)才會(huì)觸發(fā)點(diǎn)擊事件。

整理后的JS代碼：

//繪制圖片坐標(biāo)

var X=0;var Y=0;//js部分

var divObj=document.getElementById("cover");var moveFlag=false;//區(qū)別moueseup與click的標(biāo)志

var clickFlag=false;//拖拽函數(shù)

divObj.οnmοusedοwn=function(e){

moveFlag=true;

clickFlag=true;var clickEvent=window.event||e;var mwidth=clickEvent.clientX-divObj.offsetLeft;var mheight=clickEvent.clientY-divObj.offsetTop;

document.οnmοusemοve=function(e){

clickFlag=false;var moveEvent=window.event||e;if(moveFlag){

divObj.style.left=moveEvent.clientX-mwidth+"px";

divObj.style.top=moveEvent.clientY-mheight+"px"; 將鼠標(biāo)坐標(biāo)傳給Canvas中的圖像

X=moveEvent.clientX-mwidth;

Y=moveEvent.clientY-mheight; 下面四個(gè)條件為限制div以及圖像的活動(dòng)邊界