Live Demo: Add example for Patterns

[jayliu50]

I have read and understood the contribution guidelines.

Would you consider adding an example in the Live Demo for ShadingPattern and TilingPattern?

[HackbrettXXX]

Would definitively be good. Could you prepare a PR for this, maybe?

[jayliu50]

I would... if I knew how! Any resources to get me started? My apologies if I'm missing something obvious. @HackbrettXXX

[jayliu50]

/* doesn't work... but it's the best I could come up with */

var doc = new jsPDF();

doc.compatAPI(function (compat) {
  var pattern = new TilingPattern([0, 0, 1, 1], 0, 0); // I don't know how to define or consume `gStates`. I also don't know how to use or define `Matrix`. 

  compat.beginTilingPattern(pattern);

  compat.setFillColor(255, 0, 0);

  compat.circle(0.5, 0.5, 0.1, "F");

  compat.endTilingPattern("dots", pattern);

  compat.fill("dots"); // I don't know how to reference patterns.

  compat.circle(120, 20, 5, "FD");
});

[HackbrettXXX]

You can create a GState like this:

import { GState } from "jspdf"
new GState({opacity: 0.5})

You can create a matrix like this:

const m = doc.Matrix(1,0,0,1,0,0)

fill() expects an object like this:

jsPDF/types/index.d.ts

Lines 685 to 691 in 8094918

	export interface PatternData {
	key: string;
	matrix?: Matrix;
	boundingBox?: number[];
	xStep?: number;
	yStep?: number;
	}

Apart from that you might have a look at the svg2pdf source code, e.g.
https://github.com/yWorks/svg2pdf.js/blob/master/src/nodes/pattern.ts#L23
https://github.com/yWorks/svg2pdf.js/blob/master/src/fill/PatternFill.ts#L32
https://github.com/yWorks/svg2pdf.js/blob/master/src/nodes/geometrynode.ts#L62

[github-actions]

This issue is stale because it has been open 90 days with no activity. It will be closed soon. Please comment/reopen if this issue is still relevant.

[jayliu50]

Still would be useful. Keep this open

…

On Sun, Mar 6, 2022, 8:57 PM github-actions[bot] ***@***.***> wrote: This issue is stale because it has been open 90 days with no activity. It will be closed soon. Please comment/reopen if this issue is still relevant. — Reply to this email directly, view it on GitHub <#3326 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAFEQRQY2NUUGYOG5QZQYKTU6VPAVANCNFSM5I3NJSMA> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>. You are receiving this because you authored the thread.Message ID: ***@***.***>

[ablakey]

There's very little about this topic on the Internet so I wanted to share an example I finally got working for whoever comes next. I will add more details as I make progress.

import { jsPDF, TilingPattern } from "jspdf";

const pdf = new jsPDF();

pdf.advancedAPI((pdf) => {

  // Define a pattern's basics including the bounding box and distance between each "tile".
  const pattern = new TilingPattern([0, 0, 10, 10], 5, 5);

  // Imperatively begin drawing the pattern.
  pdf.beginTilingPattern(pattern);
  pdf.setDrawColor("#00FF00");

  pdf.path([
    { op: "m", c: [0, 0] },
    { op: "l", c: [1, 0.5] },
    { op: "l", c: [0, 1] },
    { op: "h", c: [] },
  ]);

  pdf.stroke();
  pdf.endTilingPattern("patternkey", pattern);
});

// Draw some polygon.
pdf.path([
  { op: "m", c: [10, 10] },
  { op: "l", c: [50, 10] },
  { op: "l", c: [50, 50] },
  { op: "l", c: [90, 50] },
  { op: "l", c: [10, 90] },
  { op: "l", c: [10, 10] },
  { op: "h", c: [] },
]);

// Fill it, but using the pattern.
pdf.fill({ key: "patternkey" });

pdf.save("Test.pdf");

[Scalamando]

Building on @ablakey's example, here's one using a ShadingPattern as I've had quite the struggle to get them working:

import { jsPDF, ShadingPattern } from "jspdf";

const doc = new jsPDF();

doc.advancedAPI((doc) => {

  // Define a shading pattern
  doc.addShadingPattern(
    "gradient", // unique key for later use
    new ShadingPattern(
      "axial",
      [50, 50, 150, 150], // x1, y1, x2, y2
      [
        { color: [255, 0, 0], offset: 0 },
        { color: [0, 255, 0], offset: 0.5 },
        { color: [0, 0, 255], offset: 1 },
      ]
    )
  );

  // Draw a path or shapes to your liking.
  // Mind that the coordinates of the pattern need to lineup with your paths coordinates.
  doc.rect(50, 50, 100, 100); // x1, y1, w, h
  
  // Fill the path using the pattern's key and a matrix (required)
  doc.fill({
    key: "gradient",
    matrix: doc.Matrix(1, 0, 0, 1, 0, 0), // e.g. identity for 1:1 coordinate mapping
  });
});

doc.save("ShadingPattern.pdf");