-
Notifications
You must be signed in to change notification settings - Fork 95
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
17 changed files
with
277 additions
and
124 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,57 +1,75 @@ | ||
| import React, { Component } from 'react'; | ||
| import Konva from 'konva'; | ||
| import React from 'react'; | ||
| import { render } from 'react-dom'; | ||
| import { Stage, Layer, Star, Text } from 'react-konva'; | ||
|
|
||
| class App extends Component { | ||
| handleDragStart = e => { | ||
| e.target.setAttrs({ | ||
| shadowOffset: { | ||
| x: 15, | ||
| y: 15 | ||
| }, | ||
| scaleX: 1.1, | ||
| scaleY: 1.1 | ||
| }); | ||
| }; | ||
| handleDragEnd = e => { | ||
| e.target.to({ | ||
| duration: 0.5, | ||
| easing: Konva.Easings.ElasticEaseOut, | ||
| scaleX: 1, | ||
| scaleY: 1, | ||
| shadowOffsetX: 5, | ||
| shadowOffsetY: 5 | ||
| }); | ||
| function generateShapes() { | ||
| return [...Array(10)].map((_, i) => ({ | ||
| id: i.toString(), | ||
| x: Math.random() * window.innerWidth, | ||
| y: Math.random() * window.innerHeight, | ||
| rotation: Math.random() * 180, | ||
| isDragging: false, | ||
| })); | ||
| } | ||
|
|
||
| const INITIAL_STATE = generateShapes(); | ||
|
|
||
| const App = () => { | ||
| const [stars, setStars] = React.useState(INITIAL_STATE); | ||
|
|
||
| const handleDragStart = (e) => { | ||
| const id = e.target.id(); | ||
| setStars( | ||
| stars.map((star) => { | ||
| return { | ||
| ...star, | ||
| isDragging: star.id === id, | ||
| }; | ||
| }) | ||
| ); | ||
| }; | ||
| render() { | ||
| return ( | ||
| <Stage width={window.innerWidth} height={window.innerHeight}> | ||
| <Layer> | ||
| <Text text="Try to drag a star" /> | ||
| {[...Array(10)].map((_, i) => ( | ||
| <Star | ||
| key={i} | ||
| x={Math.random() * window.innerWidth} | ||
| y={Math.random() * window.innerHeight} | ||
| numPoints={5} | ||
| innerRadius={20} | ||
| outerRadius={40} | ||
| fill="#89b717" | ||
| opacity={0.8} | ||
| draggable | ||
| rotation={Math.random() * 180} | ||
| shadowColor="black" | ||
| shadowBlur={10} | ||
| shadowOpacity={0.6} | ||
| onDragStart={this.handleDragStart} | ||
| onDragEnd={this.handleDragEnd} | ||
| /> | ||
| ))} | ||
| </Layer> | ||
| </Stage> | ||
| const handleDragStart = (e) => { | ||
| setStars( | ||
| stars.map((star) => { | ||
| return { | ||
| ...star, | ||
| isDragging: false, | ||
| }; | ||
| }) | ||
| ); | ||
| } | ||
| } | ||
| }; | ||
|
|
||
| return ( | ||
| <Stage width={window.innerWidth} height={window.innerHeight}> | ||
| <Layer> | ||
| <Text text="Try to drag a star" /> | ||
| {stars.map((star) => ( | ||
| <Star | ||
| key={star.id} | ||
| id={star.id} | ||
| x={star.x} | ||
| y={star.y} | ||
| numPoints={5} | ||
| innerRadius={20} | ||
| outerRadius={40} | ||
| fill="#89b717" | ||
| opacity={0.8} | ||
| draggable | ||
| rotation={star.rotation} | ||
| shadowColor="black" | ||
| shadowBlur={10} | ||
| shadowOpacity={0.6} | ||
| shadowOffsetX={start.isDragging ? 10 : 5} | ||
| shadowOffsetY={start.isDragging ? 10 : 5} | ||
| scaleX={start.isDragging ? 1.2 : 1} | ||
| scaleY={start.isDragging ? 1.2 : 1} | ||
| onDragStart={handleDragStart} | ||
| onDragEnd={handleDragEnd} | ||
| /> | ||
| ))} | ||
| </Layer> | ||
| </Stage> | ||
| ); | ||
| }; | ||
|
|
||
| render(<App />, document.getElementById('root')); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| title: react-konva - declarative canvas components for React | ||
| layout: react_page | ||
| --- | ||
|
|
||
| ```bash | ||
| npm install react-konva konva | ||
| ``` | ||
|
|
||
|
|
||
|
|
||
| <div class="features"> | ||
| <div class="feature"><img src="/assets/features/undraw_abstract_x68e.svg" /> | ||
| <h3 class="desc">All common shapes for graphical applications</h3> | ||
| </div> | ||
| <div class="feature"><img src="/assets/features/undraw_file_sync_ot38.svg" /> | ||
| <h3 class="desc">Support for desktop and mobile devices</h3> | ||
| </div> | ||
| <div class="feature"><img src="/assets/features/undraw_fitting_pieces_cli3.svg" /> | ||
| <h3 class="desc">Node nesting, grouping and event bubbling</h3> | ||
| </div> | ||
| <div class="feature"><img src="/assets/features/undraw_image_viewer_wxce.svg" /> | ||
| <h3 class="desc">Hight quality exports into data URLs, image data, or image objects</h3> | ||
| </div> | ||
| </div> | ||
|
|
||
| ## How it looks? | ||
|
|
||
| ```js | ||
| import { Stage, Layer, Rect } from 'react-konva'; | ||
|
|
||
| export const App = () => { | ||
| return ( | ||
| // Stage - is a div wrapper | ||
| // Layer - is an actual 2d canvas element, so you can clear several layers inside the stage | ||
| // Rect and Circle are not DOM elements. It is 2d shapes on canvas | ||
| <Stage width={window.innerWidth} height={window.innerHeight}> | ||
| <Layer> | ||
| <Rect width={50} height={50} fill="red" /> | ||
| <Circle x={200} y={200} stroke="black" radius={50} /> | ||
| </Layer> | ||
| <Stage> | ||
| ); | ||
| } | ||
| ``` | ||
|
|
||
| ## Demo | ||
|
|
||
| <iframe src="https://codesandbox.io/embed/github/konvajs/site/tree/master/react-demos/basic_demo?hidenavigation=1&view=split&fontsize=10" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe> | ||
|
|
||
| <div id="intro-btn-wrap" style="margin-bottom: 50px"><a id="intro-btn" href="/docs/react/index.html">Get Started</a></div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,57 @@ | ||
| layout: react_page | ||
| title: react-konva - declarative canvas components for React | ||
| description: react-konva is react library for canvas for drawings shapes, animations, node nesting, layering, filtering, event handling, drag and drop and much more. | ||
| comments: false | ||
| --- | ||
| .intro-wrap | ||
|
|
||
| .outer | ||
|
|
||
| h2.intro-features Features | ||
|
|
||
| .features | ||
| .feature | ||
| img(src="/assets/features/undraw_abstract_x68e.svg") | ||
| h3.desc Object Oriented API with support of many shapes | ||
| .feature | ||
| img(src="/assets/features/undraw_file_sync_ot38.svg") | ||
| h3.desc Support for desktop and mobile devices | ||
|
|
||
| .feature | ||
| img(src="/assets/features/undraw_animating_1rgh.svg") | ||
| h3.desc Animations and tweens | ||
|
|
||
| .feature | ||
| img(src="/assets/features/undraw_fitting_pieces_cli3.svg") | ||
| h3.desc Node nesting, grouping and event bubbling | ||
|
|
||
| .feature | ||
| img(src="/assets/features/undraw_image_viewer_wxce.svg") | ||
| h3.desc Hight quality exports into data URLs, image data, or image objects | ||
|
|
||
| .feature | ||
| img(src="/assets/features/undraw_options_2fvi.svg") | ||
| h3.desc Nice read-to-use filters | ||
|
|
||
| .feature | ||
| img(src="/assets/features/undraw_voice_interface_eckp.svg") | ||
| h3.desc Native integration with web frameworks such as React and Vue | ||
|
|
||
| .feature | ||
| img(src="/assets/features/undraw_drag_5i9w.svg") | ||
| h3.desc Built-in Drag&drop support | ||
|
|
||
| h2.intro-features Demo | ||
|
|
||
| iframe(src='https://codesandbox.io/embed/github/konvajs/site/tree/master/react-demos/basic_demo?hidenavigation=1&view=split&fontsize=10',style='width:100%; height:600px; box-shadow: 0 0 10px grey; border-radius: 4px; overflow:hidden;',sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin") | ||
|
|
||
|
|
||
|
|
||
| #intro-btn-wrap | ||
| a.add-app(href="https://github.com/konvajs/konva/issues/256") Do you want to add your app here? | ||
|
|
||
|
|
||
|
|
||
| .outer | ||
| #intro-btn-wrap | ||
| a#intro-btn(href="/docs/index.html") Get Started |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,7 +1,12 @@ | ||
| <% if (page.comments && config.disqus_shortname){ %> | ||
| <section id="comments"> | ||
| <section id="comments" style="margin-top: 50px;"> | ||
| <div id="disqus_thread"> | ||
| <noscript>Please enable JavaScript to view the <a href="//disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript> | ||
| <noscript | ||
| >Please enable JavaScript to view the | ||
| <a href="//disqus.com/?ref_noscript" | ||
| >comments powered by Disqus.</a | ||
| ></noscript | ||
| > | ||
| </div> | ||
| </section> | ||
| <% } %> | ||
| <% } %> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.