Open danoszz opened 5 years ago
Hi Daan,
Sorry to say but I do think I need some help with this. I tried to find a structure on how to do this, but I find it a bit too much. I have never done drag and drop and I am not really familiar with canvas nor Konva.js. I would like a small bit of guidance regarding this. Of course in the meantime, I will try to find more information or resources on how to do this so that I can at least learn some stuff on my own.
Sorry! 😅
@RubenNijhuis let's forget about the drag and drop for now. Maybe focus on the elements to be imported in the canvas
You see here below that the component <Circle>
and <StaticImage>
are 'injected' in the canvas. So any type of component can be rendered on the canvas, it just needs to have an component.
<Stage width={window.innerWidth} height={window.innerHeight}>
<Layer>
{numbers.map(number => (
<>
{/* <Circle
key={number.toString()}
x={Math.random() * window.innerWidth}
y={Math.random() * window.innerHeight}
radius={50}
fill={this.state.isDragging ? '#0000ed' : 'black'}
opacity={0.8}
draggable
rotation={Math.random() * 10}
shadowColor="rgba(0, 0, 0, 0.2)"
shadowBlur={20}
shadowOpacity={0.6}
onDragStart={this.handleDragStart}
onDragEnd={this.handleDragEnd}
/> */}
<StaticImage key={number.toString()} />
</>
))}
</Layer>
</Stage>
So what I suggest:
/home
<StaticImage/>
@RubenNijhuis please put task in progress pipeline
I'll get onto it!
To do
On
/project
page create a container where images or text (= rich elements) can be dragged in the HTML5 canvas of Konva.js