Использование события onClick для одной фигуры для создания новой фигуры - PullRequest
Новая
       7

Использование события onClick для одной фигуры для создания новой фигуры

0 голосов
/ 09 февраля 2019

Я использую реагирование и konva, я хочу использовать onClick для рендеринга новой фигуры на странице. 

class Rectangle extends Component {
    render() {
        return(
        <Rect 
            x={250}
            y={25}
            width={50}
            height={100}
            stroke="black"
            draggable
            fill={blue}
            onDragStart={() => {
                isDragging: true
            }}
            onDragEnd={() => (
                isDragging: false
            )}
        />
        );
    };
}
class Rectangle3 extends Component{
        render () {
        return(
            <Rect onClick={<Rectangle/>}
            x={380}
            y={85}
            width={100}
            height={50}
            stroke="black"
            />
        )
    }
}

Я получаю сообщение об ошибке Uncaught TypeError: events [i] .handler.вызов не является функцией

1 Ответ

0 голосов
/ 09 февраля 2019

Есть несколько способов сделать это, но проще всего было бы отобразить значения JSON Array из height, width, x и y.

Например, вот JSON Array: 

[
  {
    x: 250
    y: 25
    width: 50
    height: 100
  },
  {
    x: 121
    y: 157
    width: 64
    height: 49
  },
  {
    x: 201
    y: 167
    width: 11
    height: 47
  }
   ...etc
];

Использование JSON Array с реаги-конвой , вот один подход ...

Рабочий пример : https://codesandbox.io/s/l90qyxr3jl (щелкните прямоугольник, чтобы создать новый ... или просто нажмите и удерживайте, чтобы перетащить текущий выбранный прямоугольник вокруг холста)

Компоненты / App.js 

import React, { Component } from "react";
import Konva from "konva";
import { Stage, Layer, Rect } from "react-konva";

// creates a random number between 1 and a number parameter passed in as "num"
const random = num => Math.floor(Math.random() * num) + 1;

// creates a new object with random: x, y, width, and height values (the number passed in represents a maximum value)
const newRectangle = () => ({
  x: random(250),
  y: random(300),
  width: random(100),
  height: random(100)
});

export default class App extends Component {
  // initializing state with a canvas JSON Array with a default rectangle
  state = {
    canvas: [
      {
        x: 250,
        y: 25,
        width: 50,
        height: 100
      }
    ]
  };

  // when clicking on a rectangle, it creates a new rectangle by spreading out previous canvas values and adding a new set of values
  handleClick = () => {
    this.setState(prevState => ({
      canvas: [...prevState.canvas, { ...newRectangle() }]
    }));
  };

  // handles rectangle dragging
  handleDragStart = e => {
    e.target.setAttrs({
      shadowOffset: {
        x: 15,
        y: 15
      },
      scaleX: 1.1,
      scaleY: 1.1
    });
  };

  // handles rectangle dropping
  handleDragEnd = e => {
    e.target.to({
      duration: 0.5,
      easing: Konva.Easings.ElasticEaseOut,
      scaleX: 1,
      scaleY: 1,
      shadowOffsetX: 5,
      shadowOffsetY: 5
    });
  };

  render = () => (
    <Stage width={window.innerWidth} height={window.innerHeight}>
      <Layer>
        {this.state.canvas.map(({ height, width, x, y }, key) => ( // like a "for loop", this maps over this.state.canvas objects and pulls out the height, width, x, y properties to be used below
          <Rect
            key={key}
            x={x}
            y={y}
            width={width}
            height={height}
            stroke="grey"
            draggable
            fill="blue"
            shadowOffset={{ x: 5, y: 5 }}
            onDragStart={this.handleDragStart}
            onDragEnd={this.handleDragEnd}
            onClick={this.handleClick}
          />
        ))}
      </Layer>
    </Stage>
  );
}
...