LINUX.ORG.RU

fabric.js Pattern не зависимый от Zoom

 , ,


0

1

Как можно реализовать 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

И максимальные уменьшения паттерна ни к чему ни приводят

★★

Последнее исправление: mirek (всего исправлений: 4)

Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.