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

Rectangle Coordinate Projection into another Rectangle

本文关键字：另一个 投影 坐标      更新时间：2023-09-26

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

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

所以两个不同大小和坐标的矩形。我想画成一个矩形，然后按比例缩放到另一个矩形。

类似的东西？

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();
}
canvas {
  border: 1px solid #000000;
}
<canvas width="400" height="400"></canvas>

希望这能有所帮助。

具有以下功能：

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)。

相关文章：