Повторение шаблона при масштабировании объекта в ткани JS

Is there any way to repeat the pattern inside an object in fabric JS.

Предположим, у меня есть прямоугольник, заполненный шаблоном. Я хочу, чтобы шаблон повторялся, когда я масштабирую прямоугольник.Повторение шаблона при масштабировании объекта в ткани JS

Прямо сейчас это масштабирование, когда я масштабирую его.

Благодаря

источник

2013-09-11 user2571818

Там нет встроенной поддержки для этого в данный момент, но в качестве обходного пути, вы должны быть в состоянии изменить размеры изображения источника при изменении размеров объекта. Взгляните на http://fabricjs.com/dynamic-patterns/ – kangax

, если я использую метод масштабирования объекта для определения ширины объекта при его изменении, я не могу правильно получить значения ширины. Я нажал на мышь и изменил размер объекта на определенную позицию, и я освобождаю мышь, он отображает то же значение для этих действий. На следующем клике я получаю новые значения. Код Пример кода: canvas.on ('объекта: масштабирование', функция (ЭВТ) { console.log (evt.target.currentWidth, evt.target.currentHeight); }); – user2571818

Вместо этого вы должны проверять 'evt.target.scaleX' и' evt.target.scaleY' – kangax

@ user2571818 Я также искал это, и, наконец, получил это работает. Мы должны будем использовать событие object:scaling, чтобы масштабировать объект до 1x и вместо этого изменять размер объекта, чтобы повторить шаблон, а не масштабировать его. См его здесь

var canvas = new fabric.Canvas('c'); 
fabric.Object.prototype.transparentCorners = false; 

    var padding = 0; 

    fabric.Image.fromURL('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR/mAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAASdEVYdFNvZnR3YXJlAEdyZWVuc2hvdF5VCAUAAADLSURBVFhH7ZnBCoMwEET9/68URBHSNj0UolFoI+aQickKlT05jz0MGQIPkb2kadu3ta42ff/MTtLRazct55bajOMjO0lHr920vnWMMTGV0GuphVALoRaiqNV1dq4TLsdUIrTe+z0fw+ndmEo0w/D61AmXYyqh1179WjGVuNLyl0eohVALuZ8Wtzwgt9zyiNxSC6EWQi1EUYtbHpBbbnlEbqmFUAuhFqKoxS0PyC23PCK31EKohVAL0dXK3vLSOX0TnKZ1z8fw/3uiW37L27QIZwrV4gAAAABJRU5ErkJggg==', function(img) { 

    img.scaleToWidth(50); 
    var patternSourceCanvas = new fabric.StaticCanvas(); 
    patternSourceCanvas.add(img); 
    patternSourceCanvas.renderAll(); 
    var pattern = new fabric.Pattern({ 
     source: function() { 
     patternSourceCanvas.setDimensions({ 
      width: img.getScaledWidth() + padding, 
      height: img.getScaledHeight() + padding 
     }); 
     patternSourceCanvas.renderAll(); 
     return patternSourceCanvas.getElement(); 
     }, 
     repeat: 'repeat' 
    }); 

    var rect = new fabric.Rect({ 
     width: 250, 
     height: 250, 
     fill: pattern, 
     objectCaching: false 
    }); 

    canvas.add(rect); 
    rect.center().setCoords(); 

}); 



canvas.on('object:scaling', function(e) { 
    if (e.target != null) { 
    console.log(e.target); 
    var obj = e.target; 
     var height = obj.height * obj.scaleY; 
     var width = obj.width * obj.scaleX; 
     obj.height = height; 
     obj.width = width; 
     obj.scaleX = 1; 
     obj.scaleY = 1; 
    } 
});

JSFiddle:https://jsfiddle.net/dotriz/ajsdmg4s/

источник

2017-09-12 14:25:50 Riz

Повторение шаблона при масштабировании объекта в ткани JS

ответ

Смежные вопросы