在 GoJs 复选框中，我希望复选图标是矩形，而不是正方形答案

【问题标题】：In a GoJs checkBox, I want the check icon to be a rectangular shape, not a square在 GoJs 复选框中，我希望复选图标是矩形，而不是正方形
【发布时间】：2020-04-19 19:35:08
【问题描述】：

从功能的角度来看，我展示了四个可以独立选择或不选择的按钮。我尝试了几种使用简单按钮的解决方案，或者使用 _doClick 和一个函数来更改矩形的属性。我还尝试了一个简单的节点。
我选择了允许按钮独立的复选框。我使用了矩形图标，但无法使其适合按钮的尺寸。它似乎总是方形的。我还想将文本放在按钮中间。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>LLDynp</title>
<meta name="description" content="Nodes with varying lists of ports on each of four sides." />
<!-- Copyright 1998-2017 by Northwoods Software Corporation. -->
<meta charset="UTF-8">
<script src="https://unpkg.com/gojs/release/go-debug.js"></script>
<body onload="init()">
<script id="code">
var myFont = "16px sans-serif";
var myFontSmall = "14px sans-serif";
var myFontBold = "bold 16px sans-serif";
var colors = {
    'blueUnitBorder': "rgb(65, 116, 217",
    'blueUnit': "rgb(0, 0, 200)",
    'red': '#ff0000',
    'green': '#52ce60',
    'blue': '#6ea5f8',
    'black': 'rgb(0, 0, 0)',
    'lightred': '#fd8852',
    'lightblue': '#afd4fe',
    'lightgreen': '#b9e986',
    'pink': '#faadc1',
    'purple': '#d689ff',
    'orange': '#fdb400'
      };
var flowTypeArray=
      [{key: 0, text: "Ask for", selected: false, color: colors.red},
       {key: 1, text: "Deliver", selected: false, color: colors.black},
       {key: 2, text: "Ask for $", selected: false, color: colors.green},
       {key: 3, text: "$", selected: false, color: colors.blue}
     ];
var nextNeedNumber=0;
var referenceNeedRow=null;
var referenceNeedName=null;
var maxNeeds=5;
var emptyNeedName = "new need name?";

  function init() {
    var $ = go.GraphObject.make;  //for conciseness in defining node templates

    myBannerODIP =
          $(go.Diagram, "myBannerODIPDiv",
                { layout: $(go.GridLayout, { wrappingColumn: 4, alignment: go.GridLayout.Position })});
    myBannerODIP.nodeTemplate =
        $(go.Node, "Auto", { name: "theNode"},
        $("CheckBox", "checked", { name: "theCheckBox"},
                { "Button.width": 85, "Button.height": 50,
                  "_buttonFillOver" : "pink", "ButtonBorder.strokeWidth": 2,
                  "ButtonIcon.figure": "Rectangle", "ButtonIcon.fill": "yellow",
                  "ButtonIcon.strokeWidth": 4, "ButtonIcon.width": 55, "ButtonIcon.height": 40,
                },
                new go.Binding("ButtonIcon.stroke", "key", function(s) { return flowTypeArray[s].color; }).ofObject(),// OK
            $(go.TextBlock,  { name: "theTextBlock"}, {textAlign: "center", margin: new go.Margin (0, 0, 0, -75)},
                  new go.Binding("text", "key", function(s) { return flowTypeArray[s].text; }).ofObject(),// OK
                  new go.Binding("stroke", "key", function(s) { return flowTypeArray[s].color; }),// OK
                  new go.Binding("font", "checked", function(s) { return s ? myFontBold : myFont; })// OK no ofObject
                ),
         )
       );// end horizontal ODIP panel
          myBannerODIP.model.nodeDataArray
         ODIPNodesArray = [
           {key: 0, "checked": false},// checked OK; isSelected  bad; choice à l'envers!
           {key: 1, "checked": true},
           {key: 2 },
           {key: 3 },
                     ];
         ODIPLinksArray = [];
        myBannerODIP.model = new go.GraphLinksModel(ODIPNodesArray, ODIPLinksArray);
};
</script>
</head>
<body onload="init()">
  <div id="container" style= "display: grid; grid-template-columns: 1fr 5fr; margin:0 ;
          height: 800px; width:1080px; font-size:0; position: relative; ">
    <div id="For banner & placeholder save..." style:"grid-column-start: 1;">
        <div id="myBannerODIPDiv" style="display: inline-block; width: 400px; height:70px; background: whitesmoke; margin-right: 6px; border: solid 0px black;">
        </div>
  </div>
</div>
</body>
</html>

【问题讨论】：

标签： checkbox icons gojs

【解决方案1】：

我不清楚你想要什么。你在https://gojs.net/latest/extensions/Checkboxes.html 看到所有的定制吗？您可以更改“ButtonBorder”和“ButtonIcon”的属性。例如：

     $("CheckBox", "choice6",
          {
            "Button.width": 20, "Button.height": 20,
            "ButtonBorder.figure": "Circle", "ButtonBorder.stroke": "blue",
            "ButtonIcon.figure": "Circle", "ButtonIcon.fill": "blue",
            "ButtonIcon.strokeWidth": 0, "ButtonIcon.desiredSize": new go.Size(10, 10)
          },
          $(go.TextBlock, "blue circle")
      ),

【讨论】：

解决了我的问题：