Question

使用GoJs，是否可以在圆圈中显示图片？

我无法在任何地方找到它。基本上我正在寻找一个矩形上的CSS Border-radius可能产生的效果，使它看起来像一个圆圈。

感谢任何帮助。

编辑：这是我的节点模板。

// define the Node template
mySecondDiagram.nodeTemplate =
$$(go.Node, "Auto",
    // for sorting, have the Node.text be the data.name
    new go.Binding("text", "name"),
    // bind the Part.layerName to control the Node's layer depending on whether it isSelected
    new go.Binding("layerName", "isSelected", function(sel) { return sel ? "Foreground" : ""; }).ofObject(),
    // define the node's outer shape
    $$(go.Shape, "Rectangle",
        {
            name: "SHAPE", fill: "white", stroke: null,
            // set the port properties:
            portId: "", fromLinkable: false, toLinkable: false, cursor: "pointer"
        }),
    $$(go.Panel, "Horizontal",
        $$(go.Picture,
            {
                name: 'Picture',
                desiredSize: new go.Size(50, 50),
                margin: new go.Margin(6, 8, 6, 10)
            },
            new go.Binding("source", "", findHeadShot),
            new go.Binding("visible", "", pictureVisible)
        ),
        $$(go.Shape,
            {
                strokeWidth: 1,
                stroke: null,
                geometryString: "f M0 0 L100 0 L100 100 L0 100 z M5,50a45,45 0 1,0 90,0a45,45 0 1,0 -90,0 z",
                width: 50,
                height: 50
            }
        ),

        // define the panel where the text will appear
        $$(go.Panel, "Table",
            {
                maxSize: new go.Size(300, 999),
                margin: new go.Margin(6, 10, 0, 3),
                defaultAlignment: go.Spot.Left
            },
            $$(go.TextBlock, textStyle(),  // the name
                {
                    row: 0,
                    font: "12pt Segoe UI,sans-serif",
                    editable: false, isMultiline: false,
                    minSize: new go.Size(10, 16)
                },
                new go.Binding("text", "name").makeTwoWay(),
                new go.Binding("stroke", "",textColor)
            ),
            $$(go.TextBlock,textStyle(),
                {
                    row: 1,
                    font: "8pt sans-serif"
                },
                new go.Binding("text", "", theInfoTextConverter),
                new go.Binding("stroke", "",textColor)
            )
        )
            // end of table
    ) // end Horizontal Panel
);  // end Node

Answer 1

不确定。只需在图片前放置一个带圆孔的面具Shape。类似的东西：

myDiagram.nodeTemplate =
    $(go.Node, "Spot",
        $(go.Picture, "http://gojs.net/latest/samples/images/55x55.png", {
            desiredSize: new go.Size(50, 50)
        }),
        $(go.Shape, {
                geometryString: "F M0 0 L100 0 L100 100 L0 100 z M5,50 a45,45 0 1,0 90,0 a45,45 0 1,0 -90,0 z",
                desiredSize: new go.Size(50, 50),
                strokeWidth: 0,
                fill: 'white'
            },
            new go.Binding("fill", "color"))
    )

您可以根据需要调整几何图形和尺寸。

在CodePen中使用此功能：http://codepen.io/simonsarris/pen/GJdNgM?editors=0010

GoJs：围成一圈的照片

1 个答案: