Comments (5)
Use. You can use "ref" and "refs" to get access to Konva.Node
instance. And then you need to find the right moment for shape caching and it really depend your specific case.
Demo: http://jsbin.com/qofiwo/4/edit?js,output
from react-konva.
thank you!
from react-konva.
Hi! Very strange cache, @lavrton. When I changed count of texts to 1000, I saw 15 fps at Stats. Although I checked use cache, I saw the same 15 fps at Stats. Are you sure that cache work fine in react-konva realization? It's really important question for me, because I have large map 482250x120250 and I have about 4000 objects on map, when I try dragging or scale it I have about 10-20 fps. It's realy few. In the future at this map will be about 30000 object and I scared about performance that I will have. Can you recomend best way for it, or may be i must change 'react-konva' to simple konva library, because on this example with cache all works fine with count 20000k of objects
https://jsfiddle.net/513c8s5d/2/
from react-konva.
@lavrton can you make a demo about cache usage on react-konva? I still don't get how to do it?
from react-konva.
@hsluoyz use ref
(https://reactjs.org/docs/refs-and-the-dom.html) to get access to Konva node. Then call node.cache()
.
from react-konva.
Related Issues (20)
- How to achieve a layered separation between children of the same group? HOT 9
- Uncaught TypeError: getImage.crop is not a function
- Shapes with opacity do not correctly apply layer pixelRatio and can appear blurry on zoom in HOT 4
- NextJS: Module not found: Can't resolve 'canvas' HOT 2
- Issue with RTL Text
- Facing the issue now with Next.js 14: HOT 5
- OnTouchStart does not contain touches HOT 1
- getRelativePointerPosition has an offset on x when going fullscreen
- Asynchronous drawing will exceed the cropping area HOT 4
- Free drawing performance HOT 6
- Transformer is not reusable HOT 2
- Coordinates not working correctly after zoom in/out or drag of stage HOT 1
- If I want to erase only the lines drawn with a pen, how can I do that? HOT 2
- Rendering <Context.Consumer.Provider> is not supported and will be removed in a future major release. HOT 1
- Arrow Drag and Transform using anchors not working HOT 4
- load data to stage HOT 1
- Positioning issue with transformer using keepRatio prop set to false HOT 1
- Breaking changes in React experimental branch
- TypeScript : `'cornerRadius'` does not exist on type `Shape<RectConfig>` HOT 4
- Trouble with Drag-and-Drop on Mobile Devices in React (with react-konva) HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-konva.