快捷導(dǎo)航

詳解如何在Canvas上實(shí)現(xiàn)坐標(biāo)定位

更新時(shí)間：2023年08月22日 13:57:22 作者：Jimmy

這篇文章我們將來(lái)詳細(xì)的給大家講解一下如何在 canvas 上實(shí)現(xiàn)坐標(biāo)的定位,文中有詳細(xì)的代碼示例供大家參考,具有一定的參考價(jià)值,需要的朋友可以參考下

繪制線條

線條的繪制很簡(jiǎn)單，我們直接調(diào)用函數(shù)：

ctx.moveTo(beginPointX, beginPointY);
ctx.lineTo(endPointX, endPointY)；

重點(diǎn)是，我們應(yīng)該怎么獲取到開(kāi)始點(diǎn)和結(jié)束的點(diǎn)呢？

Yeah！ 我們獲取到鼠標(biāo)當(dāng)前相對(duì)的原點(diǎn)位置，那不就行了。

let canvasDom = document.getElementById("canvas");
canvasDom.width = canvasDom.parentNode.clientWidth;
canvasDom.height = canvasDom.parentNode.clientHeight;
let ctx = canvasDom.getContext("2d");
ctx.strokeStyle = "red";
ctx.lineWidth = 1;
ctx.font = "14px Arial";
ctx.textAlign = "center";
ctx.textBaseline = "middle";

首先，我們獲取畫(huà)布元素并設(shè)定畫(huà)布的寬和高。并且設(shè)置畫(huà)筆 ctx 的粗細(xì)，顏色。繪制字體的大小，字體等。

接下來(lái)，我們監(jiān)聽(tīng)鼠標(biāo)的移動(dòng)事件并繪制坐標(biāo)：

let draggableElement = document.getElementById("move-content");
canvasDom.addEventListener("mousemove", (event) => {
  clearRect();
  let react = canvasDom.getBoundingClientRect();
  let x = event.clientX - react.left;
  let y = event.clientY - react.top;
  // 繪制十字架
  ctx.beginPath();
  ctx.moveTo(0, y);
  ctx.lineTo(canvasDom.width, y);
  ctx.stroke();
  ctx.beginPath();
  ctx.moveTo(x, 0);
  ctx.lineTo(x, canvasDom.height);
  ctx.stroke();
  // 繪制文本
  ctx.fillText(`(${x}, ${y})`, x, y);
  draggableElement.innerText = `(${x}, ${y})`
})
// 清空畫(huà)布
canvasDom.addEventListener("mouseout", () => {
  clearRect();
})

getBoundingClientRect() 是 DOM 元素對(duì)象的方法，用于獲取該元素相對(duì)于視口的位置和尺寸信息。

該方法返回一個(gè) DOMRect 對(duì)象，其中包含以下屬性： x: 元素左邊界相對(duì)于視口左邊界的距離

y: 元素上邊界相對(duì)于視口上邊界的距離

width: 元素的寬度

height: 元素的高度

top: 元素上邊界相對(duì)于視口上邊界的距離

right: 元素右邊界相對(duì)于視口左邊界的距離

bottom: 元素下邊界相對(duì)于視口上邊界的距離

left: 元素左邊界相對(duì)于視口左邊界的距離

我們來(lái)講個(gè)題外話，怎么實(shí)現(xiàn) DIV 的拖拽。

實(shí)現(xiàn)拖拽動(dòng)效

實(shí)現(xiàn)元素的拖拽，我們只需要監(jiān)聽(tīng) mousedown，mousemove 和 mouseup 事件即可：

let draggableElement = document.getElementById("move-content");
let isDragging = false;
let offset = { x: 0, y: 0 };
draggableElement.addEventListener("mousedown", function(event) {
  isDragging = true;
  // 計(jì)算鼠標(biāo)相對(duì)于元素的偏移量
  let rect = draggableElement.getBoundingClientRect();
  offset.x = event.clientX - rect.left;
  offset.y = event.clientY - rect.top;
});
document.addEventListener('mousemove', function(event) {
  if (!isDragging) return;
  // 阻止默認(rèn)事件，避免拖拽過(guò)程中選中文本等問(wèn)題
  event.preventDefault();
  // 計(jì)算元素應(yīng)該移動(dòng)到的位置
  var x = event.clientX - offset.x;
  var y = event.clientY - offset.y;
  // 應(yīng)用新的位置到元素
  draggableElement.style.transform = `translate(${x}px, ${y}px)`;
});
document.addEventListener('mouseup', function() {
  isDragging = false;
});

上面的代碼一目了然，需要注意的是，我們應(yīng)用新的位置到元素的時(shí)候，使用的樣式是 draggableElement.style.transform，調(diào)用的是屬性 transform，而不是 top, left 等相對(duì)定位。是因?yàn)?transform 的性能更友好，這一步是在合成線程中進(jìn)行，避免了重排的情況。

到此這篇關(guān)于詳解如何在Canvas上實(shí)現(xiàn)坐標(biāo)定位的文章就介紹到這了,更多相關(guān)Canvas實(shí)現(xiàn)坐標(biāo)定位內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: