Create Complex Pen in Draw - qtxie/red GitHub Wiki

Create Complex Pen in Draw

Those pens can be used to stroke or fill a shape.

(Note: Parameters in angle brackets are optional.)

Linear Gradient

The linear gradient will be painted along a line defined by start point and end point.

pen/fill-pen linear color-1 <offset> color-2 <offset> ... color-n <offset> <start-pos> <end-pos> <spreadMethod>

color-1 <offset> .. color-n <offset>: gradient stops. color-1 is the `start color`, color-n is the `end color`.

<start-pos>: start point
<end-pos>: end point. 
Those two attributes defines a line where the gradient paints along. If the attribute is not specified,
the gradient will be paint along a horizontal line inside the shape currently drawing.

<spreadMethod>: pad, repeat, reflect
Note: currently 'pad' is same as 'repeat' for Windows platform (not supported by GDI+)

Example: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Gradients

Radial Gradient

The radial gradient will be painted from focal point to the edge of a circle defined by center point and radius. The start color will be painted in focal point and the end color will be painted in the edge of the circle.

pen/fill-pen radial color-1 <offset> color-2 <offset> ... color-n <offset> <center-pos radius> <focal-pos> <spreadMethod>

color-1 <offset> .. color-n <offset>: gradient stops. color-1 is the `start color`, color-n is the `end color`.

<center-pos radius>: center point and radius.
Those two attributes define a circle where the gradient paints inside. If the attribute is not specified, 
the gradient will be paint in the center of the shape currently drawing.

<focal-pos>: focal point. If the attribute not be specified, it's assumed to be at the same place as the center point.

<spreadMethod>: pad, repeat, reflect
Note: currently 'pad' is same as 'repeat' for Windows platform (not supported by GDI+)

radial gradient

Diamond Gradient

The diamond gradient will be painted from focal point to the edge of a rectangle defined by upper and lower. The start color will be painted in focal point and the end color will be painted in the edge of the circle.

pen/fill-pen diamond color-1 <offset> color-2 <offset> ... color-n <offset> <upper> <lower> <focal-pos> <spreadMethod>

color-1 <offset> .. color-n <offset>: gradient stops. color-1 is the `start color`, color-n is the `end color`.

<upper>: upper corner of rectangle.
<lower>: lower corner of rectangle
Those two attributes define a rectangle where the gradient paints inside. If the attribute is not specified, 
the gradient will be paint in the center of the shape currently drawing.

<focal-pos>: focal point. If the attribute not be specified, it's assumed to be at the same place as the center point.

<spreadMethod>: pad, repeat, reflect
Note: currently 'pad' is same as 'repeat' for Windows platform (not supported by GDI+)

Pattern

pen/fill-pen pattern size <crop-start> <crop-end> <mode> [draw-commands]

size         : size of internal image where [draw-commands] will be drawn (pair!)
<crop-start> : (optional, default: 0x0) upper corner for crop section within internal image (pair!)
<crop-end>   : (optional, default: <size>) lower corner for crop section within internal image (pair!)
<mode>       : (optional, default: tile ) tile mode. Can be one of following: tile, flip-x, flip-y, flip-xy, clamp
[draw-commands]  : block of draw commands to define the pattern

In some situations it is desired to crop the pattern starting from 1x1 due to anti-aliasing (same as for bitmap, see below).
It is possible to define a pattern recursively, using fill-pen/pen pattern again in <draw-commands>:
    view [base 300x300 draw [
        fill-pen pattern 100x100 [
            fill-pen linear 240.16.144 0.0 0.192.240 1.0 0x0 100x100
            pen off 
            box 0x0 100x100
            fill-pen pattern 8x8 [
                fill-pen black pen 32.32.32.0 line-width 4
                shape [
                    move -2x10 
                    line 10x-2 
                    move 10x6 
                    line 6x10 
                    move -2x2 
                    line 2x-2
                ]
            ]
            box 0x0 100x100
        ]
        box 0x0 300x300
    ]]

Bitmap

pen/fill-pen bitmap image <crop-start> <crop-end> <mode>

image        : image used for tiling (image!)
<crop-start> : (optional, default: 0x0) upper corner for crop section within image (pair!)
<crop-end>   : (optional, default: <image> size) lower corner for crop section within image (pair!)
<mode>       : (optional, default: tile ) tile mode. Can be one of following: tile, flip-x, flip-y, flip-xy, clamp

 In some situations it is desired to crop the bitmap image starting from 1x1 due to anti-aliasing:
     bmp: make image! 30x30
     draw bmp [line 0x0 29x29]
     view [base 100x100 draw [fill-pen bitmap bmp 1x1 box 0x0 99x99]]

Pen Transformation

When using above pens, we can perform some transformation on them:

rotate pen angle
rotate fill-pen angle

angle      : the angle in degrees (integer! float!)

scale pen scale-x scale-y
scale fill-pen scale-x scale-y

scale-x    : the scale amount in X (number!)
scale-y    : the scale amount in Y (number!)

translate pen offset
translate fill-pen offset

offset     : the translation amounts (pair!)

skew pen skew-x skew-y
skew fill-pen skew-x skew-y

skew-x   : skew along the x-axis in degrees (integer! float!)
skew-y   : skew along the y-axis in degrees (integer! float!)
Add a custom footer
⚠️ **GitHub.com Fallback** ⚠️