Konva.js waved stroke around Rect element

Question

If that possible to change the Rect element stroke(border) to wave style like below image. I will let user to draw Rect by mouse moving.

I know how to change border to Dashed but how about wave style?

This is the Rect sample code for Konva.js and API doc https://konvajs.org/api/Konva.Rect.html



  
    
    
    Konva Rect Demo

Vanquished Wombat · Accepted Answer

So thanks to the excellent answer to this similar question, I give you this. The practical approach by @Paul LeBeau in that answer, converted to Konvajs.

Here is the working snippet - perhaps best viewed full screen. Also a codepen here so you can play.

// Set up a stage
let stage = new Konva.Stage({
        container: 'container',
        width: window.innerWidth,
        height: window.innerHeight,
      }),

  // add a layer to draw on
  layer = new Konva.Layer(),

  // Add a rect to give us a path as we draw
  rubberRect = new Konva.Rect({ X:0, Y:0, width: 0, height: 0, stroke: 'transparent', visible: false}),
  
  // and a path to provide the squiggles
  rubberSquiggles  = new Konva.Path({
        x: rubberRect.position().x,
        y: rubberRect.position().y,
        data: '',
        stroke: 'cyan',
        visible: false
      });

// Stick it all into the canvas.
layer.add(rubberRect);
layer.add(rubberSquiggles);
stage.add(layer);

// Now we need a primitive state machine and position tracking so that 
// we can follow the users mouse when they are scribing a rectangle and
// clone the final rect and path when they mouseup/

// Handy object to store state and rect position drawn 
let rectPos = {state: 'waiting', x1:0, y1: 0, x2: 0, y2: 0};

// listen for mousedown
stage.on('mousedown', function(e){

  // Set state and note the mouse starting pos. 
  rectPos = {state: 'drawing', x1: e.evt.layerX , y1: e.evt.layerY, x2: e.evt.layerX, y2: e.evt.layerY};  
  
  // ANd position the rubber rect and squiggle line there.
  rubberRect.position({x: rectPos.x1, y: rectPos.y1})
  rubberSquiggles.position({x: rectPos.x1, y: rectPos.y1});
    
  // better make sure the rubber shapes are on show.
  rubberRect.show();
  rubberSquiggles.show();
    
})

// listen for mouse move
stage.on('mousemove', function(e){
  
  
  // only draw if the mouse state is 'drawing'... 
  if (rectPos.state === 'drawing'){ 
    
    // In which case note the mouse pos...
    rectPos.x2 = e.evt.layerX;
    rectPos.y2 = e.evt.layerY;   
    
    // ...and apply to the rubber rect
    rubberRect.size({
      width: rectPos.x2 - rectPos.x1,
      height: rectPos.y2 - rectPos.y1,
    });

    // and re-calc the squiggles path, then apply it direct to the shape.    
    rubberSquiggles.data(konvaSquigglePath(rubberRect, 20, 8));
    
    layer.batchDraw();
    
  }
})

// Listen for mouseup
stage.on('mouseup', function(e){
  
  // only draw if the mouse state is 'drawing'... 
  if (rectPos.state === 'drawing'){

    // switch drawing mode off
    rectPos.state = 'waiting';

    // clone the rubber shapes
    let newRect = rubberRect.clone();
    let newPath = rubberSquiggles.clone();
    layer.add(newRect)
    layer.add(newPath)

    // hide the rubber shapes until the next draw.
    rubberRect.hide();
    rubberSquiggles.hide();
  }
})
  
/* this is the func that calculates the path.
  Props to the answer by @Paul LeBeau to https://stackoverflow.com/questions/42441472/draw-a-squiggly-line-in-svg which I have shamefully adapted here to work with Konvjs.

We pass in the konva rect from which we get the simple path. The clever part is how the 
function breaks the path into small lengths and draws beziers alternating along the points.

Play with the squiggleStep and squiggleAmplitude param values to find a pleasent effect.

*/
function konvaSquigglePath(rect, squiggleStep, squiggleAmplitude){
  
  let r = {x1: 0, y1: 0, x2: rect.width(), y2: rect.height() },

      // make a simple path around the given rect - is there an easier way ? 
     p = new Konva.Path({
      data: 'M 0 0 H ' + r.x2 + ' V ' + r.y2 + ' H 0 L 0 0'
      }),

    length = p.getLength(),
    pathLen = p.getLength(),
 
    // Adjust step so that there are a whole number of steps along the path
    numSteps = Math.round(pathLen / squiggleStep),
    pos = p.getPointAtLength(0),
    newPath = "M" + [pos.x, pos.y].join(','),
    side = -1;
  
  for (let i=1; i<=numSteps; i++)
  {
    let last = pos;
    pos = p.getPointAtLength(i * pathLen / numSteps);
    
    // Find a point halfway between last and pos. Then find the point that is
    // perpendicular to that line segment, and is squiggleAmplitude away from
    // it on the side of the line designated by 'side' (-1 or +1).
    // This point will be the control point of the quadratic curve forming the
    // squiggle step.
    
    // The vector from the last point to this one
    let vector = {x: (pos.x - last.x),
                  y: (pos.y - last.y)};
    // The length of this vector
    let vectorLen = Math.sqrt(vector.x * vector.x + vector.y * vector.y);
    // The point halfway between last point and this one
    let half = {x: (last.x + vector.x/2),
                y: (last.y + vector.y/2)};
    // The vector that is perpendicular to 'vector'
    let perpVector = {x: -(squiggleAmplitude * vector.y / vectorLen),
                      y: (squiggleAmplitude * vector.x / vectorLen)};
    // No calculate the control point position
    let controlPoint = {x: (half.x + perpVector.x * side),
                        y: (half.y + perpVector.y * side)};
    newPath += ("Q" + [controlPoint.x, controlPoint.y, pos.x, pos.y].join(','));
    // Switch the side (for next step)
    side = -side;
    
  }
  return newPath;
}

body {
  margin: 10;
  padding: 10;
  overflow: hidden;
  background-color: #f0f0f0;
}
p {
border-bottom: 1px solid #333;
}


Draw a rectangle on the white surface.

Konva.js waved stroke around Rect element

Answers (1)

Related Questions