我正在使用react和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"
/>
)
}
}
我收到一条错误消息 未捕获的TypeError:events [i] .handler.call不是函数
答案 0 :(得分:3)
有几种方法可以解决此问题,但最简单的方法是映射height
,width
,x
和y
值的JSON Array
例如,这是一个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
与react-konva结合使用,这是一种方法...
工作示例:https://codesandbox.io/s/l90qyxr3jl(单击一个矩形以创建一个新矩形...,或者单击并按住以在画布上拖动当前选定的矩形)
components / 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>
);
}