I2Djs-v3
  • Introduction to I2Djs
  • Getting Started
    • Installation
    • Quick Start
    • Resources
  • Guide
    • Canvas: Create-animate
    • SVG: Create-animate
    • WebGL: Create-animate
    • Data Join-Action
    • Animation-Chaining
    • Canvas: Textures & Sprite animation
    • Canvas: Heatmap
    • WebGL: Heatmap
    • WebGL: Custom Shaders
    • Canvas: GeoWorld Map with D3 modules
    • Canvas: Clipping, Masking, Pattern
    • SVG: Clipping, Masking, Pattern
    • I2Djs + Physics Engine - MatterJs
  • API Reference
    • Layers
      • Canvas Layer
      • SVG Layer
      • WebGL Layer
    • Elements API
    • Canvas additional features
    • WebGL additional features
      • Custom Shader
      • Geometry
      • Render Target
      • Texture Object
    • Join Action
    • Animation
    • Chaining
    • Path
    • Events
    • Behaviour
      • Zoom and Pan
      • Drag
  • Examples
    • Canvas
    • SVG
    • WebGL
Powered by GitBook
On this page

Was this helpful?

  1. API Reference

Path

The path is the most powerful element in a graphical context, using which any complex or basic permeative shape can be defined. I2Djs Path provides a set of methods that are used to build or interpret the path. It follows the SVG Path syntax definition. It is compatible across I2Ds SVG and Canvas renderers.

The path is available as a part of I2D Object space.

It can be imported as below.

import {path} from 'i2djs';

API

Path Instance creation:

var pathInstance = i2d.path()

#.m(absoluteflag, point);

pathInstance.m(true, { x: 0, y: 0 })

#.h(absoluteflag, point);

pathInstance.h(true, { x: 100 });

#.v(absoluteflag, point);

pathInstance.v(true, { y: 100 })

#.l(absoluteflag, point);

pathInstance.l(true, {x : 100, y: 100 });

#.c(absoluteflag, ctrl1, ctrl2, point);

pathInstance.c(true, {x : 50, y: 0 }, {x : 0, y: 50 }, {x : 100, y: 100 });

#.q(absoluteflag, ctrl1, point);

pathInstance.q(true, {x : 0, y: 50 }, {x : 100, y: 100 });

#.s(absoluteflag, ctrl2, point);

pathInstance.s(true, {x : 50, y: 0 }, {x : 50, y: 0 }, {x : 100, y: 100 })

#.a(absoluteflag, rx, ry, xRotation, arcLargeFlag, sweepFlag, point);

pathInstance.a(true, 0, 0, 2.1, true, false, {x : 100, y: 100 });

#.z();

pathInstance.z();

#.parse(Pathstring);

pathInstance.parse("M150 0 L75 200 L225 200 Z");

#.fetchPathString();

pathInstance.fetchPathString();

#.getTotalLength();

#.getPointAtLength();

#.isValid();

PreviousChainingNextEvents

Last updated 4 years ago

Was this helpful?