1

オブジェクトのクリックの精度を判断するためのユーザー インターフェイスを作成しています。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
    };
}
4

2 に答える 2

1

メッセージレイヤーを表示するために" varmessagelayer = 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調整することはありません。あなたが見ているオフセットは、キャンバスのオフセットに関係していると思います。代わりに、次のことを行う必要があります。mouseXmouseY

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