Elgato_dark/idraw
1
0
Fork 0
mirror of https://github.com/idrawjs/idraw synced 2026-05-24 10:08:34 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions
A simple JavaScript framework for Drawing on the web.(一个面向Web绘图的JavaScript框架)
467 commits 6 branches 142 tags 19 MiB
TypeScript 98.7%
JavaScript 0.8%
HTML 0.5%
Find a file
chenshenhai e049ff6648 test: update testing of board
2021-12-29 23:11:35 +08:00
.github/workflows chore: update github actions 2021-11-26 21:23:59 +08:00
__tests__ refactor: refactor offset of controller 2021-12-11 10:57:10 +08:00
assets/preview docs: update readme 2021-08-30 17:13:08 +08:00
docs Revert "Revert "docs: update docs"" 2021-08-16 12:47:32 +08:00
packages test: update testing of board 2021-12-29 23:11:35 +08:00
scripts Revert "refactor: rename @idraw/renderer to @idraw/render" 2021-11-29 22:09:16 +08:00
.eslintrc.js fix: idraw options transfer to core 2021-07-23 12:47:58 +08:00
.gitignore fix: idraw options transfer to core 2021-07-23 12:47:58 +08:00
api-extractor.json feat: init project 2021-05-23 20:16:15 +08:00
babel.config.js feat: init project 2021-05-23 20:16:15 +08:00
dev.md chore: update testing script 2021-06-10 12:02:08 +08:00
jest.config.js chore: update jest testing 2021-06-09 14:48:23 +08:00
jest.cover.js chore: update workflows/coverage.yml 2021-09-20 21:18:23 +08:00
lerna.json v0.2.0-alpha.24 2021-12-11 11:02:46 +08:00
LICENSE Initial commit 2021-05-23 19:46:41 +08:00
package.json build: update build script 2021-11-13 16:21:53 +08:00
README.md docs: update readme.md 2021-09-20 21:51:53 +08:00
tsconfig.json chore: update building script 2021-07-23 15:41:20 +08:00

README.md

iDraw.js

iDraw.js is a simple JavaScript framework for Drawing on the web.

一个面向Web绘图的JavaScript框架

idraw.js.org

CI Version License

@idraw/studio Preview

The preview of @idraw/studo. Click here to get it.

Install

npm i idraw

Getting Started

Common

import iDraw from 'idraw';

const idraw = new iDraw(
  document.querySelector('#app'),
  {
    width: 600,
    height: 400,
    contextWidth: 600,
    contextHeight: 400,
    devicePixelRatio: 1,
  }
);
idraw.addElement({
  name: "rect-1",
  x: 140,
  y: 120,
  w: 200,
  h: 100,
  type: "rect",
  desc: {
    bgColor: "#f7d3c1",
    borderRadius: 20,
    borderWidth: 4,
    borderColor: "#ff6032",
  },
});

React

import iDraw from 'idraw';
import { useEffect, useRef } from 'react';

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

  return (
    <div ref={ref}></div>
  )
}

Vue

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

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

onMounted(() => {
  const idraw = new iDraw(mount.value, {
    width: 600,
    height: 400,
    contextWidth: 600,
    contextHeight: 400,
    devicePixelRatio: 1,
  });
  idraw.addElement({
    name: "rect-001",
    x: 140,
    y: 120,
    w: 200,
    h: 100,
    type: "rect",
    desc: {
      bgColor: "#f7d3c1",
      borderRadius: 20,
      borderWidth: 4,
      borderColor: "#ff6032",
    },
  })
})
</script>

Contributing

We appreciate your help!

To contribute, please follow the steps: