詳解如何在Canvas上實現(xiàn)坐標定位

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

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

繪制線條

線條的繪制很簡單，我們直接調用函數(shù)：

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

重點是，我們應該怎么獲取到開始點和結束的點呢？

Yeah！ 我們獲取到鼠標當前相對的原點位置，那不就行了。

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";

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

接下來，我們監(jiān)聽鼠標的移動事件并繪制坐標：

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})`
})
// 清空畫布
canvasDom.addEventListener("mouseout", () => {
  clearRect();
})

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

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

y: 元素上邊界相對于視口上邊界的距離

width: 元素的寬度

height: 元素的高度

top: 元素上邊界相對于視口上邊界的距離

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

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

left: 元素左邊界相對于視口左邊界的距離

我們來講個題外話，怎么實現(xiàn) DIV 的拖拽。

實現(xiàn)拖拽動效

實現(xiàn)元素的拖拽，我們只需要監(jiān)聽 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;
  // 計算鼠標相對于元素的偏移量
  let rect = draggableElement.getBoundingClientRect();
  offset.x = event.clientX - rect.left;
  offset.y = event.clientY - rect.top;
});
document.addEventListener('mousemove', function(event) {
  if (!isDragging) return;
  // 阻止默認事件，避免拖拽過程中選中文本等問題
  event.preventDefault();
  // 計算元素應該移動到的位置
  var x = event.clientX - offset.x;
  var y = event.clientY - offset.y;
  // 應用新的位置到元素
  draggableElement.style.transform = `translate(${x}px, ${y}px)`;
});
document.addEventListener('mouseup', function() {
  isDragging = false;
});

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

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

您可能感興趣的文章: