GoJS 绘图 (三) ：shapes

siberiawolf 发布于2019-08-19 18:24 / 1978人阅读

摘要：绘制一个几何图形。您可以控制什么样的形状绘制以及它是如何绘画和填充。形状不像的和，形状不能包含任何其他对象。还需要设置或和参数，作为确定形状尺寸。在这些简单的演示，该代码创建一个图形，并将其添加到画布中。属性指定轮廓的粗细。

绘制一个几何图形。您可以控制什么样的形状绘制以及它是如何绘画和填充。
形状不像的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定义

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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