Developer Wiki

In-depth guide for developers to create stencils and templates

Drawing Sketchy Lines


Users may want to work with sketchy shapes to create draft notes. So Pencil supports drawing sketchy line besides providing a stencil contains many basic sketchy shapes.

This tutorial will show how to create a simple sketchy shape from sketchy lines.



<Shape id="sketchyShape" displayName="Sketchy Shape" icon="Icons/sketchyShape.png">
  <Properties>
    ...
  </Properties>
  <Behaviors>
    <For ref="text">
      <TextContent>
        new PlainText(Math.round($box.w) +" x "+Math.round($box.h))
      </TextContent>
      <Font>$textFont</Font>
      <Color>$textColor</Color>
      <BoxFit>
        <Arg>Bound.fromBox($box)</Arg>
        <Arg>$textAlign</Arg>
      </BoxFit>
    </For>
    <For ref="line1">
      <D>
        [
        sk(0, 0, $box.w, 0),
        skTo($box.w, $box.h),
        skTo(0, $box.h),
        skTo(0, 0),
        z,
        sk(3, 3, $box.w - 3, $box.h - 3),
        sk(3, $box.h - 3, $box.w - 3, 3),
        ]
      </D>
      <Fill>$fillColor</Fill>
      <StrokeColor>$strokeColor</StrokeColor>
      <StrokeStyle>$strokeStyle</StrokeStyle>
    </For>
    <For ref="mask">
      <Fill>$fillColor</Fill>
      <D>
        var length = $box.w - 5;
        var height = $textFont.getPixelHeight();
        [
        M($box.w/2 - length / 2, $box.h/2 - height / 2),
        L($box.w/2 + length / 2, $box.h/2 - height / 2),
        L($box.w/2 + length / 2, $box.h/2 + height / 2),
        L($box.w/2 - length / 2, $box.h/2 + height / 2),
        z
        ]
      </D>
    </For>
  </Behaviors>
  <p:Content xmlns:p="http://www.evolus.vn/Namespace/Pencil"
             xmlns="http://www.w3.org/2000/svg">
    <path id="line1" style="stroke-linejoin: round;" />
    <path id="mask" style="fill:white;stroke:none" />
    <text id="text" />
  </p:Content>
</Shape>

In fact, it is the same as drawing normal lines. Using sk(x, y), skTo(x, y) instead of M(x, y), L(x, y) to create sketchy shapes.