Gojs PanelExpanderButton 自定义图标
Gojs PanelExpanderButton custom icon
在Gojs中,是否可以自定义图标?就我而言,我想使用 SVG/PNG 图像作为 PanelExpanderButton 图标。
go.GraphObject.defineBuilder("PanelExpanderButton", function(args) {
var eltname = /** @type {string} */ (go.GraphObject.takeBuilderArgument(args, "COLLAPSIBLE"));
var button = /** @type {Panel} */ (
$("Button",
{ // set these values for the visible binding conversion
"_buttonExpandedFigure": $(go.Picture, {
// desiredSize: new go.Size(10, 10),
source: "assets/images/expand.png"
},
),
"_buttonCollapsedFigure": $(go.Picture, {
// desiredSize: new go.Size(10, 10),
source: "assets/images/collapse.png"
},
)
},
$(go.Picture, { source: "assets/images/expand.png", desiredSize: new go.Size(10, 10) },
new go.Binding("figure", "visible", function(vis) { return vis ? button["_buttonExpandedFigure"] : button["_buttonCollapsedFigure"]; })
.ofObject(eltname)
)
)
);
var border = button.findObject("ButtonBorder");
if (border instanceof go.Shape) {
border.stroke = null;
border.fill = "transparent";
}
button.click = function(e, button) {
var diagram = button.diagram;
if (diagram === null) return;
if (diagram.isReadOnly) return;
var elt = button.findTemplateBinder();
if (elt === null) elt = button.part;
if (elt !== null) {
var pan = elt.findObject(eltname);
if (pan !== null) {
diagram.startTransaction('Collapse/Expand Panel');
pan.visible = !pan.visible;
diagram.commitTransaction('Collapse/Expand Panel');
}
}
}
return button;
});
当面板 expanded/collapsed
时,我无法更改图标
这里我尝试使用图片但是没有成功
编码愉快!!!
"Figures" 必须是 Shape.defineFigureGenerator 定义的名称之一,包括库中预定义的所有图形名称。所以你不能那样使用 Picture。
但您可以复制和改编 "PanelExpanderButton" 的定义,该定义在 https://gojs.net/latest/extensions/Buttons.js. That way you can size it and provide arbitrary Shapes for its states. If you want to use SVG, please be aware of platform-specific limitations: https://gojs.net/latest/intro/pictures.html#UsingSVGAsPictureSource
中提供
在Gojs中,是否可以自定义图标?就我而言,我想使用 SVG/PNG 图像作为 PanelExpanderButton 图标。
go.GraphObject.defineBuilder("PanelExpanderButton", function(args) {
var eltname = /** @type {string} */ (go.GraphObject.takeBuilderArgument(args, "COLLAPSIBLE"));
var button = /** @type {Panel} */ (
$("Button",
{ // set these values for the visible binding conversion
"_buttonExpandedFigure": $(go.Picture, {
// desiredSize: new go.Size(10, 10),
source: "assets/images/expand.png"
},
),
"_buttonCollapsedFigure": $(go.Picture, {
// desiredSize: new go.Size(10, 10),
source: "assets/images/collapse.png"
},
)
},
$(go.Picture, { source: "assets/images/expand.png", desiredSize: new go.Size(10, 10) },
new go.Binding("figure", "visible", function(vis) { return vis ? button["_buttonExpandedFigure"] : button["_buttonCollapsedFigure"]; })
.ofObject(eltname)
)
)
);
var border = button.findObject("ButtonBorder");
if (border instanceof go.Shape) {
border.stroke = null;
border.fill = "transparent";
}
button.click = function(e, button) {
var diagram = button.diagram;
if (diagram === null) return;
if (diagram.isReadOnly) return;
var elt = button.findTemplateBinder();
if (elt === null) elt = button.part;
if (elt !== null) {
var pan = elt.findObject(eltname);
if (pan !== null) {
diagram.startTransaction('Collapse/Expand Panel');
pan.visible = !pan.visible;
diagram.commitTransaction('Collapse/Expand Panel');
}
}
}
return button;
});
当面板 expanded/collapsed
时,我无法更改图标这里我尝试使用图片但是没有成功
编码愉快!!!
"Figures" 必须是 Shape.defineFigureGenerator 定义的名称之一,包括库中预定义的所有图形名称。所以你不能那样使用 Picture。
但您可以复制和改编 "PanelExpanderButton" 的定义,该定义在 https://gojs.net/latest/extensions/Buttons.js. That way you can size it and provide arbitrary Shapes for its states. If you want to use SVG, please be aware of platform-specific limitations: https://gojs.net/latest/intro/pictures.html#UsingSVGAsPictureSource
中提供