當(dāng)前位置：首頁 >

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

發(fā)布時間：2025/3/8 17 豆豆

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

上一篇Canvas的博文寫完后，有位朋友希望能對Canvas繪制出來的圖像進行點擊、拖拽等操作，因為Canvas繪制出的圖像能很好的美化。好像是想做爐石什么的游戲，我也沒玩過。

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

思路：

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

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

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

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

準(zhǔn)備工作完成后，我們先來看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;

}

};

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

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

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

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

修正后：

點擊時光標(biāo)總會“粘”在div某點上。

接下來繪制圖片：

首先定義全局變量X和Y，它們是為了實時更新圖像的繪制坐標(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);

}

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

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

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

X=moveEvent.clientX-mwidth;

Y=moveEvent.clientY-mheight;

最后加上div和圖像的活動范圍：

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;

}

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

徹底隱藏div看看效果：

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

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

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

整理后的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; 下面四個條件為限制div以及圖像的活動邊界