Konvajs не работает draggable из функции

Question

Использую konvajs. Заметил, что если создать фигуру внутри какой-нибудь функции, и добавить ее к группе или слою, которые были созданы за пределами этой функции, то свойство draggable у этой фигуры работать не будет. Как поправить?

index.html

<!DOCTYPE html>
<html>

<head>
  <script src="https://unpkg.com/[email protected]/konva.min.js"></script>
  <meta charset="utf-8" />
  <title>WinCAD</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #f0f0f0;
    }
  </style>
  <style>
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #f0f0f0;
    }
  </style>
</head>

<body>
  <div id="toolbar"></div>
  <div id="container"></div>
  <script>

    var width = window.innerWidth;
    var height = window.innerHeight;

    var stage = new Konva.Stage({
      container: 'container',
      width: width,
      height: height
    });

    var layer = new Konva.Layer({
      id: 'layer'
    });

    var group = new Konva.Group({
      x: 120,
      y: 40,
      rotation: 0,
      draggable: true,
      id: 'group'
    });

      var initialWinHeight = 200;
      var initialWinWidth = 200;
      var profileWidth = 12

      var outerFrame = new Konva.Rect({
        x: 30,
        y: 30,
        width: initialWinHeight,
        height: initialWinWidth,
        name: 'OuterFrame',
        fill: 'White',
        stroke: 'black',
        strokeWidth: 1
      });

      var innerFrame = new Konva.Rect({
        x: 30 + profileWidth,
        y: 30 + profileWidth,
        width: initialWinHeight - profileWidth * 2,
        height: initialWinWidth - profileWidth * 2,
        name: 'innerFrame',
        fill: 'PaleTurquoise',
        stroke: 'black',
        strokeWidth: 1,
        id: 'innerFrame',
      });

      group.add(outerFrame);
      group.add(innerFrame);
      layer.add(group);
      stage.add(layer);


    function addImpost() {
      var x = innerFrame.x();
      var y = innerFrame.y();
      console.log(x);
      var impost = new Konva.Rect({
        x: innerFrame.x(),
        y: innerFrame.y(),
        width: 15,
        height: 200,
        name: 'impost',
        fill: 'green',
        stroke: 'black',
        strokeWidth: 1,
        zindex: 1,
        id: 'impost',
        draggable: true
      });
      layer.add(impost);
      layer.draw();
    }
  </script>
</body>

</html>

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Stage, Layer, Rect, Circle, Line } from "react-konva";
import { AppBar, Toolbar, IconButton, Typography } from '@material-ui/core';
import MenuIcon from '@material-ui/icons/Menu';
import AddCircleOutlineIcon from '@material-ui/icons/AddCircleOutline';
import ClearAllIcon from '@material-ui/icons/ClearAll';
import SaveAltIcon from '@material-ui/icons/SaveAlt';
import RedoIcon from '@material-ui/icons/Redo';
import UndoIcon from '@material-ui/icons/Undo';
import BorderVerticalIcon from '@material-ui/icons/BorderVertical';

class OfficeToolbar extends React.Component {
    render() {
      return (
        <AppBar position="static">
          <Toolbar>
            <IconButton edge="start" color="inherit" aria-label="Menu" title="Меню">
              <MenuIcon />
            </IconButton>
            <IconButton edge="start" color="inherit" aria-label="Add shape" title="Добавить форму">
              <AddCircleOutlineIcon />
            </IconButton>
            <IconButton edge="start" color="inherit" aria-label="Add impost" title="Добавить импост" onClick={addImpost}>
              <BorderVerticalIcon />
            </IconButton>
            <IconButton edge="start" color="inherit" aria-label="Redo" title="Отменить">
              <UndoIcon />
            </IconButton>
            <IconButton edge="start" color="inherit" aria-label="Redo" title="Повторить">
              <RedoIcon />
            </IconButton>
            <IconButton id="clear" edge="start" color="inherit" aria-label="Clear all" title="Очистить">
              <ClearAllIcon />
            </IconButton>

            <IconButton edge="start" color="inherit" aria-label="save" title="Скачать">
              <SaveAltIcon />
            </IconButton>
            <Typography variant="h6">
              WinCAD
            </Typography>
          </Toolbar>
        </AppBar>
      );
    }
  }

  ReactDOM.render(<OfficeToolbar />, document.getElementById('toolbar'));

БЛОГ НА HUSL

Konvajs не работает draggable из функции

Ответы (0 шт):