Comments (4)
Oh wow, it seems like the center is off and the background is showing through, weird!
With white background it is easier to see https://ellie-app.com/88GPvsYsQ5ya1
I also can't reproduce with just JS (https://jsbin.com/qujazixiqo/edit?js,output) so the library is doing something wrong π
from elm-canvas.
I've looked at the commands produced by that ellie example and they are
["moveTo 361,200", "moveTo 360,201", "moveTo 359,200"]
Which is very strange, the center seems to keep moving around π
from elm-canvas.
I think I've found what is happening.
For some reason, I did this (I'm not sure what I was trying to do):
Line 559 in 8dba3de
Where it seems to me that just
:: CE.moveTo x y
Is what it should do...
This got me thinking, that with the current arc shape you can't really do everything you could (see the mdn example 2).
Arc by moving to the center to be nice isn't really behaving as it should for fill. It is really a partial circle, more than an arc.
What do you think if we fixing Arc to not move to the center by default? That way we make arc behave like the JS version and enable creating more shapes.
For accomplishing your use case then you would have to move to the point manually though by using a path first, like this:
shapes
[ fill Color.red ]
[ path pos []
, arc pos radius { sides | startAngle = 0, endAngle = degrees 90 }
]
This would also be a breaking change but not change the API so I'm not sure how we handle that.
I would appreciate your thoughts.
from elm-canvas.
I've published 4.1.0 with the fixed arc
function. Before the starting point calculation was broken because it wasn't multiplying by the radius. Now arc
behaves like the primitive arc (see MDN).
I also added an example rendering pie slices to verify the behaviour and ensure your use case was doable with the library. See:
https://github.com/joakin/elm-canvas/blob/master/examples/PieChart.elm
And the live example https://chimeces.com/elm-canvas/pie-chart.html which for some reason github is refusing to show for me.
Hope this helps, let me know if you find any other isssues, and thank you for your help!
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
- High CPU load with many canvases HOT 7
- 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 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 elm-canvas.