Skip to content

Element Information

What is iDraw.js's Element

The content of drawing is based on "Element" in iDraw.js. Further more, the process of drawing is basically to realize the function of drawing around the layout, style, content and other attributes of controlling elements.

There eight types of elements are currently supported in iDraw.js :

  1. Text
  2. Rect
  3. Circle
  4. Image
  5. SVG
  6. HTML
  7. Path
  8. Group

Element's Detail

Element Basic Content

tsx
type Element = {
  type: 'text' | 'rect' | 'circle' | 'image' | 'svg' | 'html' | 'path' | 'group';
  uuid: string;
  name?: string;
  x: number;
  y: number;
  w: number;
  h: number;
  angle?: number;
  detail: any; // Different element has different description
  operations?: {
    locked?: boolean;
    invisible?: boolean;
    limitRatio?: boolean;
  };
  extension?: { [key: string]: any } | any;
};

Element Basic Properties

PropertyDescriptionTypeDefaultRequiredOthers
typeElement typetext| rect| circle| image| svg | html-true-
uuidElement unique IDstring-falseThe UUID is automatically added internally in iDraw.js
nameElement namestring-false-
xX-axis offsetnumber-true-
yY-axis offsetnumber-true-
wElement widthnumber-true-
hElement heightnumber-true-
angleElement rotation anglenumber0false[0, 360]
lockedSet the lock-staus of elementbooleanfalsefalseThe view operation cannot be controlled after the element is locked
detailDetail of different elementsobject (Please check the description of each element for details)-true-
operation.lockedSet the locked-staus of elementbooleanfalsefalseThe view operation cannot be controlled after the element is locked
operation.invisible-booleanfalsefalse-
operation.limitRatioLimit element width and height ratioboolean-falseWhen the element is scaled, it is scaled according to its width and height ratio

Usage of Elements

js
import { iDraw } from 'idraw';

import { iDraw } from 'idraw';
const data = {
  elements: [
    {
      type: 'text',
      name: 'rect-001',
      x: 50,
      y: 50,
      w: 200,
      h: 200,
      angle: 0,
      detail: {
        text: 'Hello World',
        color: '#3f51b5',
        fontSize: 60,
        textAlign: 'center',
        borderRadius: 10,
        borderWidth: 2,
        borderColor: '#3f51b5'
      }
    }
  ]
};

const app = document.querySelector('#app');
const idraw = new iDraw(app, {
  width: 600,
  height: 400,
  devicePixelRatio: 2
});

// Set drawing-data for rendering view
idraw.setData(data);

Demo Preview

More Demo >>