使用Konva.js时文本左对齐失效问题求助

Hey there! Let's get to the bottom of why your left alignment isn't behaving as expected with Konva.Text.

First, let's clarify how Konva's align property works: it controls how text is positioned within the fixed width you've defined (in your case, 550px), not relative to the entire stage or layer.

The catch here is that left is actually the default alignment for Konva.Text. So when you set align: 'left', it might look like nothing changed because the text was already positioned at the left edge of its 550px wide text box. The reason center and right alignment are obvious is because they shift the text away from that default left position.

To verify that left alignment is actually working, try adding a stroke to your text object to visualize the boundaries of the text box:

var text1 = new Konva.Text({
  y: 26,
  fontSize: 40,
  text: 'ligne1',
  draggable: true,
  width: 550,
  align: 'left',
  stroke: '#cccccc', // Add a light gray border to see the text box
  strokeWidth: 1     // Set border thickness
});
layer.add(text1);
layer.draw();

Once you add the border, you'll clearly see that your text is aligned to the left edge of the 550px box, just as expected.

If your goal was to align the text to the left edge of the stage/layer instead of its own text box, you'll want to adjust the x property of the text object instead (e.g., x: 0 to pin it to the left side of the layer).

内容的提问来源于stack exchange，提问作者Walter Andria