Canvas 绘制点在指定线段上移动

皮卡皮卡Sue

于 2024-06-30 12:42:30 发布

阅读量140

点赞数 1

分类专栏： Canvas学习文章标签：算法前端 javascript html5

本文链接：https://blog.csdn.net/qq_35322029/article/details/139143408

版权

Canvas学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本篇需要懂的基础是懂得线性代数的向量点积理论知识, 需要复习或者学习的可以点击：理解向量点积

接下来利用向量点积比例 t = AM * AB / AB的长 简单实现在指定线上移动某一个点

线段的起始点设置为startPoint(x, y), endPoint(x, y), 当前鼠标的点为mousePoint(mouseX, mouseY), 那么t就应该是：

t = ((mouseX - startPoint.x) * (endPoint.x - startPoint.x) + (mouseY - startPoint.y) * (endPoint.y - startPoint.y / ((endPoint.x - startPoint.x) ** 2 + (endPoint.y - startPoint.y) ** 2);

所以鼠标当前位置的坐标应该是：

const pointX = startPoint.x + t * (endPoint.x - startPoint.x);
const pointY = startPoint.y + t * (endPoint.y - startPoint.y);

核心代码实现：

// 移动点的方法
function movePointOnLine(startPoint, endPoint, mouseX, mouseY) {
    if (startPoint.x === endPoint.x && startPoint.y === endPoint.y) {
        // 起始点和终点重合，无法计算直线，直接返回
        return;
    }

    // 计算点的位置比例
    const t = ((mouseX - startPoint.x) * (endPoint.x - startPoint.x) + (mouseY - startPoint.y) * (endPoint.y - startPoint.y)) /
        ((endPoint.x - startPoint.x) ** 2 + (endPoint.y - startPoint.y) ** 2);

    // 限制位置比例在 0 到 1 之间
    const tClamped = Math.max(0, Math.min(1, t));

    // 计算点的坐标
    const pointX = startPoint.x + tClamped * (endPoint.x - startPoint.x);
    const pointY = startPoint.y + tClamped * (endPoint.y - startPoint.y);
}

完整代码demo：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Move Point on Line</title>
<style>
    body {
        margin: 0;
        padding: 0;
    }
    canvas {
        display: block;
        margin: auto;
        border: 1px solid #000;
    }
</style>
</head>
<body>

<canvas id="myCanvas"></canvas>

<script>
document.addEventListener('DOMContentLoaded', function () {
    // 创建画布
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');

    // 设置画布大小
    canvas.width = 800;
    canvas.height = 600;

    // 绘制函数
    function drawLine(startPoint, endPoint) {
        ctx.beginPath();
        ctx.moveTo(startPoint.x, startPoint.y);
        ctx.lineTo(endPoint.x, endPoint.y);
        ctx.stroke();
    }

    // 绘制点函数
    function drawPoint(x, y) {
        ctx.beginPath();
        ctx.arc(x, y, 5, 0, Math.PI * 2);
        ctx.fillStyle = 'red';
        ctx.fill();
    }

    // 移动点的方法
    function movePointOnLine(startPoint, endPoint, mouseX, mouseY) {
    if (startPoint.x === endPoint.x && startPoint.y === endPoint.y) {
        // 起始点和终点重合，无法计算直线，直接返回
        return;
    }

    // 计算点的位置比例
    const t = ((mouseX - startPoint.x) * (endPoint.x - startPoint.x) + (mouseY - startPoint.y) * (endPoint.y - startPoint.y)) /
        ((endPoint.x - startPoint.x) ** 2 + (endPoint.y - startPoint.y) ** 2);

    // 限制位置比例在 0 到 1 之间
    const tClamped = Math.max(0, Math.min(1, t));

    // 计算点的坐标
    const pointX = startPoint.x + tClamped * (endPoint.x - startPoint.x);
    const pointY = startPoint.y + tClamped * (endPoint.y - startPoint.y);

    // 清空画布
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // 重新绘制线段和点
    drawLine(startPoint, endPoint);
    drawPoint(pointX, pointY);
}

    // 定义起始点和终点
    const startPoint = { x: 100, y: 400 };
    const endPoint = { x: 400, y: 100 }; // 假设起始点和终点是同一个点

    // 初始化绘制
    drawLine(startPoint, endPoint);

    // 定义点的初始位置
    let pointX = startPoint.x;
    let pointY = startPoint.y;

    // 绘制初始点
    drawPoint(pointX, pointY);

    let isDragging = false;

    // 监听鼠标按下事件
    canvas.addEventListener('mousedown', (event) => {
        const mouseX = event.clientX - canvas.getBoundingClientRect().left;
        const mouseY = event.clientY - canvas.getBoundingClientRect().top;

        // 判断是否在点上
        const distance = Math.sqrt((mouseX - pointX) ** 2 + (mouseY - pointY) ** 2);
        if (distance < 5) {
            isDragging = true;
        }
    });

    // 监听鼠标移动事件
    canvas.addEventListener('mousemove', (event) => {
        if (isDragging) {
            const mouseX = event.clientX - canvas.getBoundingClientRect().left;
            const mouseY = event.clientY - canvas.getBoundingClientRect().top;

            // 移动点的位置
            movePointOnLine(startPoint, endPoint, mouseX, mouseY);

            // 更新点的位置坐标
            pointX = mouseX;
            pointY = mouseY;
        }
    });

    // 监听鼠标松开事件
    canvas.addEventListener('mouseup', () => {
        isDragging = false;
    });
});
</script>

</body>
</html>

运行效果：