Create pattern in javascript to implement in gojs

GoJS
1

Dear friends,

I want to create a pattern like below:

https://www.ultraplay.com/products/freestanding/trike-hazard-barrier-sign

using the below document
https://gojs.net/latest/intro/brush.html#PatternBrushes
(Pattern Brushes)
I wrote the code like below:

function makePattern() {
var patternCanvas = document.createElement(‘canvas’);
patternCanvas.width = 50;
patternCanvas.height = 100;
var pctx = patternCanvas.getContext(‘2d’);

pctx.fillStyle = “yellow”;
pctx.moveTo(20,90);
pctx.lineTo(40,90);
pctx.lineTo(20,0);
pctx.lineTo(0,0);
pctx.fill();
return patternCanvas;
}

it did not come well pls correct me to create exactly same like above hazard symbol.

Thanks and Regards,
Syed Abdul Rahim

2

You need to fill it with black, and you need to make sure the corners have yellow in them.

  function makePattern() {
    var patternCanvas = document.createElement('canvas');
    patternCanvas.width = 40;
    patternCanvas.height = 40;
    var pctx = patternCanvas.getContext('2d');

    pctx.fill = "black";
    pctx.fillRect(0, 0, 40, 40);

    pctx.lineWidth = 14;
    pctx.strokeStyle = "yellow";

    pctx.beginPath();
    pctx.moveTo(-60, -20);
    pctx.lineTo(20, 60);
    pctx.stroke();

    pctx.beginPath();
    pctx.moveTo(-20, -20);
    pctx.lineTo(60, 60);
    pctx.stroke();

    pctx.beginPath();
    pctx.moveTo(20, -20);
    pctx.lineTo(100, 60);
    pctx.stroke();

    return patternCanvas;
  }
3

Thanks Mr.walter. after finishing this diagram I gave make as svg it came as black box no pattern like this… I gave below commands.

