사각형 좌표 다른 사각형으로 투영

Question

그래서 저는 자바 스크립트에서 한 사각형의 좌표를 다른 사각형으로 투영하려고합니다. 본질적으로 하나의 사각형에서 다른 사각형으로 좌표를 크기 조정합니다. 내가 어떻게 그럴 수 있니?

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

이렇게 크기와 좌표가 다른 사각형 2. 하나의 직사각형에 그려서 다른 직사각형에 비례 적으로 비율을 적용하고 싶습니다.

Answer 1

이와 비슷한? 이 도움이

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>

희망. 이러한 기능으로

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); 
    }; 
} 

: q이 Point(4, 6)입니다

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

.