1


I have problem with how to re-presentation of node in SVG with "letter-spacing" in SVG document to fabric.TextBox.
In file SVG text node is:

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


And my fabric.TextBox is:

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


Here is display on SVG & FabricJS:

enter image description here


How to find correct charSpacing which is respectively with letter-spacing attribute in SVG's Text node ?

Notes:
In fabric.TextBox document write:
charSpacing :Number additional space between characters expressed in thousands of em unit
And in document for SVG write:
(if no unit identifier is provided) values in user space — for example, "15"


And Here is my code: 

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>

Thank you,

Tho Bui Ngoc
  • 763
  • 1
  • 11
  • 36

1 Answers1

1

You need to parse from pixel to em.

DEMO

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.log(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>
Durga
  • 15,263
  • 2
  • 28
  • 52
  • Thank you, you're really "The sun of my life" ^_^ – Tho Bui Ngoc Apr 09 '19 at 14:27
  • By the way, I have another problem with create a text which is curved along a fabric.Path, I wonder can FabricJS do that? Here is the my question link: [https://stackoverflow.com/questions/55531132/how-to-create-an-editable-text-which-is-curved-along-a-path-in-fabricjs]. @Durga, do you have any idea for this issue – Tho Bui Ngoc Apr 09 '19 at 14:34
  • @ThoBuiNgoc [curve text](https://github.com/fabricjs/fabric.js/issues/729) is still open, textpath is not in scope yet I think. – Durga Apr 12 '19 at 06:38