Introduction to Konva

Konva is a powerful 2D canvas library for the web, providing an easy-to-use interface and numerous features. With Konva, you can create and manipulate various shapes, images, and animations on an HTML5 canvas element. It is perfect for developers looking to build interactive animations, games, data visualizations, and more.

Getting Started with Konva

  <!-- Include Konva.js library -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/konva/8.3.5/konva.min.js"></script>

  <!-- Create a container for the canvas -->
  <div id="container"></div>

  <script>
      // Initialize the Konva Stage
      var stage = new Konva.Stage({
        container: 'container',
        width: window.innerWidth,
        height: window.innerHeight,
      });

      // Create a Layer
      var layer = new Konva.Layer();
      stage.add(layer);

      // Create a Rectangle
      var rect = new Konva.Rect({
        x: 50,
        y: 50,
        width: 100,
        height: 100,
        fill: 'red',
        stroke: 'black',
        strokeWidth: 4,
      });
      layer.add(rect);

      // Draw the Layer
      layer.draw();
  </script>

Useful Konva APIs

Konva comes with dozens of useful APIs to handle various elements, animations, and events. Here are some examples:

Creating Shapes

  // Create a Circle
  var circle = new Konva.Circle({
    x: 200,
    y: 200,
    radius: 70,
    fill: 'blue',
    stroke: 'black',
    strokeWidth: 4,
  });
  layer.add(circle);
  layer.draw();

  // Create a Line
  var line = new Konva.Line({
    points: [73, 70, 340, 23, 200, 100],
    stroke: 'green',
    strokeWidth: 5,
    lineCap: 'round',
    lineJoin: 'round',
  });
  layer.add(line);
  layer.draw();

Handling Events

  // Add Click Event to the Rectangle
  rect.on('click', function () {
    alert('Rectangle clicked!');
  });

  // Add Mouseover Event to the Circle
  circle.on('mouseover', function () {
    circle.fill('yellow');
    layer.draw();
  });

  // Add Mouseout Event to the Circle
  circle.on('mouseout', function () {
    circle.fill('blue');
    layer.draw();
  });

Animations

  // Create an Animation for the Rectangle
  var anim = new Konva.Animation(function (frame) {
    var scale = Math.sin(frame.time * 2 * Math.PI / 2000) + 0.001;
    rect.scale({ x: scale, y: scale });
  }, layer);

  anim.start();

Complete Application Example

Here’s a complete application example using the mentioned APIs:

  <!-- Include Konva.js library -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/konva/8.3.5/konva.min.js"></script>
  <div id="container"></div>
  <script>
    var stage = new Konva.Stage({
      container: 'container',
      width: window.innerWidth,
      height: window.innerHeight,
    });

    var layer = new Konva.Layer();
    stage.add(layer);

    var rect = new Konva.Rect({
      x: 50,
      y: 50,
      width: 100,
      height: 100,
      fill: 'red',
      stroke: 'black',
      strokeWidth: 4,
    });
    layer.add(rect);

    var circle = new Konva.Circle({
      x: 200,
      y: 200,
      radius: 70,
      fill: 'blue',
      stroke: 'black',
      strokeWidth: 4,
    });
    layer.add(circle);

    var line = new Konva.Line({
      points: [73, 70, 340, 23, 200, 100],
      stroke: 'green',
      strokeWidth: 5,
      lineCap: 'round',
      lineJoin: 'round',
    });
    layer.add(line);

    layer.draw();

    rect.on('click', function () {
      alert('Rectangle clicked!');
    });

    circle.on('mouseover', function () {
      circle.fill('yellow');
      layer.draw();
    });

    circle.on('mouseout', function () {
      circle.fill('blue');
      layer.draw();
    });

    var anim = new Konva.Animation(function (frame) {
      var scale = Math.sin(frame.time * 2 * Math.PI / 2000) + 0.001;
      rect.scale({ x: scale, y: scale });
    }, layer);

    anim.start();
  </script>

Using Konva, you can simplify the process of creating interactive graphics and animations. Explore more features and enjoy building your next project with Konva!

Hash: 0806683e3665b61c4180b8e848c68121f0c37c3db9cf1f2e5e90993373be2be8