Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 30.01.2021, 00:45
Аспирант
Отправить личное сообщение для mirek Посмотреть профиль Найти все сообщения от mirek
 
Регистрация: 21.05.2012
Сообщений: 49

fabric.js Pattern не зависимый от Zoom
Как можно реализовать 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

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


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Дополнительная проверка input средствами js опираясь на pattern dima85 Элементы интерфейса 2 24.07.2020 17:55
Где хранится переменная в замыкании, в случае конструктора? Launder Общие вопросы Javascript 24 14.07.2020 15:29
backbone-validate не срабатывает zlodiak Backbone.js 3 30.05.2016 03:14
Правильный zoom на графике c d3.js uaNikita Элементы интерфейса 0 19.05.2015 15:21
Dynamics Pattern shkarbatov Общие вопросы Javascript 1 25.04.2013 10:50