Kinectjs在画布上鼠标向下位置的准确性和clearRect未按预期工作

Kinectjs accuracy of mousedown position on canvas and clearRect not working as expected

本文关键字：clearRect 准确性工作位置鼠标 Kinectjs 更新时间：2023-09-26

我正在编写一个用户界面来确定点击对象的准确性。看到KineticJS，觉得这将是一个很好的工具。

我创建了一个简单的舞台，里面有一个圆圈。我试图在圆圈内有人点击的点上画一个十字架。我发现绘制的点偏移到屏幕上光标图标的右下角。此外，我也不知道为什么我似乎不能清除区域，我画了一些文本来显示鼠标坐标。此刻，我在同一个地方看到了这种奇怪的文本叠加。

感谢任何意见/建议。

谢谢。

index.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <script type="text/javascript" src="./assets/js/kineticjs/kinetic-v3.10.5.js"></script>
    <script type="text/javascript" src="./assets/js/pointingRender/pointingrender.js"></script> 
    <script type="text/javascript">
        $(document).ready(function(){
            initRender();
        });
    </script>
    <title>Pointing Devices User Interface</title>
</head>
<body>
<div id="container">
    <div id="mouseposition"></div>
</div>
</body>
</html>

pointingrender.js:

function initRender() {
    var stage = new Kinetic.Stage({
        container:"container",
        width:1920,
        height:1080
    });
    var layer = new Kinetic.Layer();
    var circle = new Kinetic.Circle({
        x:150,
        y:stage.getHeight() / 2,
        radius:70,
        fill:"red",
        stroke:"black",
        strokeWidth:4
    });

    var oval = new Kinetic.Ellipse({
        x:400,
        y:stage.getHeight() / 2,
        radius:{
            x:100,
            y:50
        },
        fill:"yellow",
        stroke:"black",
        strokeWidth:4,
        draggable:true
    });
    oval.on("mouseover", function () {
        document.body.style.cursor = "pointer";
    });
    oval.on("mouseout", function () {
        document.body.style.cursor = "default";
    });
    circle.on("mousedown", function(evt){
        var x = evt.clientX;
        var y = evt.clientY;
        var crossHorizontal = new Kinetic.Line({
                  points: [x-5, y, x+5, y],
                  stroke: "black",
                  strokeWidth: 1
                });
        var crossVertical = new Kinetic.Line({
                          points: [x, y-5, x, y+5],
                          stroke: "black",
                          strokeWidth: 1
                        });
        var anotherlayer = new Kinetic.Layer();
        anotherlayer.add(crossHorizontal);
        anotherlayer.add(crossVertical);
        stage.add(anotherlayer);
    });
    // add the shapes to the layer
    layer.add(circle);
    layer.add(oval);
    // add the layer to the stage
    stage.add(layer);
    var canvas = layer.getCanvas();
        var context = canvas.getContext('2d');
    var theDiv = document.getElementById('container');
        theDiv.addEventListener('mousemove', function (evt) {
            var mousePos = getMousePos(theDiv, evt);
            var message = "Mouse position: " + mousePos.x + "," + mousePos.y;
            writeMessage(canvas, message);
        }, false);
}
function writeMessage(canvas, message) {
    var context = canvas.getContext('2d');
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.font = '18pt Calibri';
    context.fillStyle = 'black';
    context.fillText(message, 10, 25);
}

function getMousePos(canvas, evt) {
    var rect = canvas.getBoundingClientRect();
    // return relative mouse position
    var mouseX = evt.clientX ;
    var mouseY = evt.clientY ;
    return {
        x:mouseX,
        y:mouseY
    };
}

Add"var messagelayer=new Kinetic.Layer（）；用于显示消息层并添加"canvas.clear（） "在writeMessage函数中清除消息。

function initRender() {
    var stage = new Kinetic.Stage({
        container:"container",
        width:500,
        height:600
    });
    var layer = new Kinetic.Layer();
    var messagelayer = new Kinetic.Layer();
    var circle = new Kinetic.Circle({
        x:150,
        y:stage.getHeight() / 2,
        radius:70,
        fill:"red",
        stroke:"black",
        strokeWidth:4
    });

    var oval = new Kinetic.Ellipse({
        x:400,
        y:stage.getHeight() / 2,
        radius:{
            x:100,
            y:50
        },
        fill:"yellow",
        stroke:"black",
        strokeWidth:4,
        draggable:true
    });
    oval.on("mouseover", function () {
        document.body.style.cursor = "pointer";
    });
    oval.on("mouseout", function () {
        document.body.style.cursor = "default";
    });
    circle.on("mousedown", function(evt){
        var x = evt.clientX;
        var y = evt.clientY;
        var crossHorizontal = new Kinetic.Line({
                  points: [x-5, y, x+5, y],
                  stroke: "black",
                  strokeWidth: 1
                });
        var crossVertical = new Kinetic.Line({
                          points: [x, y-5, x, y+5],
                          stroke: "black",
                          strokeWidth: 1
                        });
        var anotherlayer = new Kinetic.Layer();
        anotherlayer.add(crossHorizontal);
        anotherlayer.add(crossVertical);
        stage.add(anotherlayer);
    });
    // add the shapes to the layer
    layer.add(circle);
    layer.add(oval);
    // add the layer to the stage
    stage.add(layer);
    stage.add(messagelayer);
    var canvas = messagelayer.getCanvas();
        var context = canvas.getContext('2d');
    var theDiv = document.getElementById('container');
        theDiv.addEventListener('mousemove', function (evt) {
            var mousePos = getMousePos(theDiv, evt);
            var message = "Mouse position: " + mousePos.x + "," + mousePos.y;
            writeMessage(canvas, message);
        }, false);
}
function writeMessage(canvas, message) {
    var context = canvas.getContext('2d');
    canvas.clear();
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.font = '18pt Calibri';
    context.fillStyle = 'black';
    context.fillText(message, 10, 25);
}

function getMousePos(canvas, evt) {
    var rect = canvas.getBoundingClientRect();
    // return relative mouse position
    var mouseX = evt.clientX ;
    var mouseY = evt.clientY ;
    return {
        x:mouseX,
        y:mouseY
    };
}

在function getMousePos()中，您获取了边界矩形（rect），但从未根据它调整mouseX和mouseY。我相信您看到的偏移量与画布的偏移量有关。相反，你应该这样做：

    var mouseX = evt.clientX - rect.left;
    var mouseY = evt.clientY - rect.top;