Я использую fabricJS для рендеринга набора линий на холст, эти линии происходят из одних и тех же координат с одинаковыми настройками (за исключением ширины обводки).Код, который я использую для рисования 4 линий, выглядит следующим образом
this.canvas.add(new fabric.Line([50, 50, 100, 100], {
stroke: 'blue',
strokeWidth: 40,
selectable: true,
originY: 'top',
originX: 'left'
}))
this.canvas.add(new fabric.Line([50, 50, 100, 100], {
stroke: 'red',
strokeWidth: 20,
selectable: true,
originY: 'top',
originX: 'left'
}))
this.canvas.add(new fabric.Line([50, 50, 100, 100], {
stroke: 'orange',
strokeWidth: 5,
selectable: true,
originY: 'top',
originX: 'left'
}))
this.canvas.add(new fabric.Line([50, 50, 100, 100], {
stroke: 'green',
strokeWidth: 1,
selectable: true,
originY: 'top',
originX: 'left'
}))
, что приводит к следующему выводу: Результат рисования линий
Как видите, линии имеютсмещение ширины их штрихов влево и вниз, что приводит к неправильной визуализации.Есть ли способ автоматически удалить указанное смещение или мне нужно вручную рассчитать смещение?Для простых форм, таких как линии, это на самом деле не проблема, но со сложными полигонами это становится громоздким.
Я добавил пример в коде, который можно посмотреть здесь
Странная часть заключается в том, что при использовании нативной реализации canvas все идет так, как предполагается, как показано в этом коде