How to make the edge of the block a circular arc

101 views
Skip to first unread message

lizzhh lizi

unread,
Jul 27, 2024, 1:44:43 AM7/27/24
to Blockly
I want to create a renderer that makes the blocks look like this, but I can't do it using various methods. How should I implement it?
I use Zelos themes and renderer
PixPin_2024-07-27_13-43-49.png

Aaron Dodson

unread,
Jul 31, 2024, 6:59:38 PM7/31/24
to Blockly
Hi,

You're on the right track with a custom renderer! Most likely you'll want to subclass the various Zelos renderer parts; in particular the Drawer class, which is mostly responsible for constructing the SVG path that defines the shape of the block. I'd experiment with the methods that include "right" in the name for drawing the rounded endcaps. For getting rid of the block notches, you may just be able to override NOTCH_WIDTH, NOTCH_HEIGHT, etc in the ConstantProvider; however, note that those are intended to provide a visual cue as to which blocks are able to connect to one another. Note that there's also a codelab on custom renderers which might be helpful to work through to get a bit of a conceptual understanding of how the system works.

- Aaron

lizzhh lizi

unread,
Aug 17, 2024, 4:15:51 AM8/17/24
to Blockly
I tried my best, but I couldn't. Can you help me write the code for this renderer

Beka Westberg

unread,
Aug 19, 2024, 12:02:25 PM8/19/24
to Blockly
Hello,

Could you give us some more details about what you tried and what went wrong? We can't write your renderer for you, but we can try to advise in places where you're stuck!

Hopefully with a bit more info we can get this figured out =)
--Beka

Reply all
Reply to author
Forward
0 new messages