麒跃科技

介绍

isPointInPath()判断路径中是否包含监测点（作为参数传入）。

isPointInPath()介绍

方法 描述 boolean ctx.isPointInPath(x, y) 判断监测点(x，y)是否在路径内 boolean ctx.isPointInPath(x, y, fillRule) 判断监测点(x，y)和路径的位置关系，通过fillRule来决定是路径内还是路径外。fillRule的可选参数是nonzero(非零环绕算法)和evenadd(奇偶环绕算法)

使用

如果context.rect(10,10,100,100)，那么所有在这个路径内的点都能被isPointInPath(x,y)判断为true，如(50,50);

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

ctx.rect(10, 10, 100, 100);
ctx.stroke();
console.log(ctx.isPointInPath(10, 10)); // true

sPointInStroke()

CanvasRenderingContext2D.isPointInStroke() 是 Canvas 2D API 用于检测某点是否在路径的描边线上的方法。

boolean ctx.isPointInStroke(x, y);
boolean ctx.isPointInStroke(path, x, y);

参数open in new window

x 检测点的 X 坐标。 y 检测点的 Y 坐标。 path Path2Dopen in new window 路径。

返回值open in new window

Booleanopen in new window 一个布尔值，当这个点在路径的描边线上，则返回 true，否则返回 false。 这只是一个使用 isPointInStroke 方法的简单的代码片段，用于检测一个点是否在路径的描边线上。

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

ctx.rect(10, 10, 100, 100);
ctx.stroke();
console.log(ctx.isPointInStroke(10, 10)); // true

拖拽小方块

想要拖拽小方块，我们利用isPointInPath()来判断某一时刻鼠标是否在矩形路径内，如果在路径内，则切换方块为拖拽状态，设定拖拽的样式变化（如光标变小手等等），然后随着鼠标的按下移动通过不断地清除、设定路径、绘制此时刻图像来达成视觉上的拖拽的目的。 image.png 另外有一些必要的细节，我们一定要注意：当鼠标按下拖拽的时候光标位置在矩形内的某个位置，那么在矩形移动后，光标也应该不断保持在矩形的那个位置。 gta8.gif

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拖拽小方块</title>

    <style>
        #canvas {
            cursor: default;
            border: 1px solid black;
        }
    </style>
</head>
<body>
<canvas id="canvas" width="400" height="400">Canvas not supported</canvas>
<p>拖拽方块并实时重绘</p>
</body>
<script>
    'use strict';

    let canvas = document.getElementById('canvas'),
        context = canvas.getContext('2d'),

        //初始时的矩形属性
        initX = 10,
        initY = 10,
        initWidth = 100,
        initHeight = 100,

        isDrag = false,

        //多边形存储在这个地方
        polygons = {
            fillStyle: 'lightgray',
            strokeStyle: 'blue',
            loc: {x: 0, y: 0},
            height: initHeight,
            width: initWidth,
            offsetX: 0,
            offsetY: 0
        };


    //Function……

    /**
     * 绘制初试状态的矩形
     */
    let drawInitRect = () => {
        context.fillStyle = polygons.fillStyle;
        context.strokeStyle = polygons.strokeStyle;
        context.rect(initX, initY, initWidth, initHeight);
        polygons.loc.x = initX;
        polygons.loc.y = initY;
        polygons.width = initWidth;
        polygons.height = initHeight;
        context.fill();
        context.stroke();
    };
    //Event……

    /**
     * 当鼠标按下式
     * @param ev
     */
    canvas.onmousedown = ev => {
        isDrag = context.isPointInPath(ev.clientX, ev.clientY);
        polygons.offsetX = ev.clientX - polygons.loc.x;
        polygons.offsetY = ev.clientY - polygons.loc.y;
        polygons.loc.x = ev.clientX;
        polygons.loc.y = ev.clientY;
    };

    /**
     * 鼠标移动时
     * @param ev
     */
    canvas.onmousemove = ev => {
        if (isDrag) {
            context.beginPath();
            context.clearRect(0, 0, canvas.width, canvas.height);
            context.rect(ev.clientX - polygons.offsetX, ev.clientY - polygons.offsetY, initWidth, initHeight);
            context.fill();
            context.stroke();
        } else {
            //鼠标经过的时候是否需要变小手
            if (context.isPointInPath(ev.clientX, ev.clientY)) {
                //设置光标状态
                canvas.style.cursor = 'pointer';
            } else {
                canvas.style.cursor = 'default';

            }

        }
    };

    canvas.onmouseup = ev => {
        isDrag = false;
        polygons.loc.x = ev.clientX - polygons.offsetX;
        polygons.loc.y = ev.clientY - polygons.offsetY;

    };

    //Init……

    drawInitRect();
</script>
</html>