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 И максимальные уменьшения паттерна ни к чему ни приводят |
Часовой пояс GMT +3, время: 21:21. |