0

I'm trying to do a drawing html page using Fabricjs, but i'm new to javascript. I have two problems, the first is i want to bring at the top an object when i click it, but after some test the drawing order didnt change. The second is connected to intersect beetween objects, i need it to make an eraser, when it intersect another object, it will delete it (now just try changing opacity) I think i made some syntax error. ps the initF() function runs once when page is loaded

//canvas di default
var myCanvas;

//layer interposto fra myCanvas e le figure disegnate
var canvF;

//strutture dati per tenere traccia in modo distinti delle varie figure
var rettangoli;
var cerchi;

//flag
var drawing;
var circleOn;
var erase;
var gomma;

//generatore casuale di colore
function getRandomColor() {
    var letters = '0123456789ABCDEF'.split('');
    var rand_color = '#';
    for (var i = 0; i < 6; i++) {
        rand_color += letters[Math.floor(Math.random() * 16)];
    }
    return rand_color;
}

//inizializza il container e il canvas
function initF() {
    erase = false;
    drawing = false;
    circleOn = false;
    canvasContainer = document.createElement('div');
    document.body.appendChild(canvasContainer);
    canvasContainer.style.position = "absolute";
    canvasContainer.style.left = "0px";
    canvasContainer.style.top = "0px";
    canvasContainer.style.width = "100%";
    canvasContainer.style.height = "100%";
    canvasContainer.style.zIndex = "1000";
    superContainer = document.body;
    myCanvas = document.createElement('canvas');
    myCanvas.style.width = superContainer.scrollWidth + "px";
    myCanvas.style.height = superContainer.scrollHeight + "px";
    myCanvas.width = superContainer.scrollWidth;
    myCanvas.height = superContainer.scrollHeight;
    myCanvas.style.overflow = 'visible';
    myCanvas.style.position = 'absolute';
    canvasContainer.appendChild(myCanvas);
    canvF = new fabric.Canvas(myCanvas);
    rettangoli = new fabric.Canvas(myCanvas);
}

function drawRectF() {
    canvF.isDrawingMode = false;
    var rect = new fabric.Rect();
    rect.left = 100;
    rect.top = 100;
    var coloreRect = getRandomColor();
    rect.fill= coloreRect;
    rect.width = 80;
    rect.height = 80;
    rect.borderColor = 'red';
    rect.cornerColor = 'green';
    rect.cornerSize = 20;
    transparentCorners = false;
    rettangoli.add(rect);
    canvF.add(rect);

}

function animaF() {

        rettangoli.forEachObject(function (obj) {
                    obj.animate('top', myCanvas.height-obj.height, {
                        onChange: canvF.renderAll.bind(canvF),
                        duration: 2000,
                        easing: fabric.util.ease.easeOutBounce
                    });
        });

}

function drawCircleF() {
    canvF.isDrawingMode = false;
    var circle = new fabric.Circle({ radius: 30, fill: getRandomColor(), top: myCanvas.height / 2, left: myCanvas.width / 2 });
    circle.borderColor = 'red';
    circle.cornerColor = 'green';
    circle.cornerSize = 20;
    transparentCorners = false;
    canvF.add(circle);
    circle.on({'mousedown': canvF.bringToFront(circle)})
}

function textF() {
    var comicSansText = new fabric.Text("Ciao", { fontFamily: 'Comic Sans' });
    comicSansText.textBackgroundColor = red;
    comicSansText.left = 100;
    comicSansText.top = 100;
    comicSansText.width = 100;
    comicSansText.height = 100;
    canvF.add(comicSansText);
}

function EraseF() {
    erase = true;
    gomma = new fabric.Rect();
    rect.left = myCanvas.width/2;
    rect.top = 100;
    var coloreRect = getRandomColor();
    rect.fill = coloreRect;
    rect.width = 100;
    rect.height = 50;
    rect.borderColor = 'red';
    rect.cornerColor = 'transparent';
    rect.cornerSize = 10;
    transparentCorners = false;
    rect.hasBorders = false;
    perPixelTargetFind = true;
    canvF.add(rect);
    gomma.on({
        'moving': onChange,
        'scaling': onChange,
        'rotating': onChange,
    });
}

function onChange(options) {
    options.target.setCoords();
    canvF.forEachObject(function(obj) {
        if (obj === options.target) return;
        obj.setOpacity(options.target.intersectsWithObject(obj) ? 0.5 : 1);
    });
}



function drawLineF() {
    canvF.isDrawingMode = true;
    freeDrawingBrush.color = getRandomColor();
    freeDrawingBrush.width = 10;
    perPixelTargetFind = true;
}

1 Answer 1

0

Here you find example of how bringtofront works and how you can delete on intersection.

As you see we put the logic of canvas.bringToFron in every object selection event.

For the "eraser" the logic is a little bit different. For every move or scaling, we update the eraser coordinates (setCoords, this is important), then we cycle for each object on the canvas and we check if some is intersecting with the bouding box of the eraser and then, if there is a positive match, we delete the object.

  var canvas = new fabric.Canvas('canvas');
  var onChange = function(options) {
if (!options.target.eraser) {
  return;
}
options.target.setCoords();
canvas.forEachObject(function(obj) {
  if (!obj.eraser && options.target.intersectsWithObject(obj)) {
    canvas.remove(obj);
  }
});
  }

$(document).ready(function() {
    canvas.add(new fabric.Rect({left: 50, width: 100, height: 50, fill: 'red'}));
    canvas.add(new fabric.Rect({left: 70, width: 100, height: 50, fill: 'blue'}));
    canvas.add(new fabric.Rect({left: 90, width: 100, height: 50, fill: 'green'}));
    var circle = new fabric.Circle({top: 100, left: 300, radius: 10, fill: 'purple', eraser: true});
    canvas.add(circle);
    canvas.on('object:selected', function(options) {
       canvas.bringToFront(options.target);
    });
    canvas.on('object:scaling', onChange);
    canvas.on('object:moving', onChange);

});
<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id='canvas' width="500" height="400" style="border:#000 1px solid;"></canvas>

6
  • my problem is the syntax, i understand how the functions work. I added the last part of your code in my js file, changing canvas with canvF but it didn't work why? I don't want code in my html, just in the external js file
    – ghiltanas
    Nov 16, 2015 at 8:55
  • Are you able to use jsfiddle and setup a fiddle with your html and js? is pretty easy give it a try. Nov 16, 2015 at 9:22
  • I dont know it, but i'll try to use it..hwe i want to use just a JS file, 'cause my future goal is to make a drawing bookmarklet , so i think i had to be indipendent from HTML
    – ghiltanas
    Nov 16, 2015 at 9:26
  • if you are new to web development, jsfiddle is a tool very usefull to debug and ask for help. Nov 16, 2015 at 9:30
  • Solved! I added the function in the init and now it works..ps i'm starting to love js xD
    – ghiltanas
    Nov 16, 2015 at 10:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.