Question

我正在编写一个用户界面来确定点击某个对象的准确性。看到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
    };
}

Answer 1

添加“ var messagelayer = new Kinetic.Layer（）; 以显示消息层，并在writeMessage函数中添加” canvas.clear（）; “以获取清除消息。

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
    };
}

Answer 2

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

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

Kinectjs在画布上的mousedown位置的准确性和clearRect不能按预期工作

2 个答案: