Comments (7)
I experimented a bit, changed set cmds(values)
in elm-canvas.js to this:
set cmds(values) {
if (this.commands.length !== values.length){
this.commands = values;
this.render();
} else if (
values.some((cmd,i)=>{
const _cmd = this.commands[i]
if (cmd.type!==_cmd.type) {return true}
if (cmd.name!==_cmd.name) {return true}
if (cmd.type==='function'){
if (cmd.args.length!==_cmd.args.length) {return true}
for (let a = 0, l = cmd.args.length; a<l;a++)
if (cmd.args[a]!==_cmd.args[a]) {return true}
} else if (cmd.type==='field') {
if (cmd.value!==_cmd.value) {return true}
}
})
) {
this.commands = values;
this.render();
}
}
and removed this.commands = [];
from render()
with 80+ canvases on page mouseover-changes reduced cpu load from ~26% to ~12% =D
comparing draw commands are ~2 times easier to do!
from elm-canvas.
I guess this is unnecessary with Html.Layz
and Html.Keyed
?
from elm-canvas.
When I get ~100 canvases on page and change something on one of them, all canvases are redrawn.
Wow. Regardless of the rest, why would you want to have 100 canvas at the same time on the page? π
If this change is something intensive as mousemove, the CPU load jumps and stays high until I stop changing the canvas.
Is it possible to not redraw canvases for which draw commands did not change? Will commands diffing inset cmds (values)
be less CPU-intensive than redrawing?
To avoid redrawing elements and this canvas as well use Html.Lazy
and Html.Keyed
like you said below.
I wouldn't recommend patching the JS library with random things, the design of it is very coupled to the Elm library π
from elm-canvas.
I'm working on a service for photo printing shops, customers load their photos online and crop them as needed, they can load tens and sometimes hundreds of pictures, and they can not go cropping them one by one, they need to see them all at once, see the cropping for standard print sizes and be able to correct them with minimal effort =)
from elm-canvas.
Html.Lazy
and Html.Keyed
works great! But canvas get redrawn even if nothing drawn to it changed when just style "cursor"
is changed based on mousemove position.
from elm-canvas.
I'm working on a service for photo printing shops, customers load their photos online and crop them as needed, they can load tens and sometimes hundreds of pictures, and they can not go cropping them one by one, they need to see them all at once, see the cropping for standard print sizes and be able to correct them with minimal effort =)
You do you but maybe using DOM images and an SVG rectangle on top to show the crop, or a wrapping div with overflow hidden is what I would do and I would crop things only once in the backend when submitting the pictures and the cropping rectangle as data. But anyways there are many ways to do this π
Html.Lazy
andHtml.Keyed
works great! But canvas get redrawn even if nothing drawn to it changed when juststyle "cursor"
is changed based on mousemove position.
If that is something that is breaking your optimization, try wrapping the lazy thing with a dom node that has the style cursor and inside it you have the Html.lazy with the canvas, that way the canvas parameters don't change because the cursor logic is outside (and I think cursor applies to nested DOM elements).
from elm-canvas.
img + svg or couple of divs with hidden overflow is probably a better way. For three or so days I've been working on implementing it in the form of a customElement, but I guess I need to study elm and it's js interop more to finish it. I'm planing to study elm-canvas and how it sends render comands to the custromElement (the only way to send info to customElement from elm that I know is through element attributes, and I didn't find it in elm-canvas=))
Thant's a good idea to wrap canvas with cursor style dedicated element! Thanks you! I'll try it!=D
from elm-canvas.
Related Issues (20)
- Improve transform docs
- Improve arc docs
- Document the canvas coordinate system
- Add making textures from DOM images HOT 1
- Canvases get blank on deleting one of them from a List HOT 2
- DOM images textures break in Firefox HOT 6
- Sampling Canvas Data (getImageData) HOT 3
- Text Color Support HOT 1
- Use `Result` rather than `Maybe` for texture loading HOT 1
- Use elm-geometry types? HOT 1
- Support for "groups" or similar batching of settings to multiple `Renderable` HOT 4
- Runtime crash with `arc` function and negative radius
- Regression: text without fill or stroke is rendered with both fill and stroke
- Not working HOT 3
- Unexpected scene HOT 1
- Question about filter HOT 1
- Please support `roundRect` HOT 2
- Margin bug:Β canvas and elm-canvas don't share the same height HOT 4
- closePath operation
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 elm-canvas.