javascript - Y轴反转

Question

我在 javascript 中使用 two.js 库来制作系统坐标，并且我希望 Y 轴倒置。现在 0,0 在左上角，但我希望它在左下角

Answer 1

var two = new Two({
  fullscreen: true,
  autostart: true
}).appendTo(document.body);

two.scene._matrix.manual = true;
two.scene._matrix.translate(0, two.height).scale(1, -1);

var rect = two.makeRectangle(0, 0, 50, 50);
var circ = two.makeCircle(0, 50, 25);

Answer 2

var y = d3.scale.linear().domain([0,100]).range([0,300]);
console.log( y(0), y(50), y(100) );
//-> [0, 150, 300]

var y2 = d3.scale.linear().domain([0,100]).range([450,150]);
console.log( y2(0), y2(50), y2(100) );
//-> [450, 300, 150]

第一个示例将增加 x 映射到增加 y，这不是您想要的。第二个映射增加 x 到减少 y。（它也是offsets x=100 to y=150,在你需要填充的情况下。）

另一个答案：

我建议对 y 比例使用倒置范围，以便它始终对位置进行编码：

var y = d3.scale.linear()
      .domain([minValue, maxValue])
      .range([height, 0]);

计算矩形的“y”属性时，可以直接使用 y 比例。对于高度属性，您必须使用高度 - y(d)，但这对我来说似乎是合理的。当您以这种方式使用倒置范围时，您还可以使用带有 d3.svg.axis 的刻度，它会做正确的事情。