Search results

BackgroundModel

Interface for a class Background

Properties

align

string

Defines how to align the background image over the diagram area.

  • None - Alignment value will be set as none
  • XMinYMin - smallest X value of the view port and smallest Y value of the view port
  • XMidYMin - midpoint X value of the view port and smallest Y value of the view port
  • XMaxYMin - maximum X value of the view port and smallest Y value of the view port
  • XMinYMid - smallest X value of the view port and midpoint Y value of the view port
  • XMidYMid - midpoint X value of the view port and midpoint Y value of the view port
  • XMaxYMid - maximum X value of the view port and midpoint Y value of the view port
  • XMinYMax - smallest X value of the view port and maximum Y value of the view port
  • XMidYMax - midpoint X value of the view port and maximum Y value of the view port
  • XMaxYMax - maximum X value of the view port and maximum Y value of the view port

color

string

Defines the background color of diagram

scale

string

Defines how the background image should be scaled/stretched

  • None - Scale value will be set as None for the image
  • Meet - Scale value Meet will be set for the image
  • Slice - Scale value Slice will be set for the image

source

string

Defines the source of the background image

<div id='diagram'></div>
let background: BackgroundModel = { source: 'https://www.w3schools.com/images/w3schools_green.jpg',
scale: 'Slice', align: 'XMinYMin' };
let diagram: Diagram = new Diagram({
...
pageSettings: {  width: 800, height: 600, orientation: 'Landscape',
background: background },
...
});
diagram.appendTo('#diagram');