CODEWITHSUNDEEP
javascripthtml5-canvasfabricjs
karthick1870
karthick1870

Reputation: 53

setAngle is not a function fabricjs

I recently started to work with fabricjs, and I have a question about connectivity object. i do creating sample demo for connectivity from parent object to child object connect with arrow. I got sample demo http://kpomservices.com/HTML5CanvasCampaign/campaign.html. This code should work with fabric 1.4.2.A similar code is possible for the version 2.3.3 not work.

Error functions.js:963 Uncaught TypeError: c.setAngle is not a function

code

function makeArrow(centerpt, left, top, line) {
    var c = new fabric.Triangle({
        width: 10,
        height: 10,
        left: left,
        top: top,
        //selectable: false,
        strokeWidth: 3,
        fill: 'grey',
        opacity: 1,
        stroke: 'grey',
        originX: 'center',
        originY: 'center'
    });

    c.hasBorders = c.hasControls = false;
    c.angle = 90;
    c.line = line;
    var dx = left - centerpt.x;
    var dy = top - centerpt.y;
    var angle = Math.atan2(dy, dx) * 180 / Math.PI;
    c.setAngle(angle + 90);
    c.setCoords();
    c.name = 'ep';
    line.ep = c;
    c.line = line;
    return c;
}

Upvotes: 5

Views: 2564

Answers (1)

Durga
Durga

Reputation: 15604

Build doesn't have setter/getter (optional). You can make your build here with Named accessors. If you want to set angle you can use

obj.angle = text;
//or
obj.set({
 angle:angle
});
//or
obj.set('angle', angle);

DEMO

var canvas = new fabric.Canvas('c');
var triangle = new fabric.Triangle({
  left: 150,
  top: 50,
  width: 300,
  height:200,
  fill:'',
  stroke:'red'
})

canvas.add(triangle);
triangle.set('angle',40);
//triangle.angle = 40;
//triangle.set({angle : 40})
canvas{
 border:1px solid #000;
}
<script type="text/javascript" src="
https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="c" width="400" height="400"></canvas>

Upvotes: 2

Related Questions