Skip to content

Added roundRect support #41

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Added roundRect support #41

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 19 additions & 2 deletions src/Canvas.elm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ module Canvas exposing
, Renderable, Point
, clear, shapes, text, texture, group
, Shape
, rect, circle, arc, path
, rect, roundRect, circle, arc, path
, PathSegment, arcTo, bezierCurveTo, lineTo, moveTo, quadraticCurveTo
)

Expand Down Expand Up @@ -36,7 +36,7 @@ a `Shape`, which you can feed to `shapes` to get something on the screen.

Here are the different functions that produce shapes that we can draw.

@docs rect, circle, arc, path
@docs rect, roundRect, circle, arc, path


## Paths
Expand Down Expand Up @@ -324,6 +324,20 @@ rect pos width height =
Rect pos width height


{-| Creates the shape of a rounded rectangle.

It takes the position of the top left corner, the width, the height and a list specifying
the radii of the circular arc to be used for the corners of the rectangle. The list must
contain between 1 and 4 positive numbers.

You can find more info on this [page](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/roundRect).

-}
roundRect : Point -> Float -> Float -> List Float -> Shape
roundRect pos width height radii =
RoundRect pos width height radii


{-| Creates a circle. It takes the position of the center of the circle, and the
radius of it.

Expand Down Expand Up @@ -616,6 +630,9 @@ renderShape shape cmds =
Rect ( x, y ) w h ->
CE.rect x y w h :: CE.moveTo x y :: cmds

RoundRect ( x, y ) w h r ->
CE.roundRect x y w h r :: CE.moveTo x y :: cmds

Circle ( x, y ) r ->
CE.circle x y r :: CE.moveTo (x + r) y :: cmds

Expand Down
1 change: 1 addition & 0 deletions src/Canvas/Internal/Canvas.elm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@ type alias Text =

type Shape
= Rect Point Float Float
| RoundRect Point Float Float (List Float)
| Circle Point Float
| Path Point (List PathSegment)
| Arc Point Float Float Float Bool
Expand Down
11 changes: 10 additions & 1 deletion src/Canvas/Internal/CustomElementJsonApi.elm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ module Canvas.Internal.CustomElementJsonApi exposing
, globalAlpha, globalCompositeOperation, globalImageSmoothingEnabled, save, restore
, rotate, scale, translate, transform, setTransform
, drawImage
, Command, commands
, Command, commands, roundRect
)

{-| This module exposes a low level drawing API to work with the DOM canvas.
Expand Down Expand Up @@ -674,6 +674,15 @@ rect x y w h =
fn "rect" [ float x, float y, float w, float h ]


{-| Adds a rounded rectangle to the current path.
The radii of the corners can be specified in much the same way as the CSS border-radius property.
[MDN docs](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/roundRect)
-}
roundRect : Float -> Float -> Float -> Float -> List Float -> Command
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could it be considered to use the type system for specifying the points? We lose the CSS flexibility in this case, but gain some more clarity, I think. For example: type alias Radii = { topLeft : Float, topRight : Float, bottomLeft : Float, bottomRight : Float }.

Optionally, some helpers could be provided, like : allCorners : Float -> Radii.

Or, make Radii a sum type:

type Radii
    = AllCorners Float
    | DiagonalCorners { topLeft : Float, bottomRight : Float }
    | FourCornersByThreeValues  { topLeft : Float, topRightBottomLeft : Float, bottomRight : Float }
    | FourCorners { topLeft : Float, topRight : Float, bottomLeft : Float, bottomRight : Float }
    
-- plus, some helpers as well

Both variants could always translate to four-valued list.

roundRect x y w h r =
fn "roundRect" [ float x, float y, float w, float h, Encode.list float r ]


{-| Restores the most recently saved canvas state by popping the top entry in
the drawing state stack. If there is no saved state, this method does nothing.
[MDN docs](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/restore)
Expand Down