个人中心
gpt4 book ai didi

html5-canvas - 图层旋转后 KineticJS 鼠标位置错误

转载 作者：行者123 更新时间：2023-12-04 04:17:04 25 4
gpt4 key购买 nike

我的演示在这里 http://jsfiddle.net/akuma/7NmXw/1/

  • 首先，在蓝色框中画一些东西。
  • 然后，单击一次旋转按钮。
  • 旋转盒子后，再次绘制一些东西。
  • 最后平局poisitoin是错误的。

    • 怎么解决啊，谢谢!

    代码: 
    var stage = new Kinetic.Stage({
        container: 'container',
        width: 500,
        height: 500
    });

    var layer = new Kinetic.Layer({
        width: 400,
        height: 400
    });

    var rect = new Kinetic.Rect({
        x: 0,
        y: 0,
        width: 400,
        height: 300,
        fill: '#00D2FF',
        stroke: 'black',
        strokeWidth: 5
    });

    layer.add(rect);
    stage.add(layer);

    $(document).on('click', '#rotateBtn', function () {
        var w = layer.getWidth(),
            h = layer.getHeight();
        layer.setOffset(w / 2, h / 2);
        layer.setPosition(w / 2, h / 2);
        layer.rotateDeg(90);
        layer.draw();
    });

    var points = [],
        drawing = false;

    stage.on('mousedown', function () {
        drawing = true;

        var pos = stage.getMousePosition();
        points.push([pos.x, pos.y]);

        var line = new Kinetic.Line({
            id: 'line',
            points: [
                [pos.x, pos.y],
                [pos.x + 1, pos.y + 1]
            ],
            stroke: 'white',
            strokeWidth: 5,
            lineCap: 'round',
            lineJoin: 'round'
        });

        layer.add(line);
        layer.drawScene();
    });

    stage.on('mousemove', function () {
        if (!drawing) {
            return;
        }

        // Remove previous line
        layer.get('#line').remove();

        var pos = stage.getMousePosition();
        points.push([pos.x, pos.y]);

        // Redraw line
        var line = new Kinetic.Line({
            id: 'line',
            points: points,
            stroke: 'white',
            strokeWidth: 5,
            lineCap: 'round',
            lineJoin: 'round'
        });
        layer.add(line);
        layer.drawScene();
    });

    stage.on('mouseup', function () {
        drawing = false;
        points = [];
    });

    最佳答案

    即使旋转后，Kinetic 仍会为您提供未旋转的鼠标坐标

    那是因为您要求 stage.getMousePosition 并且舞台没有旋转。

    没有像 layer.getMousePosition 这样的方法，所以你必须创建一个。

    enter image description here

    如果将图层旋转 90 度，则还必须将舞台的鼠标坐标旋转 90 度。

    以下是旋转舞台鼠标位置以匹配图层旋转的方法:

        // get the unrotated mouse position from Kinetic

        var pos=stage.getMousePosition();

        // rotate that point to match the layer rotation

        var x1 = rotationX 
                  + (pos.x-rotationX)*rotationCos 
                  + (pos.y-rotationY)*rotationSin;

        var y1 = rotationY 
                  + (pos.y-rotationY)*rotationCos 
                  - (pos.x-rotationX)*rotationSin;

    由于您将在每次鼠标移动时进行此数学运算，因此您应该预先计算旋转值以最大化性能: 
        // reset the current rotation information

        function setRotation(degrees){
            var radians=layer.getRotation();
            rotationX=layer.getOffsetX();
            rotationY=layer.getOffsetY();
            rotationCos=Math.cos(radians);
            rotationSin=Math.sin(radians);
        }

    另外，你的问题有点离题，但是......

    您可以“回收”现有的行，而不是在每次鼠标移动时删除/重新创建新行: 
      // set the points property of the line to your updated points array

      line.setPoints(points);

    这是代码和 fiddle : http://jsfiddle.net/m1erickson/cQATv/ 
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Prototype</title>
        <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
        <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.5.min.js"></script>

    <style>
    #container{
      border:solid 1px #ccc;
      margin-top: 10px;
      width:400px;
      height:400px;
    }
    </style>        
    <script>
    $(function(){

        var stage = new Kinetic.Stage({
            container: 'container',
            width: 500,
            height: 500
        });
        var layer = new Kinetic.Layer({width:400,height:400});
        stage.add(layer);


        // vars to save the current rotation information
        var rotationX;
        var rotationY;
        var rotationCos;
        var rotationSin;
        setRotation(0);


        var rect = new Kinetic.Rect({
            x: 0,
            y: 0,
            width: 400,
            height: 300,
            fill: '#00D2FF',
            stroke: 'black',
            strokeWidth: 5
        });

        layer.add(rect);
        stage.add(layer);

        $(document).on('click', '#rotateBtn', function () {
            var w = layer.getWidth(),
                h = layer.getHeight();

            layer.setOffset(w / 2, h / 2);
            layer.setPosition(w / 2, h / 2);
            layer.rotateDeg(90);
            layer.draw();

            // set the info necessary to un-rotate the mouse position
            setRotation(layer.getRotationDeg())

        });

        var points = [],
            drawing = false;

        stage.on('mousedown', function () {
            drawing = true;

            // get the rotated mouse position
            pos=getPos();
            points.push([pos.x, pos.y]);

            var line = new Kinetic.Line({
                id: 'line',
                points: [
                    [pos.x, pos.y],
                    [pos.x + 1, pos.y + 1]
                ],
                stroke: 'white',
                strokeWidth: 5,
                lineCap: 'round',
                lineJoin: 'round'
            });

            layer.add(line);
            layer.drawScene();
        });

        stage.on('mousemove', function () {
            if (!drawing) {
                return;
            }

            // Remove previous line
            layer.get('#line').remove();

            // get the rotated mouse position
            var pos = getPos();
            points.push([pos.x, pos.y]);

            // Redraw line
            var line = new Kinetic.Line({
                id: 'line',
                points: points,
                stroke: 'white',
                strokeWidth: 5,
                lineCap: 'round',
                lineJoin: 'round'
            });
            layer.add(line);
            layer.drawScene();

        });

        stage.on('mouseup', function () {
            drawing = false;
            points = [];
        });


        // reset to the current rotation information
        function setRotation(degrees){
            var radians=layer.getRotation();
            rotationX=layer.getOffsetX();
            rotationY=layer.getOffsetY();
            rotationCos=Math.cos(radians);
            rotationSin=Math.sin(radians);
        }


        // rotate the stage mouse position
        // to match the layer rotation
        function getPos(x,y){

            // normal space, no adjustment necessary
            if(rotationCos==0){return;} 

            var pos=stage.getMousePosition();

            var x1 = rotationX 
                      + (pos.x-rotationX)*rotationCos 
                      + (pos.y-rotationY)*rotationSin;

            var y1 = rotationY 
                      + (pos.y-rotationY)*rotationCos 
                      - (pos.x-rotationX)*rotationSin;

            return({x:x1,y:y1});
        }


    }); // end $(function(){});

    </script>       
    </head>

    <body>
        <button id="rotateBtn">rotate</button>
        <div id="container"></div>
    </body>
    </html>

    关于html5-canvas - 图层旋转后 KineticJS 鼠标位置错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18140507/

    25 4 0
    文章推荐： cassandra - 将批处理RDD中的结果与Apache Spark中的流式RDD合并
    文章推荐： dependencies - NuGet 依赖 hell
    文章推荐： autocomplete - react native : Autocomplete text input with tags
    文章推荐： code-signing - Windows 代码签名过程和 MS signtool.exe 的替代方案？
    行者123
    个人简介

    我是一名优秀的程序员,十分优秀！

    滴滴打车优惠券免费领取
    滴滴打车优惠券
    全站热门文章
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com