function saveAsSvg(){
var image = diagram.makeSVG({
scale: 1,
size: new go.Size(3000,1000)
});

var s = new XMLSerializer();
var str = s.serializeToString(image);
var tab = window.open(‘about:blank’, ‘_blank’);
//-----------to open svg----------------------------
tab.document.write("

’’+str+"
");
}

pls check and tell me did I made any mistake?

Thanks and Regards,
Syed Abdul Rahim

4

I just tried this:

<!DOCTYPE html>
<html>
<head>
<title>Minimal GoJS Sample</title>
<!-- Copyright 1998-2019 by Northwoods Software Corporation. -->
<meta charset="UTF-8">
<script src="go.js"></script>
<script id="code">
  function makePattern() {
    var patternCanvas = document.createElement('canvas');
    patternCanvas.width = 40;
    patternCanvas.height = 40;
    var pctx = patternCanvas.getContext('2d');

    pctx.fill = "black";
    pctx.fillRect(0, 0, 40, 40);

    pctx.lineWidth = 14;
    pctx.strokeStyle = "yellow";

    pctx.beginPath();
    pctx.moveTo(-60, -20);
    pctx.lineTo(20, 60);
    pctx.stroke();

    pctx.beginPath();
    pctx.moveTo(-20, -20);
    pctx.lineTo(60, 60);
    pctx.stroke();

    pctx.beginPath();
    pctx.moveTo(20, -20);
    pctx.lineTo(100, 60);
    pctx.stroke();

    return patternCanvas;
  }

  function init() {
    var $ = go.GraphObject.make;

    myDiagram =
      $(go.Diagram, "myDiagramDiv");

    myDiagram.nodeTemplate =
      $(go.Node, "Auto",
        $(go.Shape,
          { fill: $(go.Brush, "Pattern", { pattern: makePattern() }) }),
        $(go.TextBlock,
          { margin: 8, stroke: "orange" },
          new go.Binding("text"))
      );

    myDiagram.linkTemplate =
      $(go.Link,
        $(go.Shape),
        $(go.Shape, { toArrow: "OpenTriangle" })
      );

    myDiagram.model = new go.GraphLinksModel(
    [
      { key: 1, text: "Alpha", color: "lightblue" },
      { key: 2, text: "Beta", color: "orange" },
      { key: 3, text: "Gamma", color: "lightgreen" },
      { key: 4, text: "Delta", color: "pink" }
    ],
    [
      { from: 1, to: 2 },
      { from: 1, to: 3 },
      { from: 2, to: 2 },
      { from: 3, to: 4 },
      { from: 4, to: 1 }
    ]);
  }

  function test() {
    var svg = myDiagram.makeSvg({ scale: 1 });
    console.log(new XMLSerializer().serializeToString(svg));
    document.body.appendChild(svg);
  }
</script>
</head>
<body onload="init()">
  <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:400px"></div>
  <button onclick="test()">Test</button>
</body>
</html>

and after clicking the “Test” Button it produced this:

image
image.png634×574 27.2 KB

Furthermore, the SVG text written to the console, after sticking into an “.svg” file, produced a valid SVG file that renders correctly in four different browsers that I tried.

Hmmm, I cannot upload an SVG image file to the forum, but here’s the text in it:

<svg width="132px" height="104px" viewBox="0 0 132 104" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="width: 132px; height: 104px;"><g transform="matrix(1, 0, 0, 1, 0, 0)" clip-path="url(#mainClip647)"><g transform="matrix(1, 0, 0, 1, 1, 1)"><g transform="matrix(1, 0, 0, 1, 0, 0)"><path d="M 0,0 L 49,0 L 49,30.3 L 0,30.3 z" fill="url(#PATTERN648)" stroke="none" transform="matrix(1, 0, 0, 1, 0.5, 0.5)"/><path d="M 0,0 L 49,0 L 49,30.3 L 0,30.3 z" fill="none" stroke="black" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 0.5, 0.5)"/><text x="0" y="10.725000000000001" style="font: 13px sans-serif" text-anchor="start" fill="orange" stroke="none" transform="matrix(1, 0, 0, 1, 8.5, 8.5)">Alpha</text></g><g transform="matrix(1, 0, 0, 1, 70, 0)"><path d="M 0,0 L 43,0 L 43,30.3 L 0,30.3 z" fill="url(#PATTERN648)" stroke="none" transform="matrix(1, 0, 0, 1, 0.5, 0.5)"/><path d="M 0,0 L 43,0 L 43,30.3 L 0,30.3 z" fill="none" stroke="black" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 0.5, 0.5)"/><text x="0" y="10.725000000000001" style="font: 13px sans-serif" text-anchor="start" fill="orange" stroke="none" transform="matrix(1, 0, 0, 1, 8.5, 8.5)">Beta</text></g><g transform="matrix(1, 0, 0, 1, 0, 70)"><path d="M 0,0 L 62,0 L 62,30.3 L 0,30.3 z" fill="url(#PATTERN648)" stroke="none" transform="matrix(1, 0, 0, 1, 0.5, 0.5)"/><path d="M 0,0 L 62,0 L 62,30.3 L 0,30.3 z" fill="none" stroke="black" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 0.5, 0.5)"/><text x="0" y="10.725000000000001" style="font: 13px sans-serif" text-anchor="start" fill="orange" stroke="none" transform="matrix(1, 0, 0, 1, 8.5, 8.5)">Gamma</text></g><g transform="matrix(1, 0, 0, 1, 83, 70)"><path d="M 0,0 L 46,0 L 46,30.3 L 0,30.3 z" fill="url(#PATTERN648)" stroke="none" transform="matrix(1, 0, 0, 1, 0.5, 0.5)"/><path d="M 0,0 L 46,0 L 46,30.3 L 0,30.3 z" fill="none" stroke="black" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 0.5, 0.5)"/><text x="0" y="10.725000000000001" style="font: 13px sans-serif" text-anchor="start" fill="orange" stroke="none" transform="matrix(1, 0, 0, 1, 8.5, 8.5)">Delta</text></g><g transform="matrix(1, 0, 0, 1, 49.5, 11.15)"><path d="M 0,0 L 20,0" fill="black" stroke="none" transform="matrix(1, 0, 0, 1, 0.5, 4.5)"/><path d="M 0,0 L 20,0" fill="none" stroke="black" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 0.5, 4.5)"/><path d="M 0,0 L 8,4 L 0,8" fill="none" stroke="black" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 12, 0.5)"/></g><g transform="matrix(1, 0, 0, 1, 25.130718480607108, 30.8)"><path d="M 0,0 L 3.5935714285714297,38.7" fill="black" stroke="none" transform="matrix(1, 0, 0, 1, 1.3224958051071773, 0.5)"/><path d="M 0,0 L 3.5935714285714297,38.7" fill="none" stroke="black" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 1.3224958051071773, 0.5)"/><path d="M 0,0 L 8,4 L 0,8" fill="none" stroke="black" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" transform="matrix(0.09245938526191269, 0.9957164566667507, -0.9957164566667507, 0.09245938526191269, 8.113028285619352, 30.36657257728497)"/></g><g transform="matrix(1, 0, 0, 1, 76.2144682871837, 30.697114317029975)"><path d="M 22.462541169063414,0 C 43.462541169063414,36.373066958946424 -16.608522256570183,36.373066958946424 4.391477743429803,0" fill="none" stroke="black" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 2.358522256570197, 0.6028856829700269)"/><path d="M 0,0 L 8,4 L 0,8" fill="none" stroke="black" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" transform="matrix(0.5000000000000001, -0.8660254037844386, 0.8660254037844386, 0.5000000000000001, -0.9641016151377553, 5.9641016151377535)"/></g><g transform="matrix(1, 0, 0, 1, 62.5, 81.15)"><path d="M 0,0 L 20,0" fill="black" stroke="none" transform="matrix(1, 0, 0, 1, 0.5, 4.5)"/><path d="M 0,0 L 20,0" fill="none" stroke="black" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 0.5, 4.5)"/><path d="M 0,0 L 8,4 L 0,8" fill="none" stroke="black" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 12, 0.5)"/></g><g transform="matrix(1, 0, 0, 1, 42.13476775012, 29.732009110532523)"><path d="M 45.057857142857145,38.7 L 0,0" fill="black" stroke="none" transform="matrix(1, 0, 0, 1, 1.0863036784514226, 1.5679908894674792)"/><path d="M 45.057857142857145,38.7 L 0,0" fill="none" stroke="black" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 1.0863036784514226, 1.5679908894674792)"/><path d="M 0,0 L 8,4 L 0,8" fill="none" stroke="black" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" transform="matrix(-0.7585991825663506, -0.6515575801183381, 0.6515575801183381, -0.7585991825663506, 4.92816640979205, 10.140627050738754)"/></g></g></g><clipPath id="mainClip647"><rect x="0" y="0" width="132px" height="104px"/></clipPath><pattern width="40" height="40" id="PATTERN648" patternUnits="userSpaceOnUse"><image x="0" y="0" width="40" height="40" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAyElEQVRYhc3YMQ6EMAxE0blw7l9m2xXgxHFszxQuAEs8JD4FmBPTM2NgAnkzhu++8AJZyCMgA3kM7EaGgJ3IMLALeQXsQF4Dq5EpwEpkGrAKCe8XnYXEKnERpJ24CNJOXARpJy6CtBMXQdqJiyDtiyLI9YIAcr9ERvoWiUj/05CQZ+8EAXleVjMylH4nMgZsRMaBTcg7YAPyHliMzAGWIVl/rbyDTeJ0JDaJ05H4P1BE4nlCDfkCqiE/gUpIE6iCXAIVkFsgG/kDbHdopZq5ktoAAAAASUVORK5CYII="/></pattern></svg>
5

Thanks Mr.Walters