Fabric-js模式：如何根据矩形（不缩放）从矩形创建画布背景的图案，具体取决于缩放和模糊矩形

debugcn 发表于 Dev

真月

作为最终目标，我需要为画布创建经典的象棋背景，以表示“透明”背景，并可以选择将其变为真正的透明并返回（在程序中，此处没有直接的用户交互）-所以我对其他方式持开放态度它。

在当前状态下，我创建了或多或少正确的模式并将其添加到画布中，但是我也有两个问题需要解决：

两个Rect和Rect与背景之间的过渡模糊而不是清晰。
在将图案添加到画布时，将根据页面加载时页面的视觉大小/缩放比例（而非图案和画布的编程大小）进行缩放。（要检查“缩放”，然后再次run饮）

码：

// initialize fabric canvas and assign to global windows object for debug
var canvas = window._canvas = new fabric.Canvas('c');

const newTransparent = function() {
    const chessStatic = new fabric.StaticCanvas();
    chessStatic.setHeight(10);
    chessStatic.setWidth(10);
    chessStatic.renderAll();
    chessStatic.setBackgroundColor('lightgrey');
    const greyRect = new fabric.Rect({
      width: 5,
      height: 5,
      left: 0,
      top: 0,
     // fill: 'grey',
      strokeWidth: 0
    });
    greyRect.set('fill', 'rgba(150, 150, 150, 1)')
    const lightGreyRect = new fabric.Rect({
      width: 5,
      height: 5,
      left: 5,
      top: 5,
     // fill: 'grey',
      strokeWidth: 0
    });
    lightGreyRect.set('fill', 'rgba(187, 187, 187, 1)')
    
    chessStatic.add(greyRect);
    chessStatic.add(lightGreyRect);
    const greyRect2 = greyRect;
    chessStatic.add(greyRect);
    chessStatic.add(lightGreyRect);
    chessStatic.calcOffset();
    chessStatic.renderAll();

    const transparentPattern = new fabric.Pattern({
      source: function() {
        return chessStatic.getElement();
      },
      repeat: 'repeat'
    });
    return transparentPattern;
 }

canvas.setBackgroundColor(newTransparent(), canvas.renderAll.bind(canvas));

fabric.util.addListener(document.getElementById('toggle-repeat'), 'click', function () {

    canvas.setBackgroundColor(newTransparent(), canvas.renderAll.bind(canvas));
const lightGreyRect = new fabric.Rect({
      width: 5,
      height: 5,
      left: 5,
      top: 5,
     // fill: 'grey',
      strokeWidth: 0
    });
    lightGreyRect.set('fill', 'rgba(187, 187, 187, 1)')
    
    canvas.add(lightGreyRect);
    canvas.renderAll();
});

fabric.util.addListener(document.getElementById('toggle-bgcolor'), 'click', function () {
    if (canvas.backgroundColor instanceof fabric.Pattern) {
        canvas.setBackgroundColor('rgba(0, 225, 64, 0.6)', canvas.renderAll.bind(canvas));
    }
    else {
        canvas.setBackgroundColor({source: 'http://fabricjs.com/assets/escheresque_ste.png'}, canvas.renderAll.bind(canvas));        
    }
});

canvas {
    border: 1px solid #999;
}
button {
    margin-top: 20px;
}

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="c" width="400" height="400"></canvas>
<button id="toggle-repeat">Toggle repeat</button>
<button id="toggle-bgcolor">Toggle background</button>

安德里亚·博加齐（Andrea Bogazzi）

页面缩放存储在相同的窗口变量中，其中实际像素与虚拟像素之间的比率为（macbook为视网膜，手机为hidpi）。因此，当您想执行不受页面缩放级别影响的操作时，请禁用retinaScaling，然后画布将停止考虑的值devicepixelratio。或者，您也可以在初始化画布之前将其设置为最小整数。

fabric.devicePixelRatio = Math.max(Math.floor(fabric.devicePixelRatio), 1);

// initialize fabric canvas and assign to global windows object for debug
var canvas = window._canvas = new fabric.Canvas('c', { enableRetinaScaling: false });

const newTransparent = function() {
    const chessStatic = new fabric.StaticCanvas(null, { enableRetinaScaling: false });
    chessStatic.setHeight(10);
    chessStatic.setWidth(10);
    chessStatic.renderAll();
    chessStatic.setBackgroundColor('lightgrey');
    const greyRect = new fabric.Rect({
      width: 5,
      height: 5,
      left: 0,
      top: 0,
     // fill: 'grey',
      strokeWidth: 0
    });
    greyRect.set('fill', 'rgba(150, 150, 150, 1)')
    const lightGreyRect = new fabric.Rect({
      width: 5,
      height: 5,
      left: 5,
      top: 5,
     // fill: 'grey',
      strokeWidth: 0
    });
    lightGreyRect.set('fill', 'rgba(187, 187, 187, 1)')
    
    chessStatic.add(greyRect);
    chessStatic.add(lightGreyRect);
    const greyRect2 = greyRect;
    chessStatic.add(greyRect);
    chessStatic.add(lightGreyRect);
    chessStatic.calcOffset();
    chessStatic.renderAll();

    const transparentPattern = new fabric.Pattern({
      source: function() {
        return chessStatic.getElement();
      },
      repeat: 'repeat'
    });
    return transparentPattern;
 }

canvas.setBackgroundColor(newTransparent(), canvas.renderAll.bind(canvas));

fabric.util.addListener(document.getElementById('toggle-repeat'), 'click', function () {

    canvas.setBackgroundColor(newTransparent(), canvas.renderAll.bind(canvas));
const lightGreyRect = new fabric.Rect({
      width: 5,
      height: 5,
      left: 5,
      top: 5,
     // fill: 'grey',
      strokeWidth: 0
    });
    lightGreyRect.set('fill', 'rgba(187, 187, 187, 1)')
    
    canvas.add(lightGreyRect);
    canvas.renderAll();
});

fabric.util.addListener(document.getElementById('toggle-bgcolor'), 'click', function () {
    if (canvas.backgroundColor instanceof fabric.Pattern) {
        canvas.setBackgroundColor('rgba(0, 225, 64, 0.6)', canvas.renderAll.bind(canvas));
    }
    else {
        canvas.setBackgroundColor({source: 'http://fabricjs.com/assets/escheresque_ste.png'}, canvas.renderAll.bind(canvas));        
    }
});

canvas {
    border: 1px solid #999;
}
button {
    margin-top: 20px;
}

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="c" width="400" height="400"></canvas>
<button id="toggle-repeat">Toggle repeat</button>
<button id="toggle-bgcolor">Toggle background</button>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-04-2

我来说两句

0条评论

登录后参与评论

Related 相关文章

文章

Fabric-js模式：如何根据矩形（不缩放）从矩形创建画布背景的图案，具体取决于缩放和模糊矩形

Fabric-js模式：如何根据矩形（不缩放）从矩形创建画布背景的图案，具体取决于缩放和模糊矩形

我来说两句

相关文章

Related 相关文章

热门标签

归档