By

文章目錄

canvas的事件相關的部份、一直以來都是我心中永遠的痛~ (←明明就還很嫩、還在永遠些啥~ XDDD) 我不太喜歡目前自己
用來監聽canvas上、觸發圖形事件的方法。就~~其實很好用啦~可是、就彆扭咩~(扭扭扭)

其實…這個部份~某部份還在實驗~(大卡關阿~ Q ^Q) 然後、這個想法，在還沒有看到別人實做出來的時候，一直有個疑問，
不知道這樣的想法、會不會很耗資源，可是、又很懶的弄~然後、在這遊戲引擎如雨後春筍般冒出來的情況下~挖了一些出來
研究了一下。enchant、entityjs、

easelJs、還有最近好像還蠻多人提起的
three.js (←目前腦海有印象的就這幾個啦~很像還有不少捏)也去挖到了之前
google doodle的機器人的
source code

很認真的翻了很久~眼睛都看花了~ Q ^Q 在好心的Bingo的指引下、發現了EaselJS、其實
不是我迷有看過它~ XDDD 是…我那時候翻了太多、把它忘記了~ XDDD

就這樣…我就邁入了~不歸路… Q 口Q 真的~我覺得我現在好糟糕…一定有XX強迫症了~沒救了~哭…。這個系列、將介紹我在canvas
上的心路歷程…. Q ^Q 之一。

好~趕快進入正題…XDDDDD 前言真的太長了呢~

雖然、canvas是個html的tag、也可以觸發事件，不過…它就跟一般的html元素一樣，並沒有辦法去觸發畫在canvas上面的
特定內容，嗯嗯嗯…就canvas這個字面上的意思來看，就是『畫布』咩~畫布…當然是屬於靜態的…畫上去就結束了~。

所以、為了達成大家的願望…其實canvas有個method就是
isPointInPath 其實…可以拿來用啦~雖然它有幾個
堪稱致命的小瑕疵：

  • 最致命的當然就是…為了兼容不支援canvas各家瀏覽器(其實就是那一個~ Q ^Q)、不得不使用像是
    excanvas、fxCanvas這類的~很像還有幾個
    可是我也忘記名字了…想不起來~ XDD 可是、不管這些製作的多摸的優良~總是會有一些功能還沒有被實做出來…
    很光榮的isPointInPath名列其中~ Q 口Q isPointInPath掰掰~(揮揮手)

  • 接下來另一個致命的就是…請注意它的名字isPointInPath，我知道…大家一定都迷有注意到~ 唔、好吧~大多數的人類
    應該是迷有注意到這件事isPointInPath。是的，這個方法是去判斷一個點有沒有 in Path。那…然後呢~ Q 口Q 讓
    人傷心的事情就是在這裡發生了。在canvas裡面，嗯 我想也許可以這摸說啦~也許…這部份是屬於我個人的理解歐~我沒有
    仔細的去看相關的內容，有問題就…(搔搔臉) 就是那樣~(好~~~回正題)

    • code A 
      ctx.beginPath();
      ctx.moveTo(x1, y1);
      ctx.lineTo(x2, y2);
      ctx.lineTo(x3, y3);
  ctx.closePath();
  ctx.fill();
    • code B 
      ctx.beginPath();
      ctx.moveTo(x1, y1);
      ctx.lineTo(x2, y2);
      ctx.lineTo(x3, y3);
  ctx.stroke();

    上面那兩段就差在closePath，然後、有close的那個…會成為一個封閉圖形…阿~迷有錯…所以、isPointInPath在
    第一個會有作用、第二個就一點用都沒有了~它用在polyline上、就算你on在線上…也都會給你回傳false的…也~就是說
    isPointInPath只能用在封閉圖形，其~~~實也不是不能用在polyline上啦~只是、很麻煩捏~ = “””= 我不想把自己搞得很
    頭大，excanvas那類的…又不支援~ XDDDD 就算算囉~

基於以上兩種理由…canvas原生的methodisPointInPath掰~！！

好~因為…我累了~ = . .= 所以，這篇就先到這裡~ XDDDD isPointInPath 到此告一段落。

To Be Continued……

文章目錄