html5 canvas圖形處理的封裝：Displayer.js

displayer.js是一個小型的html5 canvas圖形處理的封裝。它本是rocui插件系統的一部分（rocui還未發布，它是一個完整的web ui處理框架，但是它將在不久之后完整發布）但是它現在仍可以作為jquery插件而是用。

它參照flash顯示對象（sprite）而設計，支持局部坐標系統，以及坐標系統間的轉換，這樣便可以進行精確的圖形處理。同時支持局部圖形數據的獲取（同域條件下），以及本地保存。它支持事件系統，可以為任何displayer對象添加事件，而且保證事件觸發的范圍精確。

如何使用

1. 創建畫布

   displayer.js的畫布是與dom進行綁定的，然后displayer.js會將canvas渲染到指定的dom內部。

   var scene = jquery("").scene(option);

2. 創建顯示對象

   $.sprite(option);

3. 繪制顯示對象

   scene.appendChild(a).appendChild(b);

顯示對象option

{
    name:"",
    x:0,
    y:0,
    width:100,
    height:100,
    alpha:10,
    background : {
        color: "none",//16進字顏色值
        image: null,//圖片url
        imageType: "fit"http://[repeat center fit fill]填充方式
    },
    border : {
        width: 0,
        color: "none"http://16進字顏色值
    },
    shadow : {
        color: "none",//16進字顏色值
        offsetX: 0,//水平偏移
        offsetY: 0,//垂直偏移
        blur: 20//陰影范圍
    },
    mousedown:function(e){},
    mousemove:function(e){},
    mouseup:function(e){},
    click:function(e){},
}

顯示對象方法

clean()

清除顯示對象內容。

draw()

重繪顯示對象

background(a)

設置或獲取顯示對象背景設置

backgroundColor(a)

設置或獲取顯示對象背景顏色

backgroundImage(a)

設置或獲取顯示對象背景圖片

backgroundImageType(a)

設置或獲取顯示對象背景填充方式

border(a)

設置或獲取顯示對象邊框

borderWidth(a)

設置或獲取顯示對象邊框寬度

borderColor(a)

設置或獲取顯示對象邊框顏色

shadow(a)

設置或獲取顯示對象陰影

shadowColor(a)

設置或獲取顯示對象陰影顏色

shadowOffsetX(a)

設置或獲取顯示對象陰影水平偏移量

shadowOffsetY(a)

設置或獲取顯示對象陰影垂直偏移量

shadowBlur(a)

設置或獲取顯示對象陰影范圍

name(a)

設置或獲取顯示對象id

x(a)

設置或獲取顯示對象x坐標

y(a)

設置或獲取顯示對象y坐標。

width(a)

設置或獲取顯示對象寬

height(a)

設置或獲取顯示對象高

alpha(a)

設置或獲取顯示對象透明度

root()

scene對象

parent()

父顯示對象

children()

所有子顯示對象

topDepth()

顯示對象深度

appendChild(a)

添加子顯示對象

rotate(a)

旋轉（0-360）

rotatePoint(x,y)

設置顯示對象旋轉點

getImageDate(x,y,width,height)

獲取顯示指定范圍的數據uri

getImageBlob(x,y,width,height)

獲取顯示指定范圍的數據二進制

checkPointIn(x,y)

判斷點是否在顯示對象范圍內

事件對象屬性和方法

x

本地坐標系x坐標

y

本地坐標系y坐標

sceneX

全局坐標系x坐標

sceneY

全局坐標系y坐標

target

事件的目標對象

currentTarget

事件執行的當前對象

eventType

事件類型

stopPropagation()

停止事件傳播

getSpriteLocal(sprite)

將坐標轉為sprite坐標系本地坐標

項目主頁：http://www.baiduhome.net/lib/view/home/1391826956129