问题描述:

i have a script that uses fabricJS to create shapes, but in my script i need to limit the user to insert more than one shape, and also to select between a circle or rectangle, but cant make it works.

html:

<canvas id="c" width="500" height="400" style="border:1px solid #ccc"></canvas>

<button id="btn_circle">

Use Circle

</button>

<button id="btn_rect">

Use Rectangle

</button>

js:

var canvas = new fabric.Canvas('c');

var rect, isDown, origX, origY;

canvas.on('mouse:down', function(o){

isDown = true;

var pointer = canvas.getPointer(o.e);

origX = pointer.x;

origY = pointer.y;

var pointer = canvas.getPointer(o.e);

rect = new fabric.Rect({

left: origX,

top: origY,

originX: 'left',

originY: 'top',

width: pointer.x-origX,

height: pointer.y-origY,

angle: 0,

fill: 'rgba(255,0,0,0.5)',

transparentCorners: false

});

canvas.add(rect);

});

canvas.on('mouse:move', function(o){

if (!isDown) return;

var pointer = canvas.getPointer(o.e);

if(origX>pointer.x){

rect.set({ left: Math.abs(pointer.x) });

}

if(origY>pointer.y){

rect.set({ top: Math.abs(pointer.y) });

}

rect.set({ width: Math.abs(origX - pointer.x) });

rect.set({ height: Math.abs(origY - pointer.y) });

canvas.renderAll();

});

canvas.on('mouse:up', function(o){

isDown = false;

});

Here is a live example:

http://jsfiddle.net/aPLq5/223/

相关阅读:
Top