SVG DOM常用屬性和方法介紹 2

2021-09-12 05:25:22 字數 3030 閱讀 9266

—  style屬性、getstyle()方法

獲得某元素的樣式值,單獨使用沒有太大的意義,需要配後

合後續兩個方法一起使用。

使用舉例:style = someelement.style 或style = someelement.getstyle()

—  setproperty(style_name, value)方法

設定某元素的某樣式項的值。

使用舉例:someelement.style.setproperty("fill","red")

或someelement.getstyle().setproperty("fill","red")

—  getproperty(style_name)方法

獲得某元素的某樣式項的值。

使用舉例:someelement.style.getproperty("fill")

或someelement.getstyle().getproperty("fill")

例程12-13  svg動態獲得和設定樣式操作

例12-13中有兩個矩形,單擊上方的那個矩形,會彈出乙個訊息框顯示該矩形的填充顏色值「blue」;單擊另外乙個矩形,矩形的填充顏色和透明度分別變成紅色和不透明。在u處獲得了產生事件的這個矩形的樣式資訊,通過v處的「getpropertyvalue」方法可以獲得樣式資訊中你想要的某項的值,這裡我們獲取了「fill」屬性的值。我們要對另外乙個矩形產生改變樣式的效果,就需要使用w處的「setproperty」方法,傳入的引數是樣式專案名稱和要修改的目標值。無論是獲得還是設定樣式值的方法,都必須跟在「style」屬性或「getstyle」方法的後面才有效。

—  getbbox()方法

返回乙個svgrect矩形物件,這個矩形表示該svg元素的外包矩形。

使用舉例:someelement.getbbox()

例程12-14  在可視區域內移動一段文字

例程12-14比較複雜,希望大家耐心一些。例子想要實現的效果是拖動「svg」這段文字,在乙個矩形區域內移動,充分體現了svg的互動性。

圖形部分主要是乙個「text」元素和「path」元素,「path」元素幫助繪製乙個背景矩形區域,使得使用者在操作時無需

無須非常小心地單擊到文字才能觸發事件,只要滑鼠在這個矩形區域內進行操作即可,可以稱之為「熱區」。為了讓大家能夠清楚地看到這個區域又不影響使用,設定透明度為不完全透明。例子中的事件主要有三個:滑鼠鍵按下時(onmousedown)、滑鼠鍵彈起時(onmouseup)和滑鼠移動時(onmousemove),注意它們被放在了不同的地方,被啟用的範圍有所不同。

初始化程式初始化了上述的「熱區」,也就是包裹著「svg」這三個文字的最小矩形,使用「getbbox」方法獲得這個外包矩形框,然後使用路徑繪製這個封閉區域。

當滑鼠鍵按下時,y處的**被執行。首先判斷「cible」變數是不是「rectbox」,也就是判斷事件的**是不是在「svg」這幾個字的矩形區域內產生的,如果在這個區域外產生,則後續的效果都不會產生,也就無法拖動文字移動了。「ismove」這個變數就是用來控制是否能夠移動文字。此外,還記住了當前滑鼠的位置。

如果「ismove」變數是「true」的話,當滑鼠移動時,w處以下的**都會被執行。要使文字能夠移動,就要改變它們相對位置偏移屬性「x」和「y」。一旦文字的位置改變了,它的外包矩形區域也就改變了,我們要使用「getbbox」方法獲得這個外包矩形框,並且重繪一遍。所以,最後的效果就是這個外包矩形框和文字一起移動了。

滑鼠鍵彈起時,執行x處的**,「ismove」變數又被置回「false」,本次操作完成。

—  getctm()方法

返回乙個初始變換矩陣。

使用舉例:someelement.getbbox()

—  currentscale屬性、getcurrentscale()方法

獲得當前檢視的縮放比例。

使用舉例:someelement.currentscale

或someelement.getcurrentscale()

—  currenttranslate()屬性、getcurrenttranslate()方法

獲得當前檢視的平移距離的svgpoint物件。

使用舉例:someelement.currenttranslate

或someelement.getcurrenttranslate()

例程12-15  svg動態獲得當前座標系統資訊

這幾個函式很有用,通過它們可以獲得當前svg檢視的平移以及變形情況,這樣檢視內的其它

其他元素就有了參照值。

—  printnode(element)方法

將引數element節點解析為字串。

使用舉例:printnode(node)

—  par***ml(string)方法

將引數字串序列化成乙個節點物件。

使用舉例:par***ml(string , svgdoc)

例程12-16  xml和dom物件之間的序列化和逆序列化

圖12--2

3是單擊了黑色矩形後的顯示結果:

。圖12--3

4是單擊了紅色矩形後的顯示結果,在左上角出現了乙個小圓:。

圖12--2

3  printnode方法執行結果          圖12-

-3 

4  par***ml方法執行結果

這兩個方法剛好是相互對應的一組函式,這一組函式用於進行字串和dom節點之間的轉換。我們可以使用printnode()逆序列化指定節點元素,用於將當前svg文件中的node元素生成字串儲存為文字檔案或提交給遠端伺服器。相反地,我們也可以通過par***ml()將乙個字串用指定的文件物件解析為乙個節點(node)物件;在adobo svg viewer環境下可以不指定document物件,系統會預設使用當前svg文件的document物件解析字串,所以在v處的「svgdoc」可以替換成「document」關鍵字。

例程12-16中,u 處**就是把這個節點轉換成乙個字串,字串內容就是這個節點的內容,如圖12--2

3所示。

v 處的**把事先定義後的字串內容(字串內容是合法的符合svg語法的語句)通過解析後成為乙個dom物件的節點,並且新增到dom物件中,使之能夠顯示出來。

程序的方法和屬性介紹

p.start 啟動程序,並呼叫該子程序中的p.run p.run 程序啟動時執行的方法,正是它去呼叫 target 指定的函式,我們自定義類的類中一定要實現該方法 p.terminate 強制終止程序 p,不會進行任何清理操作,如果 p 建立了子程序,該子程序就成了殭屍程序,使用該方法需要特別小心...

OLE 常用方法和屬性

2.給sheet重新命名。call method of sheetname name sheetname 4.設定 的顯示模式。set property of visible 1.前台執行。為0時表示為後台執行。5.建立workbook.call method of excel workbooks ...

RelativeLayout常用屬性介紹

下面介紹一下relativelayout用到的一些重要的屬性 第一類 屬性值為true或false android layout centerhrizontal 水平居中 android layout centervertical 垂直居中 android layout centerinparent...