Some test text!

menu

PDF patterns and shadings in JavaScript

Sample JavaScript code for using PDFTron SDK to create various patterns and shadings in PDF files. Learn more about our JavaScript PDF Library and PDF Editing & Manipulation Library.

Get StartedSamplesDownload

To run this sample, get started with a free trial of PDFTron SDK.

//---------------------------------------------------------------------------------------
// Copyright (c) 2001-2019 by PDFTron Systems Inc. All Rights Reserved.
// Consult legal.txt regarding legal and license information.
//---------------------------------------------------------------------------------------

const { PDFNet } = require('../../lib/pdfnet.js');

((exports) => {
  'use strict';

  exports.runPatternTest = () => {
    const createTilingPattern = async (doc) => {
      const writer = await PDFNet.ElementWriter.create();
      const eb = await PDFNet.ElementBuilder.create();

      // Create a new pattern content stream - a heart. ------------
      writer.begin(doc);
      eb.pathBegin();
      eb.moveTo(0, 0);
      eb.curveTo(500, 500, 125, 625, 0, 500);
      eb.curveTo(-125, 625, -500, 500, 0, 0);
      const heart = await eb.pathEnd();
      heart.setPathFill(true);

      // Set heart color to red.
      const gstate = await heart.getGState();
      gstate.setFillColorSpace(await PDFNet.ColorSpace.createDeviceRGB());
      gstate.setStrokeColorWithColorPt(await PDFNet.ColorPt.init(1, 0, 0));
      writer.writeElement(heart);

      const pattern_dict = await writer.end();

      // Initialize pattern dictionary. For details on what each parameter represents please 
      // refer to Table 4.22 (Section '4.6.2 Tiling Patterns') in PDF Reference Manual.
      pattern_dict.putName("Type", "Pattern");
      pattern_dict.putNumber("PatternType", 1);

      // TilingType - Constant spacing.
      pattern_dict.putNumber("TilingType", 1);

      // This is a Type1 pattern - A colored tiling pattern.
      pattern_dict.putNumber("PaintType", 1);

      // Set bounding box
      pattern_dict.putRect("BBox", -253, 0, 253, 545);

      // Create and set the matrix
      const pattern_mtx = await PDFNet.Matrix2D.create(0.04, 0, 0, 0.04, 0, 0);
      pattern_dict.putMatrix("Matrix", pattern_mtx);

      // Set the desired horizontal and vertical spacing between pattern cells, 
      // measured in the pattern coordinate system.
      pattern_dict.putNumber("XStep", 1000);
      await pattern_dict.putNumber("YStep", 1000);

      return pattern_dict; // finished creating the Pattern resource
    }

    const createImageTilingPattern = async (doc) => {
      const writer = await PDFNet.ElementWriter.create();
      const eb = await PDFNet.ElementBuilder.create();

      // Create a new pattern content stream - a single bitmap object ----------
      writer.begin(doc);
      const image = await PDFNet.Image.createFromFile(doc, '../TestFiles/dice.jpg');
      const img_element = await eb.createImageScaled(image, 0, 0, await image.getImageWidth(), await image.getImageHeight());
      writer.writePlacedElement(img_element);

      const pattern_dict = await writer.end();

      // Initialize pattern dictionary. For details on what each parameter represents please 
      // refer to Table 4.22 (Section '4.6.2 Tiling Patterns') in PDF Reference Manual.
      pattern_dict.putName("Type", "Pattern");
      pattern_dict.putNumber("PatternType", 1);

      // TilingType - Constant spacing.
      pattern_dict.putNumber("TilingType", 1);

      // This is a Type1 pattern - A colored tiling pattern.
      pattern_dict.putNumber("PaintType", 1);

      // Set bounding box
      pattern_dict.putRect("BBox", -253, 0, 253, 545);

      // Create and set the matrix
      const pattern_mtx = await PDFNet.Matrix2D.create(0.3, 0, 0, 0.3, 0, 0);
      pattern_dict.putMatrix("Matrix", pattern_mtx);

      // Set the desired horizontal and vertical spacing between pattern cells, 
      // measured in the pattern coordinate system.
      pattern_dict.putNumber("XStep", 300);
      await pattern_dict.putNumber("YStep", 300);

      return pattern_dict; // finished creating the Pattern resource
    }

    const createAxialShading = async (doc) => {
      // Create a new Shading object ------------
      const pattern_dict = await doc.createIndirectDict();

      // Initialize pattern dictionary. For details on what each parameter represents 
      // please refer to Tables 4.30 and 4.26 in PDF Reference Manual
      pattern_dict.putName("Type", "Pattern");
      pattern_dict.putNumber("PatternType", 2); // 2 stands for shading

      const shadingDict = await pattern_dict.putDict("Shading");
      shadingDict.putNumber("ShadingType", 2);
      shadingDict.putName("ColorSpace", "DeviceCMYK");

      // pass the coordinates of the axial shading to the output
      const shadingCoords = await shadingDict.putArray("Coords");
      shadingCoords.pushBackNumber(0);
      shadingCoords.pushBackNumber(0);
      shadingCoords.pushBackNumber(612);
      shadingCoords.pushBackNumber(794);

      // pass the function to the axial shading
      const func = await shadingDict.putDict("Function");
      const C0 = await func.putArray("C0");
      C0.pushBackNumber(1);
      C0.pushBackNumber(0);
      C0.pushBackNumber(0);
      await C0.pushBackNumber(0);

      const C1 = await func.putArray("C1");
      C1.pushBackNumber(0);
      C1.pushBackNumber(1);
      C1.pushBackNumber(0);
      await C1.pushBackNumber(0);

      const domain = await func.putArray("Domain");
      domain.pushBackNumber(0);
      await domain.pushBackNumber(1);

      func.putNumber("FunctionType", 2);
      await func.putNumber("N", 1);

      return pattern_dict;
    }

    const main = async () => {
      try {
        const doc = await PDFNet.PDFDoc.create();
        const writer = await PDFNet.ElementWriter.create();
        var eb = await PDFNet.ElementBuilder.create();

        // The following sample illustrates how to create and use tiling patterns
        var page = await doc.pageCreate();
        writer.beginOnPage(page);

        var element = await eb.createTextBeginWithFont(await PDFNet.Font.createAndEmbed(doc, PDFNet.Font.StandardType1Font.e_times_bold), 1);
        writer.writeElement(element);  // Begin the text block

        const data = "G";
        element = await eb.createNewTextRunWithSize(data, data.length);
        element.setTextMatrixEntries(720, 0, 0, 720, 20, 240);
        var gs = await element.getGState();
        gs.setTextRenderMode(PDFNet.GState.TextRenderingMode.e_fill_stroke_text);
        gs.setLineWidth(4);

        // Set the fill color space to the Pattern color space. 
        gs.setFillColorSpace(await PDFNet.ColorSpace.createPattern());
        var patterColor = await PDFNet.PatternColor.create(await createTilingPattern(doc));
        gs.setFillColorWithPattern(patterColor);

        writer.writeElement(element);
        writer.writeElement(await eb.createTextEnd()); // Finish the text block

        writer.end();	// Save the page
        doc.pagePushBack(page);
        //-----------------------------------------------

        /// The following sample illustrates how to create and use image tiling pattern
        page = await doc.pageCreate();
        writer.beginOnPage(page);

        eb.reset();
        element = await eb.createRect(0, 0, 612, 794);

        // Set the fill color space to the Pattern color space. 
        gs = await element.getGState();
        gs.setFillColorSpace(await PDFNet.ColorSpace.createPattern());
        patterColor = await PDFNet.PatternColor.create(await createImageTilingPattern(doc));
        gs.setFillColorWithPattern(patterColor);
        element.setPathFill(true);

        writer.writeElement(element);

        await writer.end();	// Save the page
        doc.pagePushBack(page);
        //-----------------------------------------------

        /// The following sample illustrates how to create and use PDF shadings
        page = await doc.pageCreate();
        writer.beginOnPage(page);

        eb.reset();
        element = await eb.createRect(0, 0, 612, 794);

        // Set the fill color space to the Pattern color space. 
        gs = await element.getGState();
        gs.setFillColorSpace(await PDFNet.ColorSpace.createPattern());
        patterColor = await PDFNet.PatternColor.create(await createAxialShading(doc));
        gs.setFillColorWithPattern(patterColor);
        element.setPathFill(true);

        writer.writeElement(element);

        await writer.end();	// Save the page
        doc.pagePushBack(page);
        //-----------------------------------------------

        doc.save("../TestFiles/Output/patterns.pdf", PDFNet.SDFDoc.SaveOptions.e_remove_unused);
        console.log("Done. Result saved in patterns.pdf...");
      } catch (err) {
        console.log(err);
      }
    }

    PDFNet.runWithCleanup(main, 0).then(function () { PDFNet.shutdown(); }); // replace with your own license key and remove the license-key.js script tag
  };
  exports.runPatternTest();
})(exports);
  // eslint-disable-next-line spaced-comment
  //# sourceURL=PatternTest.js
close

Free Trial

Get unlimited trial usage of PDFTron SDK to bring accurate, reliable, and fast document processing capabilities to any application or workflow.

Select a platform to get started with your free trial.

Unlimited usage. No email address required.