getters for coordinates the contours for landmarks and draw contours

examples/views/faceLandmarks.html

@@ -23,21 +23,36 @@
           <div id="selectList"></div>
         </div>
       </div>
+      <p>
+        <input type="checkbox" id="drawLinesCheckbox" checked="checked" onchange="onChangeDrawLines(event)" />
+        <label for="drawLinesCheckbox">Draw Lines</label>
+      </p>
     </div>
   </div>
 
   <script>
     let net
+    let drawLines = true
+    let landmarks
+    let currentImg
 
-    async function onSelectionChanged(uri) {
-      const imgBuf = await fetchImage(uri)
-      const img = await faceapi.bufferToImage(imgBuf)
-      const canvas = faceapi.createCanvasFromMedia(img)
+    function onChangeDrawLines(e) {
+      drawLines = $(e.target).prop('checked')
+      redraw()
+    }
+
+    function redraw() {
+      const canvas = faceapi.createCanvasFromMedia(currentImg)
       $('#faceContainer').empty()
       $('#faceContainer').append(canvas)
+      faceapi.drawLandmarks(canvas, landmarks, { lineWidth: drawLines ? 2 : 4, drawLines })
+    }
 
-      const landmarks = await net.detectLandmarks(canvas)
-      faceapi.drawLandmarks(canvas, landmarks, { lineWidth: 4 })
+    async function onSelectionChanged(uri) {
+      const imgBuf = await fetchImage(uri)
+      currentImg = await faceapi.bufferToImage(imgBuf)
+      landmarks = await net.detectLandmarks(currentImg)
+      redraw()
     }
 
     async function run() {

src/faceLandmarkNet/FaceLandmarks.ts

@@ -28,6 +28,34 @@ export class FaceLandmarks {
     )
   }
 
+  public getJawOutline() {
+    return this._faceLandmarks.slice(0, 17)
+  }
+
+  public getLeftEyeBrow() {
+    return this._faceLandmarks.slice(17, 22)
+  }
+
+  public getRightEyeBrow() {
+    return this._faceLandmarks.slice(22, 27)
+  }
+
+  public getNose() {
+    return this._faceLandmarks.slice(27, 36)
+  }
+
+  public getLeftEye() {
+    return this._faceLandmarks.slice(36, 42)
+  }
+
+  public getRightEye() {
+    return this._faceLandmarks.slice(42, 48)
+  }
+
+  public getMouth() {
+    return this._faceLandmarks.slice(48, 68)
+  }
+
   public forSize(width: number, height: number): FaceLandmarks {
     return new FaceLandmarks(this.getRelativePositions(), { width, height })
   }

src/utils.ts

 import { FaceDetection } from './faceDetectionNet/FaceDetection';
 import { FaceLandmarks } from './faceLandmarkNet/FaceLandmarks';
 import { Dimensions, DrawBoxOptions, DrawLandmarksOptions, DrawOptions, DrawTextOptions } from './types';
+import { Point } from './Point';
 
 export function isFloat(num: number) {
   return num % 1 !== 0
@@ -163,6 +164,33 @@ export function drawDetection(
   })
 }
 
+function drawContour(
+  ctx: CanvasRenderingContext2D,
+  points: Point[],
+  isClosed: boolean = false
+) {
+  ctx.beginPath()
+
+  points.slice(1).forEach(({ x, y }, prevIdx) => {
+    const from = points[prevIdx]
+    ctx.moveTo(from.x, from.y)
+    ctx.lineTo(x, y)
+  })
+
+  if (isClosed) {
+    const from = points[points.length - 1]
+    const to = points[0]
+    if (!from || !to) {
+      return
+    }
+
+    ctx.moveTo(from.x, from.y)
+    ctx.lineTo(to.x, to.y)
+  }
+
+  ctx.stroke()
+}
+
 export function drawLandmarks(
   canvasArg: string | HTMLCanvasElement,
   faceLandmarks: FaceLandmarks,
@@ -181,8 +209,23 @@ export function drawLandmarks(
     const { drawLines } = Object.assign({ drawLines: false }, (options || {}))
 
     const ctx = getContext2dOrThrow(canvas)
-    const { lineWidth,color } = drawOptions
-    ctx.fillStyle = color
+    const { lineWidth, color } = drawOptions
+
+    if (drawLines) {
+      ctx.strokeStyle = color
+      ctx.lineWidth = lineWidth
+      drawContour(ctx, faceLandmarks.getJawOutline())
+      drawContour(ctx, faceLandmarks.getLeftEyeBrow())
+      drawContour(ctx, faceLandmarks.getRightEyeBrow())
+      drawContour(ctx, faceLandmarks.getNose())
+      drawContour(ctx, faceLandmarks.getLeftEye(), true)
+      drawContour(ctx, faceLandmarks.getRightEye(), true)
+      drawContour(ctx, faceLandmarks.getMouth(), true)
+      return
+    }
+
+    // else draw points
     const ptOffset = lineWidth / 2
+    ctx.fillStyle = color
     faceLandmarks.getPositions().forEach(pt => ctx.fillRect(pt.x - ptOffset, pt.y - ptOffset, lineWidth, lineWidth))
 }
\ No newline at end of file