2014年10月11日 星期六

Paper.js : The Swiss Army Knife of Vector Graphics Scripting



    Frontend的發展總是迅速,一堆超酷的Framework、Library總覺得永遠學不完;今天要介紹的Paper.JS大概又是讓我讚嘆已久的Library;還記得兩年前的HackDay,那時候的作品為了要呈現夢幻的感覺,用了Box2Djs及Canvas湊出了泡泡漂移的感覺,那時候寫起來特別吃力,因為Box2D的官方文件很簡陋,而且對於Html的Support也很粗淺,沒辦法它只是負責運算物理特效,所以Html的Event全部都要自己來!

今天看到了Paper.js的範例CandyCrash,有種相見恨晚的感覺,Framework的完整性超高,除了沒有物理運算以外,但呈現的效果已經比當初好的太多,而且可以有更多的延展性。






Brackets : a IDE for JavaScript, HTML and CSS



  今天在掃Github Trend時發現了Brackets,由Adobe提供的Open Source Project,相關推薦文在這

對開發者而言有幾點很棒的好處讓我也想使用它:

1. Auto Refresh : 裡面叫做Live Preview,也就是以後不用狂按Save-Reload,還可以安裝Static Preview的套件,就可以迅速架設一個Local的網站供其他人測試

2. 完整的文件提示 : 隨時按Cmd+K就可以看Html及Css屬性的文件

3. Color Picker 

4. Image Preview
...

看來最近如果想玩Frontend的東西都會用它了吧!




Canvas coordinate system

    近加新功能的時,碰到一個在Canvas上座標系統認知上有所不同的地方;一般我們會用 Canvas.drawBitmap(Bitmap, 10, 10, Paint)把一張圖畫在(0,0)的位置,當然這個(0,0)不預期是整個device的(0,0),而是根據View最後被擺放的位置,例如某View被Layout在(100, 100),而Canvas.drawBitmap(Bitmap, 10, 10, Paint)則會畫在螢幕(110,110)的地方。

到目前為止都沒有錯誤,但如果translation的方式是用Matrix,而你的code可能會變成

Matrix matrix = new Matrix();
matrix.postTranslate(10, 10);
canvas.setMatrix(matrix);
Canvas.drawBitmap(Bitmap, matrix, Paint);

此時畫出來的結果就還是會在(10, 10)。原本猜想是忘記apply原本canvas的matrix所致,所以改成

Matrix matrix = new Matrix(canvas.getMatrix());
matrix.postTranslate(10, 10);
canvas.setMatrix(matrix);
Canvas.drawBitmap(Bitmap, matrix, Paint);

結果還是(10,10)!結果不小心喵到有Method叫Canvas.concat()。後來改成:

Matrix matrix = new Matrix(canvas.getMatrix());
matrix.postTranslate(10, 10);
canvas.concat(matrix);
Canvas.drawBitmap(Bitmap, matrix, Paint);

最後就成功的畫在(110,110)的位置。百思不得其解的是:

Matrix matrix = new Matrix(canvas.getMatrix()) 應該會等於 canvas.concat(matrix)

因為都會Apply原本Canvas裡面的Matrix參數,於是乎就去看了一下底層的source code

 public void concat(Matrix matrix) {
     native_concat(matrix.native_instance);
 }

 public void setMatrix(Matrix matrix) {
          
matrix == null ? 0 : matrix.native_instance);
 }

看來還要追到NDK那層,不過看起來兩種設定Matrix的方式有些出入,就等未來有空再往底層看了。