JSFiddle - React, Tailwind, and code Playground

by takeshi1234

HTML

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/[email protected]/konva.min.js"></script>
    <meta charset="utf-8" />
    <title>Konva Zoom Demo</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #f0f0f0;
      }
      #stage-parent {
        width: 100vw;
        height: 100vh;
      }
    </style>
  </head>

  <body>
    <div id="stage-parent">
      <div id="container"></div>
    </div>
    <script>
      stageConfig = {
        width: 8000,
        height: 8000,
        scaleBy: 1.5,
        minScale: 1,
        container: document.querySelector('#stage-parent'),
      }

      var stage = new Konva.Stage({
        container: 'container',
        width: stageConfig.width,
        height: stageConfig.height,
        draggable: true,
        dragBoundFunc: function(pos) {
          return reposition( pos );
        }
      });

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

      var rect3 = new Konva.Rect({
        x: 0,
        y: 0,
        width: stageConfig.width,
        height: stageConfig.height,
        fillRadialGradientStartPoint: { x: stageConfig.width / 2, y: stageConfig.height / 2 },
        fillRadialGradientStartRadius: 0,
        fillRadialGradientEndPoint: { x: stageConfig.width / 2, y: stageConfig.height / 2 },
        fillRadialGradientEndRadius: Math.max( stageConfig.width, stageConfig.height ) / 2,
        fillRadialGradientColorStops: [0, 'red', 0.5, 'yellow', 1, 'blue'],
      });
      layer.add(rect3);

      layer.draw();

      stage.on('wheel', e => {
        e.evt.preventDefault();
        var scaleBy = stageConfig.scaleBy;
        var oldScale = stage.scaleX();

        var mousePointTo = {
          x: stage.getPointerPosition().x / oldScale - stage.x() / oldScale,
          y: stage.getPointerPosition().y / oldScale - stage.y() / oldScale
        };
        console.log(mousePointTo)

        var newScale =
          e.evt.deltaY...