Как сопоставить значение «letter-spacing» из текстового узла SVG со свойством «charSpacing» Fabric.TextBox в FabricJS?

У меня проблема с тем, как повторно представить узел в SVG с «буквенным интервалом» в документе SVG для Fabric.TextBox.
В текстовом узле файла SVG:

<text transform = "matrix(1 0 0 1 51.5211 22.2889)" style = "fill:#3C2415; font-size:11px; letter-spacing:3;">MINH TUẤN</text>

И моя ткань.TextBox:

var textbox_0_1 = new fabric.Textbox("MINH TUẤN", {
width: 200, 
fontSize: 11, 
fill: "#3C2415",
editable: true, 
textAlign: "center",
charSpacing: 3, 
});

Вот отображение на SVG и FabricJS:

Как сопоставить значение «letter-spacing» из текстового узла SVG со свойством «charSpacing» Fabric.TextBox в FabricJS?

Как найти правильный charSpacing, который соответствует атрибуту Межбуквенное расстояние в текстовом узле SVG?

Примечания:
В документе ткань.TextBox напишите:
charSpacing: число дополнительный пробел между символами, выраженный в тысячах единиц em
И в документе для SVG пишите:
(если идентификатор объекта не указан) значения в пользовательском пространстве — например, «15»

И вот мой код:

var canvasObject = document.getElementById("editorCanvas");
// set canvas equal size with div
$(canvasObject).width($("#canvasContainer").width());
$(canvasObject).height($("#canvasContainer").height());

var canvas = new fabric.Canvas('editorCanvas', {
  backgroundColor: 'white',
  selectionLineWidth: 2,
  width: $("#canvasContainer").width(),
  height: $("#canvasContainer").height()
});

var textbox_0_1 = new fabric.Textbox("MINH TUẤN", {
  top: 20,
  left: 20,
  width: 200, 
  fontSize: 11, 
  fill: "#000000",
  editable: true, 
  textAlign: "center",
  charSpacing: 3, 
});

canvas.add(textbox_0_1); 

setObjectCoords();
canvas.renderAll();

function setObjectCoords() {
  canvas.forEachObject(function(object) {
    object.setCoords();
  });
}

#canvasContainer {
  width: 100%;
  height: 100vh;
  background-color: gray;
}

<script src = "https://code.jquery.com/jquery-3.3.1.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.3/fabric.js"></script>
  
<div id = "canvasContainer">
  <canvas id = "editorCanvas"></canvas>
</div>

Спасибо,

html5-canvas fabricjs fabricjs2

09.04.2019 10:16

Стоит ли изучать PHP в 2023-2024 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

718

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вам нужно разобрать от пикселя до em.

ДЕМО

var canvas = new fabric.Canvas('editorCanvas', {
  backgroundColor: 'white',
  width: 300,
  height: 100
});
var letterSpacing = 5, fontSize = 30;
var textbox = new fabric.Text("MINH TUẤN", {
  top: 20,
  fontSize: fontSize, 
  fill: "#000000",
  fontFamily : "Verdana"
});

canvas.add(textbox);

var parsedSpacing = fabric.util.parseUnit(letterSpacing, fontSize) / fontSize * 1000;

textbox.set({charSpacing : parsedSpacing});
canvas.requestRenderAll();

console.info(parsedSpacing)

canvas{
  border:1px solid;
}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.3/fabric.js"></script>
<svg width = "300" height = "100" viewBox = "0 0 300 100">
  <text font-size = "30" letter-spacing = "5" font-family = "Verdana" y = "40">MINH TUẤN</text>
</svg>

<canvas id = "editorCanvas"></canvas>

Спасибо, ты действительно "Солнце моей жизни" ^_^

— 09.04.2019 16:27

Кстати, у меня есть еще одна проблема с созданием текста, который изогнут вдоль ткани. Путь, интересно, может ли это сделать FabricJS? Вот ссылка на мой вопрос: [stackoverflow.com/questions/55531132/…. @Durga, у тебя есть идеи по этому вопросу?

— 09.04.2019 16:34

@ThoBuiNgoc кривой текст все еще открыт, текстовый путь еще не входит в область действия, я думаю.

— 12.04.2019 08:38

09.04.2019 14:43