Question

我需要使用屏幕大小来缩放多边形。最初，多边形是在尺寸为640x480的画布上创建的。我想将它们缩小或缩小到我想要的任何新分辨率并保持它们的相对位置和大小。这是我目前使用的代码：

    this.scale = function (x1, y1) {
        for (var i = 0; i < this.points.length; i++) {
            this.points[i].x *= x1;
            this.points[i].y *= y1;
        }
    }

其中x1和y1等于屏幕的新大小除以原始大小。我面临的问题是多边形似乎偏离它们相对于图像的位置。我还尝试在缩放之前先转换向量，然后使用（伪代码）将它们转换回原始质心：

centroid = points / number of points

points = points - centroid
points = points * scale
points = points + centroid

这进一步抵消了多边形相对于画布上绘制的图像的位置。我在这里缺少什么吗？

修改：添加了问题的示例图片：http://i.stack.imgur.com/EGeSw.jpg

谢谢！

Answer 1

将所有点乘以画布的缩放系数。

enter image description here

示例代码和演示：http://jsfiddle.net/m1erickson/xEqU5/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>
<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    var scale=1.00;

    var img=new Image();
    img.onload=start;
    img.src="https://dl.dropboxusercontent.com/u/139992952/multple/scale8.jpg";
    function start(){
        drawAtScale();
    }

    function drawAtScale(){
        canvas.width=img.width*scale;
        canvas.height=img.height*scale;
        drawImage();
        drawPoly();
    }

    function drawImage(){
        ctx.drawImage(img,0,0,img.width*scale,img.height*scale);
    }


    function drawPoly(){
        ctx.save();
        ctx.lineWidth=3;
        ctx.beginPath();
        ctx.moveTo(185*scale,46*scale);
        ctx.lineTo(269*scale,53*scale);
        ctx.lineTo(621*scale,170*scale);
        ctx.lineTo(630*scale,329*scale);
        ctx.lineTo(382*scale,304*scale);
        ctx.lineTo(163*scale,234*scale);
        ctx.closePath();
        ctx.strokeStyle="gold";
        ctx.stroke();
        ctx.restore();
    }


    $("#smaller").click(function(){
        scale/=1.10;
        drawAtScale();
    });
    $("#larger").click(function(){
        scale*=1.10;
        drawAtScale();
    });

}); // end $(function(){});
</script>
</head>
<body>
    <button id="smaller">Scale Canvas Smaller</button>
    <button id="larger">Scale Canvas Larger</button><br>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

Answer 2

我能够解决我的问题。我正在正确缩放，但是当创建形状时，它们是在不同大小的图像上创建的，顶部有黑框导致偏移。

使用简单的翻译修复了问题。代码看起来像这样：

    //My offset.
    this.translate(-10, -50);

    this.translate = function (x1, y1) {
        for (var i = 0; i < this.points.length; i++) {
            this.points[i].x += x1;
            this.points[i].y += y1;
        }
    }

使用屏幕缩放多边形

2 个答案: