当SVG包含具有自定义字体的文本时,fabricjs中的渲染SVG出现问题。
如何使用自定义字体使Fabricjs中的SVG正确显示?
这是我的代码:
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: null,
selectionLineWidth: 2,
width: $("#canvasContainer").width(),
height: $("#canvasContainer").height()
});
var imageObj = new fabric.Image();
canvas.add(imageObj);
imageObj.setSrc('https://futushigame.firebaseapp.com/group_test.svg', function(imageObject) {
imageObject.set({top: 0, left: 0});
imageObject.set('dirty', true);
canvas.renderAll();
setObjectCoords();
});
function setObjectCoords() {
canvas.forEachObject(function(object) {
object.setCoords();
});
}
#canvasContainer {
width: 100%;
height: 100vh;
}
<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>
<style>
@font-face {
font-family: 'CurlzMT';
src: url("https://futushigame.firebaseapp.com/CurlzMT.ttf") format("ttf");
font-weight: 'normal';
font-style: 'normal';
}
</style>
<div id="canvasContainer">
<canvas id="editorCanvas"></canvas>
</div>
这是我的资源:
1.字体文件:CurlzMT
2. SVG文件:group_test.svg
谢谢!