带有阿拉伯字母的 Fabric js 文本组件以错误的方式生成

Question

问题当您使用 fabric js 生成文本组件然后转换为 SVG 时。

我想看看问题并尝试重现and/or解决 ----->请检查第一个评论 <-----

如何使用demo复现

打开演示Url
运行它
点击添加文本组件将添加英文测试文本组件。
现在双击更改文本并粘贴这个例如阿拉伯语单词 شريو
打开浏览器检查器。
单击“打印到控制台”按钮。

预期结果 看起来像这样

Answer 1

这已在较新版本中修复。更新到v2.3.3（最新），你的fabricjs版本v1.5太旧，不再维护了。

在这里找到最新的 fabric.js website

演示版

var canvas = this.__canvas = new fabric.Canvas('c');
canvas.setDimensions({
 width:400,height:400
})
text = new fabric.IText('شريف', { 
  left: 50,
  top: 100,
  fontFamily: 'arial black',
  fill: '#333',
  fontSize: 50
})

canvas.add(text);
console.log(text.toSVG());
function printtest(){
  console.log(text.toSVG());
}

#c{
  border:1px solid red;
}

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<button onclick="printtest()">print console</button><br>
<canvas id="c"></canvas>

带有阿拉伯字母的 Fabric js 文本组件以错误的方式生成

Fabric js text component with arabic letters gets generated in wrong way

fonts

svg

arabic

fabricjs