javascript - change border width of Rect in fabricjs - Stack Overflow

admin管理员组

文章数量:1245087

This Rectangle i have created on canvas using fabicjs , now on change of text box i want to set border width . i tried following but its not working.

image[img] = new fabric.Rect({
                    top : 100,
                    left : 100,
                    width : 50,
                    height : 50,
                    fill : '#f55',
                    stroke : 'black',
                    strokeWidth : 1
                });

Changing Border Width ::

$('#shape_border_size').change(function() {
    console.log(' size changed to ' + $(this).val());

    var obj = canvas.getActiveObject();

    if (!obj)
        return;

    //obj.set('strokeWidth', $(this).val());
    canvas.renderAll();

});

This Rectangle i have created on canvas using fabicjs , now on change of text box i want to set border width . i tried following but its not working.

image[img] = new fabric.Rect({
                    top : 100,
                    left : 100,
                    width : 50,
                    height : 50,
                    fill : '#f55',
                    stroke : 'black',
                    strokeWidth : 1
                });

Changing Border Width ::

$('#shape_border_size').change(function() {
    console.log(' size changed to ' + $(this).val());

    var obj = canvas.getActiveObject();

    if (!obj)
        return;

    //obj.set('strokeWidth', $(this).val());
    canvas.renderAll();

});

• javascript
• jquery
• html
• canvas
• fabricjs

Share Improve this question Follow asked Sep 20, 2013 at 7:02 anamanam 3,9131616 gold badges4646 silver badges8585 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 10

I think your code is fine, don't know why it's not working. Check this http://jsfiddle/hellomaya/kNEaX/3/

var rect = new fabric.Rect({
    top: 100,
    left: 100,
    width: 50,
    height: 50,
    fill: '#f55',
    stroke: 'white',
    strokeWidth: 1
});

canvas.add(rect);
canvas.renderAll();

$('#a').click(function () {
    rect.set('strokeWidth', 20);
    canvas.renderAll();
});

$('#b').click(function () {
    rect.set('strokeWidth', 20);
    rect.width += 20;
    rect.height += 20;
    canvas.renderAll();
});

本文标签： javascriptchange border width of Rect in fabricjsStack Overflow