Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

zrender

Package Overview
Dependencies
Maintainers
18
Versions
76
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

zrender

A lightweight graphic library providing 2d draw for Apache ECharts

  • 5.6.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
991K
increased by4.11%
Maintainers
18
Weekly downloads
 
Created

What is zrender?

zrender is a lightweight canvas library that provides a powerful and flexible way to create and manipulate 2D graphics. It is often used as a rendering engine for the ECharts library, but it can also be used independently for custom graphics and animations.

What are zrender's main functionalities?

Basic Shapes

This feature allows you to create basic shapes like circles, rectangles, and lines. The code sample demonstrates how to create a red circle and add it to the canvas.

const zrender = require('zrender');
const zr = zrender.init(document.getElementById('main'));
const circle = new zrender.Circle({
  shape: {
    cx: 150,
    cy: 150,
    r: 50
  },
  style: {
    fill: 'red'
  }
});
zr.add(circle);

Animations

This feature allows you to animate shapes. The code sample demonstrates how to animate a rectangle moving from one position to another over a duration of 1000 milliseconds.

const zrender = require('zrender');
const zr = zrender.init(document.getElementById('main'));
const rect = new zrender.Rect({
  shape: {
    x: 50,
    y: 50,
    width: 100,
    height: 100
  },
  style: {
    fill: 'blue'
  }
});
zr.add(rect);
rect.animate('shape', true)
  .when(1000, { x: 200 })
  .start();

Event Handling

This feature allows you to handle events like click, mouseover, and mouseout on shapes. The code sample demonstrates how to add a click event listener to a circle that shows an alert when the circle is clicked.

const zrender = require('zrender');
const zr = zrender.init(document.getElementById('main'));
const circle = new zrender.Circle({
  shape: {
    cx: 150,
    cy: 150,
    r: 50
  },
  style: {
    fill: 'green'
  }
});
zr.add(circle);
circle.on('click', function () {
  alert('Circle clicked!');
});

Other packages similar to zrender

Keywords

FAQs

Package last updated on 17 Jun 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc