Блог

Главная - Вопросы по программированию - в чем проблема с моим выравниванием по левому краю?

в чем проблема с моим выравниванием по левому краю?

#konvajs

#конвайс

Вопрос:

Я использую konva.js и я пытаюсь выровнять тексты с помощью функции выравнивания, но я не могу сделать это с выравниванием по левому краю (с другой стороны, работает по правому и центру).

мой код

  var text1 = new Konva.Text({
    y: 26,
    fontSize: 40,
    text: 'ligne1',
    draggable: true,
   width : 550,
    align: 'center',
    
  });
  layer.add(text1);
  layer.draw();

Спасибо

Комментарии:

1. Можете ли вы предоставить изображение того, что вы видите — этот код выглядит нормально для меня.

2. Вы решили свою проблему?

Ответ №1:

Метод text.align() задает выравнивание. В приведенном ниже фрагменте я нарисовал прямоугольник вокруг формы текста, чтобы визуализировать эффект.

 let
  // Set up a stage
  stage = new Konva.Stage({
    container: 'container',
    width: window.innerWidth,
    height: window.innerHeight
  }),
  layer = new Konva.Layer(),
  rect = new Konva.Rect({
    x: 0,
    y: 26,
    width: 550,
    height: 40,
    stroke: 'magenta'
  }),
  text1 = new Konva.Text({
    y: 26,
    fontSize: 40,
    text: 'ligne1',
    draggable: true,
    width: 550,
    align: 'center',
    fill: 'cyan'
  });

stage.add(layer);
layer.add(rect, text1);
layer.draw();

$('#left').on('click', function() {
  text1.align('left');
  layer.draw();
})
$('#center').on('click', function() {
  text1.align('center');
  layer.draw();
})
$('#right').on('click', function() {
  text1.align('right');
  layer.draw();
}) 
 body {
  margin: 10;
  padding: 10;
  overflow: hidden;
  background-color: #f0f0f0;
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/konva@^3/konva.min.js"></script>
<p>Click a button to change alignment of the text.</p>
<button id='left'>Left</button>
<button id='center'>Center</button>
<button id='right'>Right</button>

<div id="container"></div>