个人中心
gpt4 book ai didi

javascript - FabricJS:大网格对象模糊

转载 作者：行者123 更新时间：2023-11-30 06:24:00 68 4
gpt4 key购买 nike

我想用fabricjs画一个大格子，但是太模糊了。我使用 fabricJS canvas.toSVG() 导出到 svg 文件，然后在浏览器中打开 svg 文件，效果很好。所以我认为这很可能是边缘的错误。

测试代码为:

var data = [];
    var temp = [0,0,-0.012,-0.012,-0.012,-0.012,-0.012,-0.012,0,0,-0.012,-0.012,0,0.049,0.073,0.049,0.049,0.037,-0.012,-0.012,-0.024,-0.049,-0.024,-0.049,-0.061,-0.012,-0.061,-0.086,0.061,0.146,0.354,0.403,-0.647,-1.88,-1.672,-0.757,-0.33,-0.098,0.024,0.012,0.073,0.122,0.098,0.146,0.183,0.171,0.207,0.232];
    for (var i = 0; i < 200; i++) {
        data = data.concat(temp);
    }
    
    // case 1 : blurry
    var canvas1 = new fabric.Canvas("ecg1");
    var width   = 8000;
    var height  = 400;
    canvas1.setWidth(width);
    canvas1.setHeight(height);
    var bg1  = getBackgroundPath(width, height);
    var ecg1 = getEcgPath(data);
    canvas1.add(bg1);
    canvas1.add(ecg1);
    canvas1.renderAll(); // blurry
    
    // case 2 : ok
    var canvas2 = new fabric.Canvas("ecg2");
    var data2 = data.slice(0, 3000);
    width   = 1000;
    height  = 400;
    canvas2.setWidth(width);
    canvas2.setHeight(height);
    var bg2  = getBackgroundPath(width, height);
    var ecg2 = getEcgPath(data2);
    canvas2.add(bg2);
    canvas2.add(ecg2);
    canvas2.renderAll();
    
    // case 3 : blurry
    var canvas3 = new fabric.Canvas("ecg3");
    canvas3.setWidth(width);
    canvas3.setHeight(height);
    canvas3.add(new fabric.Group([bg2, ecg2]));
    canvas3.renderAll();
    
    function getBackgroundPath(width, height) {
        var grid = [];
        for (var y = 0; y <= height; y += 10) {
            grid.push("M");
            grid.push("0");
            grid.push(y);
            grid.push("H");
            grid.push(width);
        }
        for (var x = 0; x <= width; x += 10) {
            grid.push("M");
            grid.push(x);
            grid.push("0");
            grid.push("V");
            grid.push(height);
        }
        return new fabric.Path(grid.join(" "), {
            top  : 0,
            left : 0,
            stroke: 'pink',
            strokeWidth: 1
        });
    }
    function getEcgPath(data) {
        var xm = 2;
        var ym = 100;
        var max  = Math.max.apply(Math, data);
        var path = [];
        for (var i = 0; i < data.length; i++) {
            path.push("L");
            path.push(i * xm);
            path.push((max - data[i]) * ym);
        }
        path[0] = "M";
        return new fabric.Path(path.join(" "), {
            top  : 0,
            left : 0,
            fill : '',
            stroke: 'black',
            strokeWidth: 1
        });
    }
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
  <canvas id="ecg1"></canvas>
  <canvas id="ecg2"></canvas>
  <canvas id="ecg3"></canvas>
  
  <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.3/fabric.min.js" ></script>
</body>
</html>

结果是 enter image description here enter image description here

最佳答案

请在这里进一步阅读: http://fabricjs.com/fabric-object-caching

这个问题实际上很容易解决，即禁用 ECG 行的缓存。如果您的应用程序只需要绘制一条大路径或一小部分路径，则不需要缓存。

缓存是如何工作的？缓存在单独的 Canvas 上绘制对象，然后在移动它时每帧重复使用该 Canvas 。这比必须为许多对象在每一帧执行多个填充和描边操作要好得多，尤其是当对象很复杂时。

为了避免性能缺陷，用于缓存的 Canvas 默认限制为 2 兆像素(您可以将其上推更改 fabric.perfLimitSizeTotal )，无论百万像素大小是多少，最大尺寸默认限制为 4096(如果您不需要支持 ie11，您可以通过改变 fabric.maxCacheSideLimit 使其变大)。

在您的情况下，路径由 cpu 顺利处理。

对于网格，我们需要更多代码。

var data = [];
    var temp = [0,0,-0.012,-0.012,-0.012,-0.012,-0.012,-0.012,0,0,-0.012,-0.012,0,0.049,0.073,0.049,0.049,0.037,-0.012,-0.012,-0.024,-0.049,-0.024,-0.049,-0.061,-0.012,-0.061,-0.086,0.061,0.146,0.354,0.403,-0.647,-1.88,-1.672,-0.757,-0.33,-0.098,0.024,0.012,0.073,0.122,0.098,0.146,0.183,0.171,0.207,0.232];
    for (var i = 0; i < 200; i++) {
        data = data.concat(temp);
    }
    
    // case 1 : blurry
    var canvas1 = new fabric.Canvas("ecg1");
    var width   = 8000;
    var height  = 400;
    canvas1.setWidth(width);
    canvas1.setHeight(height);
    var bg1  = getBackgroundPath(width, height);
    var ecg1 = getEcgPath(data);
    canvas1.add(bg1);
    canvas1.add(ecg1);
    canvas1.renderAll(); // blurry
    
    
    function getBackgroundPath(width, height) {
        var grid = [];
        for (var y = 0; y <= height; y += 10) {
            grid.push("M");
            grid.push("0");
            grid.push(y);
            grid.push("H");
            grid.push(width);
        }
        for (var x = 0; x <= width; x += 10) {
            grid.push("M");
            grid.push(x);
            grid.push("0");
            grid.push("V");
            grid.push(height);
        }
        return new fabric.Path(grid.join(" "), {
            top  : 0,
            left : 0,
            stroke: 'pink',
            strokeWidth: 1
        });
    }
    function getEcgPath(data) {
        var xm = 2;
        var ym = 100;
        var max  = Math.max.apply(Math, data);
        var path = [];
        for (var i = 0; i < data.length; i++) {
            path.push("L");
            path.push(i * xm);
            path.push((max - data[i]) * ym);
        }
        path[0] = "M";
        return new fabric.Path(path.join(" "), {
            top  : 0,
            left : 0,
            fill : '',
            stroke: 'black',
            strokeWidth: 1,
            objectCaching: false,
        });
    }
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
  <canvas id="ecg1"></canvas>
  <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.3/fabric.min.js" ></script>
</body>
</html>

关于javascript - FabricJS:大网格对象模糊，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51567617/

68 4 0
文章推荐： javascript - 如何包括 Foundation Magellan 在我的网站上
文章推荐： java - 图像模糊的简单指标？
文章推荐： Java延迟帧重画
文章推荐： java - 有没有办法查看Java底层的C代码？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com