GoJS 绘图 (五) ：定位面板与垂直面板（Panel）

PrototypeZ 发布于2019-08-19 18:26 / 3906人阅读

摘要：虽然只有一个面板，也有许多不同类型的面板，每个都有其自己的目的是如何安排的元素。这些都是存在的各种面板组成位置面板最简单的一种面板是。每个元素获得其正常大小，无论其默认大小或指定或等价的和。垂直面板面板的所有面板元件的排列垂直从上到下。

Panel是负责任的大小和位置的所有元素。每个面板建立自己的坐标系。一个面板的元件的绘制顺序表示建立这些元素的Z轴排序。
虽然只有一个面板，也有许多不同类型的面板，每个都有其自己的目的是如何安排的元素。当你建立一个面板，你通常会指定其Panel.type作为构造函数参数。这些都是存在的各种面板组成：

Panel.Position

Panel.Vertical

Panel.Horizontal

Panel.Auto

Panel.Spot

Panel.Table

Panel.Viewbox

Panel.Link

Panel.Grid

位置面板

最简单的一种面板是“Position”（Panel.Position）。每个元素获得其正常大小，无论其默认大小或指定GraphObject.desiredSize （或等价的GraphObject.width和GraphObject.height）。
每个元素的位置是由GraphObject.position属性指定。如果没有指定位置时，元件被定位在（0,0）。所有位置都是面板自己的坐标系中，而不是在文件范围的坐标系。位置可能包括负坐标。
面板的大小刚好足以容纳所有元素。如果你希望它是比大一点，可以设置Panel.padding属性。

</>复制代码 
diagram.add(G(
    go.Part,
    go.Panel.Position,
    {
        background: "#eee"
    },
    G(
        go.TextBlock,
        {
            text: "0, 0",
            background: "#394"
        }
    ),
    G(
        go.TextBlock,
        {
            text: "100, 100",
            background: "#394",
            position: new go.Point(100, 100)
        }
    ),
    G(
        go.TextBlock,
        {
            text: "0, 100",
            background: "#394",
            position: new go.Point(0, 100)
        }
    ),
    G(
        go.TextBlock,
        {
            text: "100, 000",
            background: "#394",
            position: new go.Point(100, 0)
        }
    )
));

垂直面板

面板的所有面板元件的排列垂直从上到下。每个元件获得其正常高度和任其正常的宽度，或者拉伸时的面板的宽度。如果元素的GraphObject.stretch有任何垂直伸展的部分，它被忽略。
整个面板的宽度匹配最宽的对象。注意，在最后textBlock不设置GraphObject.width属性，使得GraphObject.stretch值是有效的。

</>复制代码 
diagram.add(G(
    go.Part,
    go.Panel.Vertical,
    {
        background: "#eee"
    },
    G(
        go.TextBlock,
        {
            text: "左",
            background: "#394",
            alignment: go.Spot.Left
        }
    ),
    G(
        go.TextBlock,
        {
            text: "中",
            background: "#394",
            alignment: go.Spot.Center
        }
    ),
    G(
        go.TextBlock,
        {
            text: "右",
            background: "#394",
            alignment: go.Spot.Right
        }
    ),
    G(
        go.TextBlock,
        {
            text: "－－－－拉伸面板－－－－",
            background: "#394"
        }
    ),
    G(
        go.TextBlock,
        {
            text: "扩展背景",
            background: "#394",
            alignment: go.Spot.Right,
            stretch: go.GraphObject.Fill
        }
    )
));

因为没有指定面板的宽度，其宽度是最宽的元件的宽度。可以通过MAXSIZE来限制。

</>复制代码 
    G(
        go.TextBlock,
        {
            text: "扩展背景",
            background: "#394",
            alignment: go.Spot.Right,
            stretch: go.GraphObject.Fill,
            MAXSIZE: new go.Size(100, NAN)
        }
    )

云服务器 GPU云服务器宝塔面板与云服务器面板脚本选项面板主机面板

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

转载请注明本文地址：https://www.ucloud.cn/yun/79603.html

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
GoJS 绘图 (七) ：表面板（tablePanel）

摘要：表板中的每个对象被放入由的值索引的和。面板会看行和列的所有在面板中的对象，以确定该表应多少行和列。一行一列一行二列二行一列二行三列请注意，并非表中的每一个列需要有一个存在。属性指定的宽度和或高度是否应该承担全部由面板给它的空间。表板中的每个对象被放入由的值索引的GraphObject.row和GraphObject.column。面板会看行和列的所有在面板中的对象，以确定该表应多少行...

sushi 2019-08-21 10:51 评论0 收藏0
GoJS 绘图 (四) ：构建节点与GraphObjects

摘要：你可以构建一个节点或其类型的代码。以下将讨论基本类型，你可以用它来建立一个节点对象。这些页面通过明确创建和添加节点和链路建立的示意图。一个非常简单的节点由一个与构成。虽然以这种方式构建的节点将工作变得更加复杂的代码将变得更加难以阅读和维护。你可以构建一个节点或其类型的JavaScript代码。以下将讨论基本类型，你可以用它来建立一个节点对象。这些页面通过明确创建和添加节点和链路建立的...

jokester 2019-08-19 18:25 评论0 收藏0
GoJS入门笔记（1）

摘要：能干什么，废话不多说，进传送门看看。在中，我们可以在中设置控件与控件之间的关系有点不同使用方法使用第六步样式通过设置连接线的样式没有箭头连接线样式箭头样式运行结果 GoJS能干什么，废话不多说，进传送门看看。传送门第一步：Hello World! // 如果用了jQuery等其他库或框架，这里$会...

tylin 2019-08-23 14:08 评论0 收藏0