摘要:使用類來顯示文本字體和顏色大小和文本的外觀風格被指定。為了換行的情況發生,屬性不能為無,必須有一些限制寬窄文本塊默認文本塊不換行剪裁文本塊換行文本塊清理邊距對齊方式屬性指定的尺寸內繪制文字點排列方式。注驗證稍后完善。
使用TextBlocks類來顯示文本.
字體和顏色大小和文本的外觀風格被指定TextBlock.font。值可以是任何CSS字體符串。
文本顏色使用TextBlock.stroke。值可以是任何的CSS顏色字符串。默認情況下,顏色為“黑”。
您也可以指定背景:GraphObject.background。默認為無顏色,這會導致一個透明背景。背景總是矩形。
這些簡單的演示,創建了文本塊,并將其添加到圖中
diagram.add(G( go.Part, "Horizontal", G( go.TextBlock, { text: "文本塊" } ), G( go.TextBlock, { text: "文本塊顏色", stroke: "#492" } ), G( go.TextBlock, { text: "文本塊背景", background: "#492" } ), G( go.TextBlock, { text: "文本塊字體", font: "bold 22px serif" } ) ));寬度和高度
TextBlock只是呈現文本字符串指定的字體。然而TextBlock的實際尺寸可以是任一尺寸,尺寸過大增加無文本區域; 尺寸過小產生文本的剪裁。
為了證明這一點,下面例子中的TextBlock,都具有明確的寬高。為了更好地展現下面的TextBlocks的實際大小,我們已經給了他們淺綠背景。
diagram.add(G( go.Part, "Horizontal", G( go.TextBlock, { text: "文本塊寬度和高度", background: "#492", margin: 5 } ), G( go.TextBlock, { text: "文本塊寬度和高度", background: "#492", margin: 5, width: 100, height: 30 } ), G( go.TextBlock, { text: "文本塊寬度和高度", background: "#492", margin: 5, width: 60, height: 30 } ), G( go.TextBlock, { text: "文本塊寬度和高度", background: "#492", margin: 5, width: 60, height: 20 } ), G( go.TextBlock, { text: "文本塊寬度和高度", background: "#492", margin: 5, width: 60, height: 10 } ) ));換行
文本也可以通過自動換到其他行。為了換行的情況發生,TextBlock.wrap屬性不能為無,必須有一些限制寬窄
diagram.add(G( go.Part, "Horizontal", G( go.TextBlock, { text: "文本塊默認", background: "#492", margin: 1, width:40 } ), G( go.TextBlock, { text: "文本塊不換行剪裁", background: "#492", margin: 1, width:75, wrap: go.TextBlock.None } ), G( go.TextBlock, { text: "文本塊換行 Wrap", background: "#492", margin: 1, width:75, wrap: go.TextBlock.WrapDesiredSize } ), G( go.TextBlock, { text: "文本塊清理邊距 Wrap", background: "#492", margin: 1, width:120, wrap: go.TextBlock.WrapFit } ) ));對齊方式
TextBlock.textAlign屬性指定的尺寸內繪制文字點排列方式。
這比不同GraphObject.alignment屬性,它控制在哪里放置由父級分配區域。
diagram.add(G( go.Part, "Horizontal", G( go.Panel, "Vertical", { width: 150, defaultStretch: go.GraphObject.Horizontal }, G( go.TextBlock, { text: "左對齊", background: "#492", textAlign: "left", margin: 2 } ), G( go.TextBlock, { text: "居中", background: "#492", textAlign: "center", margin: 2 } ), G( go.TextBlock, { text: "右對齊", background: "#492", textAlign: "right", margin: 2 } ) ), G( go.Panel, "Vertical", { width: 150, defaultStretch: go.GraphObject.None }, G( go.TextBlock, { text: "左對齊", background: "#492", alignment: go.Spot.Left, margin: 2 } ), G( go.TextBlock, { text: "居中", background: "#492", alignment: go.Spot.Center, margin: 2 } ), G( go.TextBlock, { text: "右對齊", background: "#492", alignment: go.Spot.Right, margin: 2 } ) ) ));編輯
GoJS也支持由用戶就地編輯文字。你只需要在設置TextBlock.editable屬性設置為true。
如果你希望提供用戶的輸入文本驗證,可以設置TextBlock.textValidation屬性的功能。您也可以提供通過設置更加個性化的或復雜的文本編輯器TextBlock.textEditor屬性。注:驗證稍后完善。
diagram.add(G( go.Part, "Vertical", G( go.TextBlock, { text: "選中后,單擊編輯,不可換行", background: "#492", margin: 5, editable: true, isMultiline: false } ), G( go.TextBlock, { text: "允許嵌入換行", background: "#492", margin: 5, editable: true } ) ));
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/79551.html
摘要:你可以構建一個節點或其類型的代碼。以下將討論基本類型,你可以用它來建立一個節點對象。這些頁面通過明確創建和添加節點和鏈路建立的示意圖。一個非常簡單的節點由一個與構成。雖然以這種方式構建的節點將工作變得更加復雜的代碼將變得更加難以閱讀和維護。 你可以構建一個節點或其類型的JavaScript代碼。以下將討論基本類型,你可以用它來建立一個節點對象。這些頁面通過明確創建和添加節點和鏈路建立的...
摘要:繪制一個幾何圖形。您可以控制什么樣的形狀繪制以及它是如何繪畫和填充。形狀不像的和,形狀不能包含任何其他對象。還需要設置或和參數,作為確定形狀尺寸。在這些簡單的演示,該代碼創建一個圖形,并將其添加到畫布中。屬性指定輪廓的粗細。 繪制一個幾何圖形。您可以控制什么樣的形狀繪制以及它是如何繪畫和填充。形狀不像的TextBlocks和Pictures,形狀不能包含任何其他對象。 基礎圖形 您可以...
摘要:表板中的每個對象被放入由的值索引的和。面板會看行和列的所有在面板中的對象,以確定該表應多少行和列。一行一列一行二列二行一列二行三列請注意,并非表中的每一個列需要有一個存在。屬性指定的寬度和或高度是否應該承擔全部由面板給它的空間。 表板中的每個對象被放入由的值索引的GraphObject.row和GraphObject.column。面板會看行和列的所有在面板中的對象,以確定該表應多少行...
摘要:是一個庫,讓你輕松創建現代瀏覽器的交互圖。支持圖形化的模板和圖形對象屬性數據模型的數據綁定。許多預定義的工具和命令執行,大部分的圖表所需要的標準的行為。外觀和行為的定制是大多設置屬性的問題。 GoJS是一個JavaScript庫,讓你輕松創建現代Web瀏覽器的交互圖。 GoJS支持圖形化的模板和圖形對象屬性數據模型的數據綁定。你只需要保存和恢復模型,包括持有任何性質的應用需求,簡單的J...
摘要:非定向鏈接最簡單的鏈接沒有箭頭指示方向。該模板只包含一個形狀為主要元素,因為這是在節點之間繪制的線條。鏈接的路線被計算后將得到一個路徑的點。可以很容易地建立方向,只需添加一個形狀并設置其屬性。目前也就只能先寫這么多吧入門的話問題不大了 非定向鏈接 最簡單的鏈接沒有箭頭指示方向。該模板只包含一個形狀為主要元素,因為這是在節點之間繪制的線條。鏈接的路線被計算后將得到一個路徑的點。 diag...
閱讀 2902·2023-04-26 02:14
閱讀 3751·2019-08-30 15:55
閱讀 1843·2019-08-29 16:42
閱讀 2757·2019-08-26 11:55
閱讀 2846·2019-08-23 13:38
閱讀 480·2019-08-23 12:10
閱讀 1308·2019-08-23 11:44
閱讀 2791·2019-08-23 11:43