0

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
4

1 に答える 1

2

もちろん。写真の前に丸い穴のあるマスクシェイプを配置するだけです。何かのようなもの：

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

于 2016-02-27T17:43:15.480 に答える