Feature/paint stroke options - #8914
Conversation
*except for the line tool being able to change caps to round if you connect a line to an existing shape (e.g a rectangle with a part erased, which uses a butt cap) |
be20305 to
154c795
Compare
Quite so, an slightly inexplicably so :) |
pufferfish101007
left a comment
There was a problem hiding this comment.
Seems to work well with its intended use cases.
However, I would expect to be able to select the stroke options before drawing a shape (for instance while I have the rectangle or line tool selected, I might change the stroke colour before drawing, and would expect the visible stroke buttons to be useable).
Dark mode styling probably needs a bit of work - the text contrast is quite low and the buttons don't really match up with other buttons around them:
Looks good in light mode though.
Only a couple of very minor code comments and otherwise l;ooks great.
e1e5a81 to
421dac9
Compare
Yeah, I didn't want to overcomplicate this PR - but you are right - I've added support for this now too, but it will need some good testing! :) |
|
This is cool! Would it make sense to also add UI for dashed lines? https://paperjs.org/reference/style/#dasharray |
|
The new changes seem to work great, thank you! I've tested this out with the new round corners addon and it seems to work well which is good. Minor problems with compat with the boolean shape operations addon - which could perhaps be fixed in a followup PR? - are that combine & expand cause round joins to become mitered. Also re. name and description - could 'stroke' maybe be replaced with 'outline' if that is correct? That is probably more accessible to most scratchers. 'Corner' and 'end' might be more understandable that 'join' and 'cap', but again not sure if they're actually the same thing. Also a note explaining what a miter would probably be useful. |
|
Thanks for testing this and for the wording suggestions! I've updated the addon to use Scratch-facing terms. It's now called "Outline corners and ends", and the visible headings are "Corner" and "End". The icon tooltips explain the technical terms, including "Sharp corner (miter)" and "Flat end (butt)". I agree the boolean shape operations issue is best handled in a follow-up PR. Those operations create replacement paths, so they should preserve the original outline's corner and end styles when doing so. |
|
I have a very minor design suggestion: the added buttons might look better with no gap between them. 
This would make them more similar to other button groups in Scratch, such as the zoom buttons in the paint editor and the stage size buttons in the stage header. |
As you wish! |
@pufferfish101007 - Talking of follow up PR for the shaping tool - did you want one for inclusion in this coming release if it's small or a followup release - I can look into fixing it sooner than later if that's what you meant :) In case you want it - here it is: #9149 |
Changes
Adds a new addon paint-stroke-options that injects stroke join and cap controls into the outline colour picker in the vector costume editor.
Corner: Miter or Round stroke join
Cap: Butt, Round, or Square stroke cap
Controls appear at the bottom of the stroke colour popup, match the Scratch colour picker visual style, and highlight the currently active option. Changes are applied to all selected items and trigger an undo snapshot.
Reason for changes
Paper.js exposes strokeJoin and strokeCap on path items but Scratch's paint editor provides no UI to change them. This addon fills that gap for users who want more control over how strokes render on vector shapes, particularly useful for custom block designs and illustrations.
Tests
Tested in Chrome 146. Verified:
Controls appear only in the stroke (Outline) popup, not the fill popup
Clicking each option applies immediately to selected items
Active option is highlighted correctly
Undo works after applying a change
Addon enable/disable works without page reload