将HTMLCanvas坐标系转换为笛卡尔坐标系

Question

HTML canvas 的原点 (0,0) 是左上角（见下图），其中正 x 坐标向右，正 y 坐标向下。

然而，数学的起源是 "center,"，正 y 通过 Cartesian coordinate system 向上（见下文）。

我在 KonvaJS 中调整了舞台的偏移量和比例，以反映 X-max 为 10、Y-max 为 10、X-min 为 -10 和 Y-min 为 - 的笛卡尔系统10.但是，我当前的解决方案是将象限颠倒过来（见下文）。有什么建议吗？

当前JavaScript方法：JSFiddle

var Width = 500;
var Height = 500;
var minX = -12; var maxX = 12;
var minY  = -12; var maxY  = 12;
var rangeX  = maxX - minX;
var rangeY  = maxY - minY;
var scaleX  = Width / rangeX;
var scaleY = Height  / rangeY;

var stage = new Konva.Stage({
container: 'container',
width: Width,
height: Height,
scaleX: scaleX,
scaleY: scaleY,
offset: {
 x: -12,
 y: -12
}   
});  

var layer = new Konva.Layer();
stage.add(layer);

var rect = new Konva.Rect({
  x: -12,
  y: -12,
  width: 24,
  height: 24,    

  stroke: 'black',
  strokeWidth: 0.1
});  
layer.add(rect);

var position = new Konva.Text(
{
 fontSize: 0.7,
 x: -11,
 y: -11   
});
 
layer.add(position);

var t0 = new Konva.Text(
{
fontSize: 1,
x: 0,
y: 0,
text: 'Center'

});   
var t1 = new Konva.Text(
{
fontSize: 0.7,
x: 5,
y: 5,
text: 'Top\nRight',
fill: 'blue'
});   
var t2 = new Konva.Text(
{
fontSize: 0.7,
x: -5,
y: 5,
text: 'Top\nLeft',
fill: 'blue'
});   
var t3 = new Konva.Text(
{
fontSize: 0.7,
x: 5,
y: -5,
text: 'Bottom\nRight',
fill: 'blue'
});   
var t4 = new Konva.Text(
{
fontSize: 0.7,
x: -5,
y: -5,
text: 'Bottom\nLeft',
fill: 'blue'   
});   
layer.add(t0); 
layer.add(t1);
layer.add(t2);
layer.add(t3);
layer.add(t4); 

 var yaxis = new Konva.Arrow({
  points: [0, 11, 0, -11],
  pointerLength: 0.3,
  pointerWidth: 0.2,
  pointerAtBeginning: true,
  fill: 'green',
  stroke: 'green',
  strokeWidth: 0.1
});
layer.add(yaxis);

var xaxis = new Konva.Arrow({
  points: [11, 0, -11,0],
  pointerLength: 0.3,
  pointerWidth: 0.2,
  pointerAtBeginning: true,
  fill: 'green',
  stroke: 'green',
  strokeWidth: 0.1
});
layer.add(xaxis);

var circle = new Konva.Circle({
  x: 0,
  y: 5,
  radius: 0.5,
  fill: 'purple',
  stroke: 'purple',
  strokeWidth: 0,
  draggable: true
});  

layer.add(circle);

layer.draw();

function updateText(e) {
position.text('(' + Math.round(e.target.x()) + ', ' + Math.round(e.target.y()) + ')');
layer.batchDraw();
}

circle.on('dragmove', updateText);

  
<script src="https://unpkg.com/konva@2.4.2/konva.min.js"></script>
<body>
 <div id="container"></div>
</body>

更新：

根据 Andrew Morton 的建议，设置：

scaleY = -Height / rangeY;

有正确的想法，但需要将阶段偏移更改为：

      offset: {
          x: -12,
          y: 12           
      }

这导致了正确的象限，但所有文本都被反转了（见下文）。还有其他建议吗？

Answer 1

您可以将笛卡尔（postive/negative x 和 y）点转换为对 canvas 有意义的位置，方法是计算出 canvas 的中点并进行一些基本运算:

var getCanvasCartesianPoint = function (x, y) {
  var midWidth = width / 2;
  var midHeight = height / 2;
  var cartesianX = midWidth + x;
  var cartesianY = midHeight + y;

  return {x: cartesianX, y: cartesianY};
}

因此，当您调用 getCanvasCartesianPoint(0,0) 并且您的宽度为 250 时，该函数将 return {x: 125, y: 125} 位于您的 canvas.

请参阅此代码笔进行演示 - https://codepen.io/joshdavenport/pen/NobERq

Answer 2

由于y是颠倒的，所以需要

var scaleY = -Height / rangeY

但显然这会导致文本也被倒置。您可以使用属性

在 Text 构造函数中对此进行更正

scaleY: -1,
verticalAlign: 'top'

_{参考：Konva.Text}

将HTMLCanvas坐标系转换为笛卡尔坐标系

Convert HTML Canvas coordinate system to Cartesian system

javascript

html5-canvas

konvajs

更新：