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

计算rect的“y”属性时，可以使用y标度直。对于height属性，你必须使用height - y（d），但这对我来说似乎很合理。当你使用倒置范围时方式，您也可以使用带有d3.svg.axis的比例，它会做对的。

Y轴要倒置

2 个答案: