Question

我必须将游戏位置坐标转换为HTML5 Canvas坐标。

给定的坐标看起来像

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

给定坐标不表示Canvas坐标等像素。

是否有任何方法可以将任何给定坐标转换为只有几个校准坐标的相应画布坐标？

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

提前致谢

Answer 1

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

// 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＆amp; min-X游戏坐标值和画布min-X＆amp; 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值做同样的事情......

祝你的项目好运！

Answer 2

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

•首先，你必须决定这个视图rect并以某种方式存储它最简单的：

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

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

（您可能也不使用保存/恢复并使用'setTransform（1,0,0,1,0,0）;'来重置转换。）

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

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

2 个答案: