Fabric-js模式：如何从矩形创建画布背景的模式，而没有尺寸取决于缩放和模糊矩形

Question

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

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

两个矩形和矩形与背景之间的过渡是模糊的，而不是锐利的。
在将图案添加到画布时，将根据页面加载时页面的视觉尺寸/缩放比例来缩放比例，而不是根据图案和画布的编程尺寸来缩放比例。（要检查“缩放”，然后再次运行并ipped饮）

代码：

// 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>

Answer 1

页面缩放比例存储在同一窗口变量中，其中实际像素与虚拟像素之间的比率为（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>

Answer 2

仍然我对此代码还有一个问题-矩形模糊。

[其他帖子的提示：strokeWidth：0，objectCaching：否完成后，它们仍然模糊。模式和自由对象矩形中都存在问题。

（（这是很小的模糊，但单色直线不应该这样）。

// 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(40);
    chessStatic.setWidth(40);
    chessStatic.renderAll();
    chessStatic.setBackgroundColor('lightgrey');
    const greyRect = new fabric.Rect({
      width: 20,
      height: 20,
      left: 0,
      top: 0,
      fill: 'grey',
      strokeWidth: 0,
      objectCaching: false
    });
    //greyRect.set('fill', 'rgba(150, 150, 150, 1)')
    const lightGreyRect = new fabric.Rect({
      width: 20,
      height: 20,
      left: 20,
      top: 20,
      fill: 'grey',
      strokeWidth: 0,
      objectCaching: false
    });
    //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));
const GreyRect = new fabric.Rect({
      width: 20,
      height: 20,
      left: 20,
      top: 20,
      fill: 'grey',
      strokeWidth: 0,
      objectCaching: false
    });
canvas.add(GreyRect);
canvas.renderAll();

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>

Fabric-js模式：如何从矩形创建画布背景的模式，而没有尺寸取决于缩放和模糊矩形

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

2个回答

最新问题

Fabric-js模式：如何从矩形创建画布背景的模式，而没有尺寸取决于缩放和模糊矩形

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

2个回答

最新问题

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