CODEWITHSUNDEEP
javascriptfabricjs
Durga
Durga

Reputation: 15604

Draw outside bounding box in fabric js

Check this fiddle setting width and height to circle object:

circle.set({ radius: Math.abs(origX - pointer.x), width : 50,height :50 });

so bounding box will be 50*50

its drawing fine for fabricjs 1.5.0, but not in newer version. I want to draw outside bounding box, how can I acheive it?

Upvotes: 4

Views: 2131

Answers (3)

Durga
Durga

Reputation: 15604

var canvas = new fabric.Canvas('c', { selection: false });

var circle, isDown, origX, origY;

canvas.on('mouse:down', function(o){
  isDown = true;
  var pointer = canvas.getPointer(o.e);
  origX = pointer.x;
  origY = pointer.y;
  circle = new fabric.Circle({
    left: pointer.x,
    top: pointer.y,
    radius: 1,
    strokeWidth: 5,
    stroke: 'red',
    objectCaching : false,
    originX: 'center', originY: 'center'
  });
  canvas.add(circle);
});

canvas.on('mouse:move', function(o){
  if (!isDown) return;
  var pointer = canvas.getPointer(o.e);
  circle.set({ radius: Math.abs(origX - pointer.x), width : 50,height :50 });
  canvas.renderAll();
});

canvas.on('mouse:up', function(o){
  isDown = false;
});
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="c" width="500" height="500" style="border:1px solid #ccc"></canvas>

use objectCaching:false to get the desired effect.

Upvotes: 2

graphicmist
graphicmist

Reputation: 71

I was also facing the same problem. In my case i was trying to draw line outside the bounding box of rectangle. I have validated from other examples that it is not possible to do it in new versions of fabric js. This makes sense as it might cause some other problems. So, you have to figure out something else. In my case i am using path to fulfill my requirement.

Upvotes: 0

Tim Harker
Tim Harker

Reputation: 2407

Just change this...

circle.set({ radius: Math.abs(origX - pointer.x), width : 50,height :50 });

To this...

var newAbsValue = Math.abs(origX - pointer.x);
circle.set({ radius: newAbsValue, width : newAbsValue * 2, height : newAbsValue * 2 });

Here's your JSFiddle updated, http://jsfiddle.net/rekrah/8rb8Lahb/.

Upvotes: 0

Related Questions