how can I free drawing on shapes in konvajs

Question

I want to make free drawing on top of shapes at konvajs. like an exp; Can u give me advise about shapes attrs like zindex or smt.

https://ibb.co/jq9pUK

Answer 1

Your question is very broad and you are not showing what you have tried so far. You would get better help faster if you give a clear description and post cut-down sample code for your questions.

Konvajs works on top of the HTML5 canvas. When working with a konvajs you put shapes, lines, images and text on to layers. Layers have a z-order and shapes on a layer have a z-order.

To answer your question, I would follow the pattern: - create the stage - create the shape layer - add the shapes to the shape layer - triangles, rectangles, circles, etc - add another layer for the freehand drawing - draw on this layer.

Because of the sequence of adding the components to the canvas the z-order will support what you ask for in your question. If you wanted the drawing to happen 'behind' the shapes you would create the layers in the opposite sequence.

The working snippet below shows how to do the steps that I have listed above, and how to listen for the events you need to make it operate. You can extend from this starter code to handle erasing, selecting line colour, thickness, and stroke style. See the Konvajs drawing tutorial for more information.

Good luck.

// Set up the canvas / stage
var s1 = new Konva.Stage({container: 'container1', width: 300, height: 200});

// Add a layer for the shapes
var layer1 = new Konva.Layer({draggable: false});
s1.add(layer1);

// draw a cirlce
var circle = new Konva.Circle({
      x: 80,
      y: s1.getHeight() / 2,
      radius: 70,
      fill: 'red',
      stroke: 'black',
      strokeWidth: 4
})
layer1.add(circle)

// draw a wedge.
var wedge = new Konva.Wedge({
  x: 200,
  y: s1.getHeight() / 2,
  radius: 70,
  angle: 60,
  fill: 'gold',
  stroke: 'black',
  strokeWidth: 4,
  rotation: -120
});
layer1.add(wedge)

// Now add a layer for freehand drawing
var layer2 = new Konva.Layer({draggable: false});
s1.add(layer2);

// Add a rectangle to layer2 to catch events. Make it semi-transparent 
var r = new Konva.Rect({x:0, y: 0,  width: 300, height: 200, fill: 'blue', opacity: 0.1})
layer2.add(r)

// Everything is ready so draw the canvas objects set up so far.
s1.draw()

var drawingLine = null; // handle to the line we are drawing
var isPaint = false; // flag to indicate we are painting

// Listen for mouse down on the rectangle. When we get one, get a new line and set the initial point
r.on('mousedown touchstart', function () {
  isPaint = true;
  var pos = s1.getPointerPosition();
  drawingLine = newLine(pos.x, pos.y);
  drawingLine.points(drawingLine.points().concat(pos.x,pos.y)); 
  layer2.draw();
});

// Listen for mouse up ON THE STAGE, because the mouseup will not fire on the rect because the mouse is actually over the line point we just drew when it is released.
s1.on('mouseup touchend', function () {
  isPaint = false;
  drawingLine = null;
});

// when the mouse is moved, add the position to the line points and refresh the layer to see the effect.
r.on('mousemove touchmove', function () {
  if (!isPaint) {
    return;
  }

  var pos = s1.getPointerPosition();
  drawingLine.points(drawingLine.points().concat(pos.x,pos.y)); 
  layer2.draw();  
})

// Function to add and return a line object. We will extend this line to give the appearance of drawing.
function newLine(x,y){
var line = new Konva.Line({
    points: [x,y,x,y],
    stroke: 'limegreen',
    strokeWidth: 4,
    lineCap: 'round',
    lineJoin: 'round'
  });
  
layer2.add(line)
return line;
}

p
{
  padding: 4px;
  
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdn.rawgit.com/konvajs/konva/1.6.5/konva.min.js"></script>
<p>Click & drag on the canvas to draw a line over the shapes.
</p>
<div id='container1' style="display: inline-block; width: 300px, height: 200px; background-color: silver; overflow: hidden; position: relative;"></div>