将位置坐标转换为画布坐标

Convert position coordinates to canvas coordinates

本文关键字：坐标 布坐标 位置 转换      更新时间：2023-09-26

我必须将游戏中的位置坐标转换为HTML5画布坐标。

给定的坐标看起来像 

-2159.968750,-926.968750
-2159.968750,-704.031250
-2026.847167,-926.993835

给定的坐标不像画布坐标那样表示像素。

有没有办法将任何给定的坐标转换为相应的画布坐标，只需几个校准坐标？

例如，我知道坐标 #1 在画布上是 （66， 980），坐标 #2 在画布上是 （66， 933）。

提前致谢

您可以将游戏值映射到画布坐标，如下所示： 

// fit map game values into canvas coordinates
// value is a game coordinate to be translated into a canvas coordinate
// gameLow & gameHigh are the min & max out of all the game values
// canvasLow & canvasHigh are the available canvas coordinates
// to use the entire canvas canvasLow==0 & canvasHigh==the canvas width in pixels
function mapRange(value, gameLow, gameHigh, canvasLow, canvasHigh) {
    return ( canvasLow + 
        (canvasHigh - canvasLow) * (value - gameLow) / (gameHigh - gameLow) );
}

示例用法：

给定游戏 X 值数组，找到 X 的最小值和最大值。

// Given an array of X values
var gameValuesX=[-2159.968750, -2159.968750, -2026.847167];
// Find the min & max X
var rangeX=calcgameMinMax(gameValues);
function calcgameMinMax(a){
    var min=100000000;
    var max=-100000000;
    for(var i=0;i<a.length;i++){
        var value=a[i];
        if(value<min){min=value;}
        if(value>max){max=value;}
    }
    return({min:min,max:max});
}

对于每个游戏 X，调用 mapRange（） 提供游戏的 max-X 和 min-X 游戏坐标值以及画布 min-X 和 max-X 坐标值。

for(var i=0;i<gameValuesX.length;i++){
    // where canvas.width is the width of the canvas in pixels
    console.log( mapRange( gameValuesX[i], rangeX.min, rangeX.max, 0, canvas.width ) );
}

并对游戏 Y 值执行相同的操作...

祝你的项目好运！

您最可能想要的是在画布上显示游戏虚拟世界的一部分。

• 第一件事是你必须决定这个视图矩形并以某种方式存储它。
最简单的： 

var viewRect = { x : -3000, y:-3000, width: 6000, height:6000 } ;

•然后，当您想画画时，我建议您让画布为您进行数学运算并使用变换。

因此，按照您的猜测初始化"canvasWidth"和"canvasHeight"，绘图代码如下所示： 

context.clearRect(0,0,canvasWidth, canvasHeight);
context.save();
var ratio = canvasWidth / viewRect.width;
context.scale(ratio, ratio);
context.translate(-viewRect.x, -viewRect.y);
//
// do your drawings here in world coordinates.
context.fillStyle='black';
context.fillRect(-2000, -800, 300, 300);
//
context.restore();

请注意，您必须保存（）和恢复（）上下文，以便在每次渲染时保持正确。

（您也可能不使用 save/restore 并使用 'setTransform（1， 0， 0， 1， 0， 0）; 来重置转换。

最简单的JSBIN在这里：http://jsbin.com/hudaqoqavu/1/

相关文章：