1

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

我创建了一个简单的舞台，里面有一个圆圈。我试图在圆圈内有人点击的点上画一个十字。我发现绘制的点偏移到屏幕上光标图标的右下角。另外我不确定为什么我似乎无法清除我绘制一些文本以显示鼠标坐标的区域。目前，我在同一个地方得到了这种奇怪的文本覆盖。

感谢任何输入/建议。

谢谢。

索引.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>

指向渲染.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
    };
}
4

2 回答 2

1

添加“ 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
    };
}
于 2012-08-22T13:39:44.083 回答
0

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

    var mouseX = evt.clientX - rect.left;
    var mouseY = evt.clientY - rect.top;
于 2013-04-20T00:52:44.777 回答