Pencil Project

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.