2014-05-27

paper.js exercise : Line Bisection Test 2


操作流程:
  1. 畫面隨機顯示長度不等直線
  2. 受測者用滑鼠點選線段中點
Demo & Code

說明:
  • 一開始的想法是先產生一條直線 path,之後再用 symbol 來表示其他直線以增加效能.流程是先建立一條水平 path,用此 path 建立 symbol,place 到畫面中隨機 point,對此 symbol 水平 scale 隨機值、rotate 隨機值. 
  • 隨機出來的線段有可能不是我們要的位置,要依檢查花費的成本來依序檢查.
  • case 1 線段其端點有超出可視範圍:用其 bounds.x 來檢查.c
  • case 2 線段相交:paper.js 的 path 有提供 getIntersection 來取得兩 path 的交叉點.這時才發現 symbol 其 definition 是指到原本的 path,所以用 getIntersection 沒用,只好改成每一條線都是 path.
  • case 3 線段距離太近,例如兩條線幾乎平行,兩者間最短距離只有 1px,或是端點太近使得看起來像是連成一條線:這部分運算比較多,我是先檢查新產生線段的兩個端點與其他線段兩個端點看其距離是否少于某一數值,若有的話表示可能會有太近的情況,此時得進一步檢查線段兩端點與另一條線的最短距離是否太小.
  • 求點與線段最短距離的部分我是參考 Shortest distance between a point and a line segment 這篇.
  • closestDist function 可放到 checkDistance function 中以減少部份重複的運算和省下 getDistance.

沒有留言:

張貼留言