Question

所以我想将javascript中的一个矩形的坐标投影到另一个矩形，实质上是将坐标从一个矩形缩放到另一个矩形。我该怎么做？

function Rectangle(maxX, minX, maxY, minY) {
    this.maxX = maxX;
    this.minX = minX;
    this.maxY = maxY;
    this.minY = minY;
}

所以2个不同大小和坐标的矩形。我想绘制成一个矩形并按比例缩放到另一个矩形中。

Answer 1

这样的东西？

＆＃13;

var src = new Rectangle(6, 0, 6, 2);
var dst = new Rectangle(4, 2, 8, 0);

function Rectangle(maxX, minX, maxY, minY) {
  this.maxX = maxX;
  this.minX = minX;
  this.maxY = maxY;
  this.minY = minY;
}

var canvas = document.querySelector("canvas");
var width = canvas.width, height = canvas.height;
var w = width / 2 + 0.5, h = height / 2 + 0.5;
var sx = width / 20, sy = height / 20;
var context = canvas.getContext("2d");

context.strokeStyle = "#808080";
context.fillStyle = "#000080";

tween(src, dst, 25, 1, 1000);

function tween(src, dst, fps, seconds, delay) {
  var frames = fps * seconds;

  var srcMaxX = src.maxX;
  var srcMinX = src.minX;
  var srcMaxY = src.maxY;
  var srcMinY = src.minY;

  var maxX = dst.maxX - srcMaxX;
  var minX = dst.minX - srcMinX;
  var maxY = dst.maxY - srcMaxY;
  var minY = dst.minY - srcMinY;

  drawRectangle(srcMaxX, srcMinX, srcMaxY, srcMinY);

  setTimeout(function loop(frame, delay) {
    var dstMaxX = srcMaxX + maxX * frame / frames;
    var dstMinX = srcMinX + minX * frame / frames;
    var dstMaxY = srcMaxY + maxY * frame / frames;
    var dstMinY = srcMinY + minY * frame / frames;

    drawRectangle(dstMaxX, dstMinX, dstMaxY, dstMinY);

    if (frame < frames) setTimeout(loop, delay, frame + 1, delay);
  }, delay, 1, 1000 / fps);
}

function drawRectangle(maxX, minX, maxY, minY) {
  context.clearRect(0, 0, width, height);

  drawLine(0, h, width, h);
  drawLine(w, 0, w, height);

  var x = w + sx * minX;
  var y = h - sy * maxY;
  var wth = sx * (maxX - minX);
  var hgt = sy * (maxY - minY);

  context.fillRect(x, y, wth, hgt);
}

function drawLine(x1, y1, x2, y2) {
  context.beginPath();
  context.moveTo(x1, y1);
  context.lineTo(x2, y2);
  context.stroke();
}

＆＃13;

canvas {
  border: 1px solid #000000;
}

＆＃13;

<canvas width="400" height="400"></canvas>

＆＃13;

希望这有帮助。

Answer 2

使用这些功能：

function Point(x, y) {
    this.x = x;
    this.y = y;
}

function Rect(xMin, xMax, yMin, yMax) {
    this.xMin = xMin;
    this.xMax = xMax;
    this.yMin = yMin;
    this.yMax = yMax;   
}

Rect.prototype.width = function() {
    return this.xMax - this.xMin;
};

Rect.prototype.height = function() {
    return this.yMax - this.yMin;
};

function RectProjection(a, b) {
    var xScale = b.width() / a.width();
    var yScale = b.height() / a.height();
    var xOffset = b.xMin - xScale * a.xMin;
    var yOffset = b.yMin - yScale * a.yMin;
    return function (p) {
        return Point(xScale * p.x + xOffset, yScale * p.y + yOffset);
    };
}

然后你可以这样做：

var proj = projection(new Rectangle(0, 2, 0, 3), new Rectangle(2, 6, 2, 8));
var q = proj(new Point(1, 2));

q为Point(4, 6)。

矩形坐标投影到另一个矩形

2 个答案: