鼠标点击户型图标记点位实现

2023-09-29 06:41:05

前言

在现代家居设计中，户型图标记点位功能非常常见。它允许用户在户型图上点击任意位置来选择设备安放位置，从而实现家具、电器等的合理摆放。本文将介绍如何使用 JavaScript 和 HTML Canvas 来实现户型图标记点位功能，帮助读者快速掌握这项技术。

实现步骤

1. 准备户型图

首先，我们需要准备一张户型图。户型图可以是 JPG、PNG 或 SVG 等格式，但建议使用 SVG 格式，因为它可以放大缩小而不会失真。将户型图保存在本地计算机上。

2. 创建 HTML 页面

创建一个 HTML 页面，并在其中添加一个 <canvas> 元素。<canvas> 元素将用作户型图的画布。

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <canvas id="myCanvas" width="600" height="400"></canvas>
</body>
</html>

3. 加载户型图

使用 JavaScript 将户型图加载到 <canvas> 元素中。

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

var image = new Image();
image.onload = function() {
  ctx.drawImage(image, 0, 0);
};
image.src = "path/to/floor_plan.svg";

4. 添加事件监听器

在 <canvas> 元素上添加一个 click 事件监听器，当用户点击画布时，触发该事件。

canvas.addEventListener("click", function(e) {
  // 获取鼠标点击的位置
  var x = e.clientX - canvas.offsetLeft;
  var y = e.clientY - canvas.offsetTop;

  // 在点击的位置绘制一个点
  ctx.fillStyle = "red";
  ctx.fillRect(x, y, 5, 5);
});

5. 保存标记点位

当用户标记好点位后，我们需要保存这些点位以便后续使用。可以将点位信息保存在数组中，或者使用更复杂的数据结构。

var pointList = [];

canvas.addEventListener("click", function(e) {
  // 获取鼠标点击的位置
  var x = e.clientX - canvas.offsetLeft;
  var y = e.clientY - canvas.offsetTop;

  // 将点位信息保存在数组中
  pointList.push({x: x, y: y});

  // 在点击的位置绘制一个点
  ctx.fillStyle = "red";
  ctx.fillRect(x, y, 5, 5);
});