opendraw v1.0.8

• Documents | 中文文档
• Online Playground | 在线 API 示例
• Online Editor | 在线绘图演示

Sponsors

opendraw.js is an MIT-licensed open source project with its ongoing development made possible entirely by the support of these awesome backers. If you'd like to join them, please consider sponsoring opendraw's development.

@opendraw/editor Preview

The preview of @opendraw/editor. Click here to get it.

Install

npm i opendraw

Getting Started

Common

import { opendraw } from 'opendraw';

const opendraw = new openDraw(document.querySelector('#app'), {
  width: 600,
  height: 400,
  devicePixelRatio: 1
});
opendraw.addElement({
  name: 'rect-1',
  x: 140,
  y: 120,
  w: 200,
  h: 100,
  type: 'rect',
  detail: {
    background: '#f7d3c1',
    borderRadius: 20,
    borderWidth: 4,
    borderColor: '#ff6032'
  }
});

React

import { openDraw } from 'opendraw';
import { useEffect, useRef } from 'react';

function Demo() {
  const ref = useRef(null);
  useEffect(() => {
    const opendraw = new openDraw(ref.current, {
      width: 600,
      height: 400,
      devicePixelRatio: 1
    });
    opendraw.addElement({
      name: 'rect-001',
      x: 140,
      y: 120,
      w: 200,
      h: 100,
      type: 'rect',
      detail: {
        background: '#f7d3c1',
        borderRadius: 20,
        borderWidth: 4,
        borderColor: '#ff6032'
      }
    });
  }, []);

  return <div ref={ref}></div>;
}

Vue

<template>
  <div ref="mount"></div>
</template>

<script setup>
  import { openDraw } from 'opendraw';
  import { ref, onMounted } from 'vue';
  const mount = ref();

  onMounted(() => {
    const opendraw = new openDraw(mount.value, {
      width: 600,
      height: 400,
      devicePixelRatio: 1
    });
    opendraw.addElement({
      name: 'rect-001',
      x: 140,
      y: 120,
      w: 200,
      h: 100,
      type: 'rect',
      detail: {
        background: '#f7d3c1',
        borderRadius: 20,
        borderWidth: 4,
        borderColor: '#ff6032'
      }
    });
  });
</script>

Contributing

We appreciate your help!

To contribute, please follow the steps:

• git clone git@github.com:longzhoufeng/opendraw.git
• cd opendraw
• pnpm i
• npm run dev