asked on

Grouping elements on canvas using fabric.js

Next code is drawing lines on canvas when mouse is pressed.
I have to add some functions to get polyline form more lines.
As fabric.js library has option to select specific element on canvas i think i could use this option.

Once i select all lines that will be part of my polyline i would like to use double click then to group lines and call:
polylineName = prompt("Enter polyline name : ", "");
to complete the polyline.

I need instructions how to proceed?

<!DOCTYPE html>
<html>
<head>
<title>HTML, CSS and JavaScript demo</title>
  <style>
   #drawCanvas{
    position:absolute;
    top:0;
    left:0;
}
  </style>
</head>
<body>

<canvas id="canvas"></canvas>
<canvas id="drawCanvas"></canvas>
  <script>
   var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d"),
    drawCanvas = document.getElementById("drawCanvas"),
    drawCtx = drawCanvas.getContext("2d"),
    painting = false,
    lastX = 0,
    lastY = 0,
    curX = 0,
    curY = 0,
    startX = 0,
    startY = 0,
    lineThickness = 1;

canvas.width = canvas.height = 600;

drawCanvas.width = drawCanvas.height = 600;

drawCanvas.onmousedown = function(e) {
    painting = true;
    drawCtx.fillStyle = "#000";
    lastX = e.pageX - this.offsetLeft;
    lastY = e.pageY - this.offsetTop;
    startX = lastX;
    startY = lastY;
};

drawCanvas.onmouseup = function(e){
    painting = false;
    var x2 = e.pageX - this.offsetLeft,
        y2 = e.pageY - this.offsetTop;
    
    ctx.strokeStyle = "#000";
    ctx.beginPath();
    ctx.moveTo(startX, startY);
    ctx.lineTo(x2, y2);
    ctx.stroke();
    
    drawCtx.clearRect(0, 0, 600, 600);
}
    
drawCanvas.onmouseclick = function(e) {
    drawCtx.fillStyle = "#000";
    lastX = e.pageX - this.offsetLeft;
    lastY = e.pageY - this.offsetTop;
    startX = lastX;
    startY = lastY;

    if(painting){
        
    }

    else{
        painting = true;
        lastX = e.pageX - this.offsetLeft;
        lastY = e.pageY - this.offsetTop;
        startX = lastX;
        startY = lastY;
    }
};

drawCanvas.onmousemove = function(e) {
    if (painting) {
        mouseX = e.pageX - this.offsetLeft;
        mouseY = e.pageY - this.offsetTop;

        // find all points between        
        var x1 = mouseX,
            x2 = lastX,
            y1 = mouseY,
            y2 = lastY;


        var steep = (Math.abs(y2 - y1) > Math.abs(x2 - x1));
        if (steep){
            var x = x1;
            x1 = y1;
            y1 = x;

            var y = y2;
            y2 = x2;
            x2 = y;
        }
        if (x1 > x2) {
            var x = x1;
            x1 = x2;
            x2 = x;

            var y = y1;
            y1 = y2;
            y2 = y;
        }

        var dx = x2 - x1,
            dy = Math.abs(y2 - y1),
            error = 0,
            de = dy / dx,
            yStep = -1,
            y = y1;
        
        if (y1 < y2) {
            yStep = 1;
        }
       
        for (var x = x1; x < x2; x++) {
            if (steep) {
                drawCtx.fillRect(y, x, lineThickness , lineThickness );
            } else {
                drawCtx.fillRect(x, y, lineThickness , lineThickness );
            }
            
            error += de;
            if (error >= 0.5) {
                y += yStep;
                error -= 1.0;
            }
        }

        lastX = mouseX;
        lastY = mouseY;

    }
}

  </script>

</body>
</html>

Open in new window

ASKER CERTIFIED SOLUTION

Leonidas Dosas

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

Ivan Golubar

ASKER

Thank you.

It has exactly what i need.

Ivan Golubar

ASKER

Next two libraries i can see as *.rtf.
<script src="https://gojs.net/latest/extensions/PolygonDrawingTool.js"></script>
<script src="https://gojs.net/latest/extensions/GeometryReshapingTool.js"></script>

But why i can't see the other two. Why?
<script src="https://cdnjs.cloudflare.com/ajax/libs/gojs/1.8.16/go-debug.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gojs/1.8.16/go.js"></script>