GoJS 繪圖 (三) ：shapes

siberiawolf 發布于2019-08-19 18:24 / 2000人閱讀

摘要：繪制一個幾何圖形。您可以控制什么樣的形狀繪制以及它是如何繪畫和填充。形狀不像的和，形狀不能包含任何其他對象。還需要設置或和參數，作為確定形狀尺寸。在這些簡單的演示，該代碼創建一個圖形，并將其添加到畫布中。屬性指定輪廓的粗細。

繪制一個幾何圖形。您可以控制什么樣的形狀繪制以及它是如何繪畫和填充。
形狀不像的TextBlocks和Pictures，形狀不能包含任何其他對象。

基礎圖形

您可以設置Shape.figure屬性通常為各種形狀。還需要設置GraphObject.desiredSize或GraphObject.width和GraphObject.height參數，作為確定形狀尺寸。
在這些簡單的演示，該代碼創建一個圖形，并將其添加到畫布中。

diagram.add(G(
    go.Part,
    "Horizontal",
    G(
        go.Shape,
        "Rectangle",
        {
            width:40,
            height:60,
            margin: 4,
            fill: null
        }
    ),
    G(
        go.Shape,
        "Ellipse",
        {
            desiredSize: new go.Size(40, 60),
            margin: 4,
            fill: null
        }
    )
));

填充和畫筆

Shape.stroke屬性指定用于繪制形狀的輪廓刷。Shape.fill屬性指定用于填充形狀的背景。附加“stroke”的屬性也控制形狀的輪廓繪制方式。Shape.strokeWidth屬性指定輪廓的粗細。

diagram.add(G(
    go.Part,
    "Horizontal",
    G(
        go.Shape,
        {
            width:100,
            height:40,
            margin:2,
            fill: "#394",
            strokeWidth: 0
        }
    ),
    G(
        go.Shape,
        {
            width:100,
            height:40,
            fill: null,
            stroke: "#394",
            strokeWidth: 4
        }
    ),
    G(
        go.Shape,
        {
            width: 100,
            height:40,
            fill: null,
            stroke: "#439",
            strokeWidth: 5,
            background: "#394"
        }
    )
));

角度和縮放

除了?設置GraphObject.desiredSize或GraphObject.width和GraphObject.height申報的大小形狀，還可以設置其他屬性影響美觀。例如，您可以設置GraphObject.angle和GraphObject.scale屬性。

diagram.add(G(
    go.Part,
    "Table",
    G(
        go.Shape,
        {
            row: 0,
            column: 1,
            width:40,
            height:40,
            margin: 5,
            fill: "#492",
            strokeWidth: 0
        }
    ),
    G(
        go.Shape,
        {
            row: 0,
            column: 2,
            width: 40,
            height: 40,
            margin: 5,
            fill: "#492",
            strokeWidth: 0,
            angle: 45
        }
    ),
    G(
        go.Shape,
        {
            row: 0,
            column: 3,
            width: 40,
            height: 40,
            margin: 5,
            fill: "#492",
            strokeWidth: 0,
            scale: 1.5
        }
    )
));

云服務器 GPU云服務器 GoJS shape Shapes android_shape定義

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/79558.html

GoJS 繪圖 (四) ：構建節點與GraphObjects

摘要：你可以構建一個節點或其類型的代碼。以下將討論基本類型，你可以用它來建立一個節點對象。這些頁面通過明確創建和添加節點和鏈路建立的示意圖。一個非常簡單的節點由一個與構成。雖然以這種方式構建的節點將工作變得更加復雜的代碼將變得更加難以閱讀和維護。你可以構建一個節點或其類型的JavaScript代碼。以下將討論基本類型，你可以用它來建立一個節點對象。這些頁面通過明確創建和添加節點和鏈路建立的...

jokester 2019-08-19 18:25 評論0 收藏0
GoJS 繪圖 (十) ：鏈接（完結）

摘要：非定向鏈接最簡單的鏈接沒有箭頭指示方向。該模板只包含一個形狀為主要元素，因為這是在節點之間繪制的線條。鏈接的路線被計算后將得到一個路徑的點。可以很容易地建立方向，只需添加一個形狀并設置其屬性。目前也就只能先寫這么多吧入門的話問題不大了非定向鏈接最簡單的鏈接沒有箭頭指示方向。該模板只包含一個形狀為主要元素，因為這是在節點之間繪制的線條。鏈接的路線被計算后將得到一個路徑的點。 diag...

Rocko 2019-08-22 10:33 評論0 收藏0
GoJS 繪圖 (九) ：數據綁定

摘要：綁定字符串和數字特性綁定數據的屬性。轉換功能你可以通過轉換函數的第三個參數綁定構造函數。允許位置字符串的形式來指定，而不是作為一個表達式的點。轉換函數可以是命名或匿名函數。他們把數據屬性值作為參數，并返回適用于正在設置該屬性的值。綁定字符串和數字特性綁定GraphObject數據的屬性。在這個例子中，我們不僅綁定TextBlock.text和Shape.fill中的節點到節點數據的...

fobnn 2019-08-19 18:31 評論0 收藏0
GoJS 繪圖 (八) ：模型和模版

摘要：下面是這樣做的一種方式使用模型和模板事實上，圖已經為節點和鏈接非常簡單的默認模板。該特定節點的數據已投入對象的數組。因此，我們需要替換節點模版。數據綁定數據綁定是一種聲明聲明一個對象的屬性值應該用于設置另一個對象的屬性值。使用模版構視圖讓我們嘗試建立兩個節點，將它們與一個鏈接連接。下面是這樣做的一種方式： var node1 = g( go.Node, Auto, ...

Hanks10100 2019-08-21 10:52 評論0 收藏0
GoJS 繪圖 (六) ：橫向面板（panel）

摘要：橫向面板屬性和縱向面板基本相同只是排列順序不同默認對齊和拉伸垂直和水平兩個面板的支持的和屬性。這是一種便捷的方式使您不必設置每個元件的或橫向面板屬性和縱向面板基本相同只是排列順序不同 diagram.add(G( go.Part, go.Panel.Horizontal, { position: new go.Point(500, 0), ...

Hancock_Xu 2019-08-19 18:26 評論0 收藏0