Konva series tutorial 3: Customizing drawings

Hello everyone , I'm brother watermelon .

Let's see how it works kanva Draw custom graphics .

Now we're going to draw a diamond . So called diamond , Is a quadrilateral with equal sides .

We need to bring in (x, y) Set the upper left corner of the diamond , And use width and height Set the width and height of the diamond .

Konva.Shape class

We need to new One Konva.Shape object , And write senceFunc function , To describe graphics .

const diamond = new Konva.Shape({
  sceneFunc(ctx, shape) {
    //  Draw your own custom shapes 
  },
  width: 60,
  height: 100
});

senceFunc Function receive konva Incoming canva Context ctx, And a shape object .

ctx It's right canvas Of 2d context The enhancement of , In addition to the original properties and methods , It also provides konva Some special methods . We need to use this ctx To draw something .

shape Is a shape instance , You can get some attribute values through it （ For example, width and height values ）, It is used to calculate the coordinate position of each point of the graph we want to draw .

Drawing of diamond

function sceneFunc(ctx, shape) {
  const w = shape.getAttr('width');
  const h = shape.getAttr('height');

  ctx.beginPath();
  ctx.moveTo(w / 2, 0);
  ctx.lineTo(w, h / 2);
  ctx.lineTo(w / 2, h);
  ctx.lineTo(0, h / 2);
  ctx.closePath();
 
  ctx.fillStrokeShape(shape);
}

First, we calculate the end points of the diamond , use canvas Native ctx.moveTo and ctx.lineTo Connect in turn , Then call konva Enhanced ctx.fillStrokeShape(shape) Method , Fill the path first , Stroke again .

It should be noted that ,x and y Can't participate in the calculation , because konva Will do additional position offset operations . If your calculations here take into account x and y, Will cause the actual position to become twice as expected . Again ,scale The scaling value should not be involved in the calculation .

The full way to write it is ：

const diamond = new Konva.Shape({
  x: 200,
  y: 20,
  width: 60,
  height: 100,
  fill: '#0288d1',
  sceneFunc(ctx, shape) {
    const w = shape.getAttr('width');
    const h = shape.getAttr('height');
    ctx.beginPath();
    ctx.moveTo(w / 2, 0);
    ctx.lineTo(w, h / 2);
    ctx.lineTo(w / 2, h);
    ctx.lineTo(0, h / 2);
    ctx.closePath();

    ctx.fillStrokeShape(shape);
  }
});
layer.add(diamond);

We can simply encapsulate , Write a createDiamond Method , Convenient for multiple calls .

const createDiamond = (props) => {
  return new Konva.Shape({
    ...props,
    sceneFunc(ctx, shape) {
      const w = shape.getAttr('width');
      const h = shape.getAttr('height');
      ctx.beginPath();
      ctx.moveTo(w / 2, 0);
      ctx.lineTo(w, h / 2);
      ctx.lineTo(w / 2, h);
      ctx.lineTo(0, h / 2);
      ctx.closePath();

      ctx.fillStrokeShape(shape);
    }
  });
};

//  usage 
const diamond2 = createDiamond({
  x: 30,
  y: 30,
  width: 120,
  height: 100,
  fill: '#fff'
});
layer.add(diamond2);

sceneFunc It may be called more than once in a second , It is better not to do some operations that will degrade performance , For example, create a large image object .

Besides ,scenceFunc You should only do operations related to drawing , It is not recommended to do other operations in it , For example, binding events .

I'm brother watermelon , Welcome to follow me , Learn front-end knowledge together .