My thought about how to implement pencil

What pencil look like: See the demo: https://codepen.io/michaelsboost/pen/cnCAL . I just search whiteboard and it give me this one.

How to implement pencil ? Any irregular curve consists of several straight lines.

The data structure of Pencil

type PencilShape {
  x1: number,
  y1: number,
  x2: number,
  y2: number
}

type Pencil {
  box: {
    minX: number,
    minY: number,
    maxX: number,
    maxY: number
  },
  shape: PencilShape[],
}

PencilShape means the start point and end point. So Pencil.shape means a series of straight lines (A freely drawn curve) Pencil.box means the outline of box.

when user mousedown, we record the lastPoint (x1, y1), and when user mousemove, we get the current position (x2, y2) [x1, y1, x2, y2] is one of Pencil.shape. if user mousemove continue, we will get the new position: [x2, y2, x3, y3]. we need store it to the shape: [[x1, y1, x2, y2], [x2, y2, x3, y3]].The actual array is going to be very long, like:[[x1, y1, x2, y2], [x2, y2, x3, y3], [x3, y3, x4, y4].

When you actually save the shape, you'll find that there's a lot of duplication in the data store because the end of the last two arguments in the first array is the beginning of the second array.

we should consider the frequency of data collection, otherwise the array will be extremely large.

In addition, we need to calculate the size of the whole rectangle area.The best way to do this is to compare a point(x, y) when we save it and save the compare result into box.

rough-stuff / rough

My thought about how to implement pencil #135