How to drag and drop to change the fillet size of SVG elements

GoJS
1

There is an SVG element in the canvas. If the element has a fillet, how to change the size of the fillet

2

When one asks questions, it helps if you include a small screenshot showing what you have and another screenshot or sketch showing what you want instead, plus the relevant source code – in this case your SVG.

3

I want
before
image
after
after

now
before
2before
after
after2

Reference is Geometry Reshaping

4

What is the SVG?

5

That’s the shape

6

Yes, and what is the SVG text definition of that shape?

7

path: ‘M 0 0 L 140 0 Q 200 0 200 60 L 200 200 L 60 200 Q 0 200 0 140 L 0 0 Z’

8

Here’s what I tried:

<!DOCTYPE html>
<html>
<head>
  <title>Minimal GoJS Sample</title>
  <!-- Copyright 1998-2022 by Northwoods Software Corporation. -->
</head>
<body>
  <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:600px"></div>

  <script src="https://unpkg.com/gojs"></script>
  <script src="https://unpkg.com/gojs/extensions/GeometryReshapingTool.js"></script>
  <script id="code">
const $ = go.GraphObject.make;

const myDiagram =
  $(go.Diagram, "myDiagramDiv",
    {
      "undoManager.isEnabled": true
    });

myDiagram.toolManager.mouseDownTools.insertAt(3,
  $(GeometryReshapingTool, { isResegmenting: true }));

myDiagram.nodeTemplate =
  $(go.Node,
    {
      selectionAdorned: false,
      reshapable: true
    },
    $(go.Shape, {
      name: "SHAPE",
      geometryString: "M 0 0 L 140 0 Q 200 0 200 60 L 200 200 L 60 200 Q 0 200 0 140 L 0 0 Z",
      background: "transparent"
    })
  );

myDiagram.model = new go.GraphLinksModel([ {} ]);
  </script>
</body>
</html>

My results, after reshaping the two curves outwards:

image
image811×781 24.2 KB

These all seem to be exactly what one would expect. In the case of the quadratic Bezier curves, the user can reposition the control point to wherever they desire, as shown in the top right node. If you want to limit where the control point could go, you will need to customize the GeometryReshapingTool to do what you want. Override its reshape method.

Note how moving the end points of the quadratic Bezier curve in the bottom left node made the corner smaller, which I think is what you were wanting.

9

thank you，Great