Fatal编程技术网
  • javascript/
  • Javascript 在JS中使用鼠标单击剪切形状，而不使用库，使用html画布

Javascript 在JS中使用鼠标单击剪切形状，而不使用库，使用html画布

javascript canvas graphics

Javascript 在JS中使用鼠标单击剪切形状，而不使用库，使用html画布,javascript,canvas,graphics,mouseevent,Javascript,Canvas,Graphics,Mouseevent,我已经通过在html画布中使用鼠标点击来给点做了一个形状。现在，我必须点击任何一点，并将鼠标点击拖动到另一个位置，形状应该相应地调整（剪切）。但我想通过不使用任何库来实现这一点。我环顾四周，发现大部分代码都使用某种库。有人能帮忙吗？仅使用JS就可以做到这一点吗 html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA

我已经通过在html画布中使用鼠标点击来给点做了一个形状。现在，我必须点击任何一点，并将鼠标点击拖动到另一个位置，形状应该相应地调整（剪切）。但我想通过不使用任何库来实现这一点。我环顾四周，发现大部分代码都使用某种库。有人能帮忙吗？仅使用JS就可以做到这一点吗

html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
</style>

<body>
    <Canvas></Canvas>
</body>
<script>

    class point
    {
        constructor(x,y)
        {
            this.x=x;
            this.y=y;
        }
    }

    class shape
    {
        constructor(value)
        {
            value=value;
            //this.value=value;
        }


        drawShape(c,value,len)
        {
            var i=0;
            c.beginPath()
            c.moveTo(value[0].x,value[0].y)
            for(i=1;i<len;i++)
            {
                c.lineTo(value[i].x,value[i].y)
                c.moveTo(value[i].x,value[i].y)
            }
            c.lineTo(value[0].x,value[0].y)
            c.stroke()
        }
    }
    var canvas = document.querySelector('canvas')

    // canvas.height = window.innerHeight;
    // canvas.width = window.innerWidth;

    canvas.height = window.innerHeight
    canvas.width = window.innerWidth
    var c = canvas.getContext('2d')

    var points = {};
    var points2 = {};
    var p = {};
    var t = {};
    var house = {};
    var i = 0;
    var j = 0;
    var delt = 0;
    var mousePos = {
        x: 0,
        y: 0
    };

    canvas.addEventListener("click",function(e){
        mousePos = getmouseposition(canvas, e);
        checkPoints(mousePos);
    },false);


    function checkPoints(mouse_pos) {
        if (i <= 9) {
            p[j] = new point(mouse_pos.x, mouse_pos.y);
            points[j] = p[j];
            i++;
            j++;
        } 
        else if (i == 10) {
            var house = {
                p: [0],
                p: [1],
                p: [2],
                p: [3],
                p: [4],
                p: [5],
                p: [6],
                p: [7],
                p: [8],
                p: [9]
            };

            shape = new shape(house);
            shape.drawShape(c, points, 9);
            j = 0;
            i++;
        } 
    }

    function getmouseposition(canvas, event) {
        var rect = canvas.getBoundingClientRect();
        return {
            x: event.clientX - rect.left,
            y: event.clientY - rect.top
        };
    }
</script>

</html>

html
页面标题
类点
{
构造函数（x，y）
{
这个.x=x；
这个。y=y；
}
}
阶级形态
{
构造函数（值）
{
价值=价值；
//这个。值=值；
}
drawShape（c、值、长度）
{
var i=0；
c、 beginPath（）
c、 移动到（值[0].x，值[0].y）

对于（i=1；i现在要做的事情是捕捉鼠标位置的重复v。您已经使用了click事件。我建议您在这里收听mousedown事件，并调用您的函数检查间隔内的鼠标位置。间隔的返回值必须保存在类的字段中，以便稍后删除它

因此，在类中为intervalId添加字段：


var points = {};
var points2 = {};
var p = {};
var t = {};
var house = {};
var i = 0;
var j = 0;
var delt = 0;
var mousePos = {
    x: 0,
    y: 0
};
var intervalId;


在间隔内执行逻辑：


canvas.addEventListener("mousedown",function(e){
    intervalId = setInterval(function() {
         mousePos = getmouseposition(canvas, e);
         checkPoints(mousePos);
    }, 500)
}, false);


现在，一旦用户再次释放鼠标按钮，您需要清除inerval。因此，我们为mouseup事件注册另一个事件处理程序：


canvas.addEventListener("mouseup",function(e){
  clearInterval(intervalId);
}, false);



代码没有经过测试，我也没有通读你的所有函数。这应该是我如何处理这个问题的某种指导。
理论上，你和以前一样做。但是，当鼠标按下事件触发时，你需要做相同的重复，直到鼠标向上事件再次触发。也许你可以尝试在鼠标按下时创建一个间隔，该间隔在短时间内捕获鼠标坐标，并在鼠标向上事件触发时取消注册此间隔。如果您能提供一些代码，将非常有帮助：）你我确实理解你的逻辑。一点代码会有帮助。很抱歉我忘记了代码。我会尽快提供它。感谢塞巴斯蒂安K的帮助，你鼠标按下时会定期提供坐标，遗憾的是，它只在鼠标按下时提供第一个坐标，并定期重复。你能尝试绑定鼠标移动eve吗nt当mousedown事件触发并在mouseup上解除绑定时？我想你不再需要间隔了。