个人中心
gpt4 book ai didi

javascript - 调整形状宽度时，旋转的形状在 y 轴上移动

转载 作者：数据小太阳 更新时间：2023-10-29 05:35:17 27 4
gpt4 key购买 nike

我正在尝试调整 Canvas 上旋转形状的大小。我的问题是，当我调用渲染函数时，形状开始“漂移”，具体取决于形状 Angular 。我怎样才能避免这种情况？

我制作了一个简化的 fiddle 来演示这个问题，当单击 Canvas 时，形状会变大，并且由于某种原因它会向上漂移。

这是 fiddle :https://jsfiddle.net/x5gxo1p7/ 

<style>
    canvas {
        position: absolute;
        box-sizing: border-box;
        border: 1px solid red;
    }
</style>
<body>
<div>
    <canvas id="canvas"></canvas>
</div>
</body>

<script type="text/javascript">
    var canvas = document.getElementById('canvas');
    canvas.width = 300;
    canvas.height= 150;
    var ctx = canvas.getContext('2d');
    var counter = 0;

    var shape = {
        top: 120,
        left: 120,
        width: 120,
        height: 60,
        rotation: Math.PI / 180 * 15
    };



    function draw() {
        var h2 = shape.height / 2;
        var w2 = shape.width / 2;

        var x = w2;
        var y = h2;


        ctx.save();
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.translate(75,37.5)
        ctx.translate(x, y);

        ctx.rotate(Math.PI / 180 * 15);
        ctx.translate(-x, -y);

        ctx.fillStyle = '#000';
        ctx.fillRect(0, 0, shape.width, shape.height);
        ctx.restore();
}


canvas.addEventListener('click', function() {

    shape.width = shape.width + 15;
    window.requestAnimationFrame(draw.bind(this));
});

window.requestAnimationFrame(draw.bind(this));
</script>

在“真实”代码中，当单击并移动调整大小 handle 时，形状会调整大小，但我认为这个示例充分说明了这个问题。

编辑:更新 fiddle 以澄清问题:

https://jsfiddle.net/x5gxo1p7/9/

最佳答案

始终使用局部坐标来定义形状。

当呈现要转换的内容时，内容应该在它自己的(本地)坐标系中。想一个图像。无论在何处渲染，左上角像素始终位于图像的 0,0 处。像素位于它们的本地坐标，渲染时它们通过当前变换移动到(世界) Canvas 坐标。

因此，如果您将形状的坐标设置为其本地，使旋转点位于其本地原点 (0,0)，则显示坐标将单独存储为世界坐标

var shape = {
    top: -30,   // local coordinates with rotation origin 
    left: -60,  // at 0,0
    width: 120,
    height: 60,
    world : {
         x : canvas.width / 2,
         y : canvas.height / 2,
         rot : Math.PI / 12,   // 15deg clockwise
    }
};

现在您不必再为向前和向后的翻译而烦恼了……真是太痛苦了。

只是

ctx.save();
ctx.translate(shape.world.x,shape.world.y);
ctx.rotate(shape.world.rot);
ctx.fillRect(shape.left, shape.top, shape.width, shape.height)
ctx.restore();

或事件更快，无需使用保存和恢复

ctx.setTransform(1,0,0,1,shape.world.x,shape.world.y);
ctx.rotate(shape.world.rot);
ctx.fillRect(shape.left, shape.top, shape.width, shape.height);

局部形状原点 (0,0) 是变换放置平移的位置。

这大大简化了很多必须要做的工作

var canvas = document.getElementById('canvas');
canvas.width = 300;
canvas.height= 150;
var ctx = canvas.getContext('2d');
ctx.fillStyle = "black";
ctx.strokeStyle = "red";
ctx.lineWidth = 2;  


var shape = {
    top: -30,   // local coordinates with rotation origin 
    left: -60,  // at 0,0
    width: 120,
    height: 60,
    world : {
         x : canvas.width / 2,
         y : canvas.height / 2,
         rot : Math.PI / 12,   // 15deg clockwise
     }
};

function draw() {
    ctx.setTransform(1,0,0,1,0,0); // to clear use default transform
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // you were scaling the shape, that can be done via a transform
    // once you have moved the shape to the world coordinates.
    ctx.setTransform(1,0,0,1,shape.world.x,shape.world.y);
    ctx.rotate(shape.world.rot);
 
    // after the transformations have moved the local to the world
    // you can ignore the canvas coordinates and work within the objects
    // local. In this case showing the unscaled box
    ctx.strokeRect(shape.left, shape.top, shape.width, shape.height);
    // and a line above the box
    ctx.strokeRect(shape.left, shape.top - 5, shape.width, 1);
 
    ctx.scale(0.5,0.5); // the scaling you were doing
    ctx.fillRect(shape.left, shape.top, shape.width, shape.height);
}

canvas.addEventListener('click', function() {
    shape.width += 15;
    shape.left -= 15 / 2;
    shape.world.rot += Math.PI / 45; // rotate to illustrate location 
                                     // of local origin
    var distToMove = 15/2;
    shape.world.x += Math.cos(shape.world.rot) * distToMove;
    shape.world.y += Math.sin(shape.world.rot) * distToMove;
    draw();
});
// no need to use requestAnimationFrame (RAF) if you are not animation 
// but its not wrong. Nor do you need to bind this (in this case
// this = window) to the callback RAF does not bind a context
// to the callback 
/*window.requestAnimationFrame(draw.bind(this));*/
requestAnimationFrame(draw); // functionaly identical
// or just
/*draw()*/ //will work
 body { font-family : Arial,"Helvetica Neue",Helvetica,sans-serif; font-size : 12px; color : #242729;} /* SO font currently being used */

canvas { border: 1px solid red; }
<canvas id="canvas"></canvas>
<p>Click to grow "and rotate" (I add that to illustrate the local origin)</p>
<p>I have added a red box and a line above the box, showing how using the local coordinates to define a shape makes it a lot easier to then manipulate that shape when rendering "see code comments".</p>

关于javascript - 调整形状宽度时，旋转的形状在 y 轴上移动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38827788/

27 4 0
文章推荐： javascript - 具有不同 $stateParams 的 Ionic $ionicHistory.goBack
文章推荐： javascript - 找不到兼容版本 : babel-plugin-transform-decorators@^6. 13.0
文章推荐： javascript - webpack -p 无法丑化 es2015 代码
文章推荐： javascript - 为什么启用 Paint Flashing 会显着提高帧率？
数据小太阳
个人简介

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

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