Fabric.js - 为什么这个 svg 在导入到我的画布后质量这么差？

问题描述 投票：0回答：1

这是加载到画布上的 svg 图像。如您所知，它看起来非常像光栅图像。为了提供更多背景信息，浅蓝色框的大小为 1000 像素 x 400 像素。

还请注意，IText 对象的图像看起来像光栅图像而不是矢量图像。

有人知道这里发生了什么以及如何解决它吗？

---更新---

抱歉，花了这么长时间才出来……我偏离了轨道，但按照要求：

<html>
    <head>
        <title>
            Debug Me
        </title>
        
        <!--jQuery CDN-->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

        <!--Path to fabric.js-->
        <script type='text/javascript' src="./CreekWareJava/fabric.js-3.6.3/dist/fabric.js"></script>

        <!--bootstrap related-->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

    </head>

<body>
    <div class="container">
        <div class="row">
            <div class="col" id="canvas_container">
                <canvas id="canvas">
                    Canvas is not supported by this browser! Please upgrade your browser.
                </canvas>
            </div>
        </div>
    </div>

    <style>

#canvas_container
{
    display: flex !important;
    justify-content: center !important;
}
canvas
{
    position: absolute !important;
    height: 100% !important;
    width: 100% !important;

    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}
.canvas-container
{
    width: 1000px !important;
    height: 400px !important;
    border: 5px solid green !important;
    position: relative !important;
}

    </style>

    <script>

window.onload = function()
{
    canvas = new fabric.Canvas('canvas');

    // – Raman Nikitsenka's proposal
    // it shouldn't hurt to have it in here...
    fabric.Object.prototype.objectCaching = false;

    //Adding some text
    addText("Some text");
    addImage("http://fabricjs.com/assets/1.svg");

}

function addText(text)
{
    var canH = canvas.getHeight() / 2;
    var canW = canvas.getWidth() / 2;
    var text = new fabric.IText(text, { left: canW, top: canH, fill: "Black", textAlign: 'center' });
    text.originX = 'center';
    text.originY = 'center';
    canvas.add(text);
    canvas.bringToFront(text);
    canvas.requestRenderAll();
}

function addImage(source)
{
    fabric.loadSVGFromURL(source ,function(objects,options) {

    var loadedObjects = fabric.util.groupSVGElements(objects, options);

        loadedObjects.set({
            width: 200,
            height: 200
        });

        canvas.add(loadedObjects);
        canvas.renderAll();

    });
}

    </script>

</body>
</html>

这是简化的代码。正如您在加载它时可以看出的那样，svg 和文本都会变得非常模糊。当您调整龙或文本的大小时，您可以看出它正在尝试渲染它，但没有正确渲染。

一些额外的观察：

fabric.js 采用初始画布元素并创建 2 个新画布，然后使用名为 .canvas-container 的类将它们包装在 div 中。我有一个容器的包装 div，id 为 #canvas_container。

-- 再次更新...--

我将以下代码直接添加到新的 Fabric 对象之后的 window.onload 事件侦听器中...

for (var i = 0; i < 4; i++)
{
    canvas.setHeight(document.getElementById('canvas').height);
    canvas.setWidth(document.getElementById('canvas').width);
    canvas.requestRenderAll();
    console.log(i, "fw", canvas.width, "fh", canvas.height, "cw", document.getElementById("canvas").width, "ch", document.getElementById("canvas").height, "fr", canvas.width / canvas.height, "cr", document.getElementById("canvas").width / document.getElementById("canvas").height);
}

据我观察，循环计数器增加得越多，图像质量和文本质量就越好。但另一方面，它会使调整框和边界框变得更薄，并减小对象的物理尺寸。控制台将输出 Fabric 画布的宽度和高度，然后是物理 html Canvas 元素的宽度和高度，然后分别输出它们的比例。想法？

javascript fabricjs
1个回答
0
投票

所以问题是，fabric.js 检查 

<canvas>
标签的宽度和高度属性（不在样式中 - 它也可能检查样式，但当我写这篇文章时，我指的是高度和宽度属性）初始化新的布料画布，如果您不将其包含在标签中，它将无法正确渲染画布。要修复它，您可以使用

canvas.setHeight(document.getElementById("your_canvas_id").style.height);
canvas.requestRenderAll();

宽度也同样。

Fabric.js 在初始化后将我的画布大小更改为 300x150 是此问题的另一个资源。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.