Как можно реализовать fabric Pattern на основе изображения, который бы не зависел от глобального setZoom ?
Я создаю Pattern на основе ДЕМО
http://fabricjs.com/dynamic-patterns
И все чудесно работает пока я не устанавливаю setZoom
Код ДЕМО
fabric.Image.fromURL('pat.jpg', function (img) {
img.set({ left: 0, top: 0}).scale(0.25);
var patternStaticCanvas = new fabric.StaticCanvas();
patternStaticCanvas.setWidth(img.getScaledWidth());
patternStaticCanvas.setHeight(img.getScaledHeight());
var r = patternStaticCanvas.getRetinaScaling();
lanczosFilter.scaleX = lanczosFilter.scaleY = img.scaleX * r;
img.filters = [lanczosFilter];
patternStaticCanvas.add(img);
lanczosFilter.scaleX = 0.025;
lanczosFilter.scaleY = 0.025;
img.scaleX = 0.05;
img.scaleY = 0.05;
patternStaticCanvas.setZoom(0.15);
patternStaticCanvas.viewportTransform = [0.08, 0, 0, 0.08, 0, 0]; //[2, 0, 0, 2, 0, 0];
patternStaticCanvas.setDimensions({
width: 100,
height: 100,
});
patternStaticCanvas.requestRenderAll();
var GrassPattern = new fabric.Pattern({
source: patternStaticCanvas.getElement(),
repeat: 'repeat',
});
var polp = [
{ x: 185, y: 0 },
{ x: 250, y: 100 },
{ x: 385, y: 170 },
{ x: 0, y: 245 },
];
canvas.add(
new fabric.Polygon(polp,
{
left: poly_xy[0].x - 2,
top: poly_xy[0].y - 2,
angle: 0,
fill: GrassPattern,
objectCaching: false,
scaleX: 1,
scaleY: 1,
},
),
);
canvas.requestRenderAll();
});
Ну и по коду видно, что я пробовал все варианты уменьшения картинки из которой состоит паттерн и все это безрезультатно
Паттерн незначительно уменьшается Но у меня ЗУМ канваса 16
И максимальные уменьшения паттерна ни к чему ни приводят