2016-08-29 2 views
1

Я использую FabricJs, все работает очень гладко и хорошо, но теперь у меня есть проблема, и я не знаю почему.Fabricjs - Resize не работает правильно на объекте

Это мой код:

<canvas id="c" width="300" height="300"></canvas> 
<input type="text" value="" placeholder="Rect width" id="rect-width"> 
<input type="text" value="" placeholder="Rect height" id="rect-height"> 

<button id="target"> 
Change 
</button> 

canvas.on('object:modified', function() { 
    var obj = canvas.getActiveObject(); 
    $('#rect-width').val(Math.floor(obj.getWidth())); 
    $('#rect-height').val(Math.floor(obj.getHeight())); 

    console.log(Math.round(obj.getWidth())); 
    console.log(Math.round(obj.getHeight())); 
}); 


$("#target").click(function() { 
/* 
var objwidth = $('#rect-width').val(); 
var objheight = $('#rect-height').val(); 
*/ 
var obj = canvas.getActiveObject(); 
var objwidth = Math.floor(obj.getWidth()); 
var objheight = Math.floor(obj.getHeight()); 


console.log('Original: ' + Math.round(objwidth)); 
console.log('Orginal: ' + Math.round(objheight)); 

if(objwidth != '' && objheight != '') { 
rect1.setWidth(Math.round(objwidth)); 
rect1.setHeight(Math.round(objheight)); 
} 

http://jsfiddle.net/o0gkmjru/

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

Может кто-нибудь объяснить мне, почему?

ответ

0

вам необходимо сообщить ткани, что пришло время визуализации. Просто добавьте canvas.renderAll(); в конец обработчика кликов, и вы увидите размер изменения прямоугольника.

+0

Спасибо, но это не часть моей проблемы. Когда я выбираю объект, снова и снова нажимайте кнопку, он снова изменит его размер. Вы можете увидеть его внутри журнала консоли. Я думаю, что это имеет какое-то отношение к значениям, которые я получаю с getWidth/height - потому что, если я делаю это только с фиксированными числами, он будет делать это, как я этого хочу – Nish

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