Fabri c - js узоры: как создать узор для фона холста из Rects без размера в зависимости от масштаба и размытых Rects

Question

В качестве конечной цели мне нужно создать класс c шахматный фон для холста, чтобы представить «прозрачный» фон с возможностью превратить его в настоящий прозрачный и обратно (в программе, здесь нет прямого взаимодействия с пользователем) - так что я откройте другие способы сделать это.

В текущем состоянии я создал более или менее правильный шаблон и добавил его на холст, но у меня также есть две проблемы, которые нужно исправить:

1. Переход между двумя Rects и Rects против фона размыт, а не резок.
2. При добавлении рисунка на холст он масштабируется на основе визуального размера страницы / увеличения при загрузке страницы вместо запрограммированного размера рисунка и холста. (Чтобы проверить Zoom, снова запустите sipped)

Код:

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

Тем не менее у меня есть еще одна проблема с этим кодом - прямоугольники размыты.

Советы из других постов: strokeWidth: 0, objectCaching: false сделаны, и они все еще размыты. Проблема существует как в шаблоне, так и в прямоугольнике свободного объекта.

(Это небольшое размытие, но это не должно иметь место в случае одноцветных прямых линий).

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

Answer 2

Масштаб страницы сохраняется в той же переменной окна, где соотношение между реальными пикселями и виртуальными пикселями равно (сетчатка для MacBook и HIDPIS для мобильных телефонов). Поэтому, если вы хотите сделать что-то, на что не влияет уровень масштабирования страницы, отключите 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>