{"id":13445712,"url":"https://github.com/idrawjs/idraw","last_synced_at":"2025-05-16T11:05:54.039Z","repository":{"id":40504738,"uuid":"370038359","full_name":"idrawjs/idraw","owner":"idrawjs","description":"A simple JavaScript framework for Drawing on the web.(一个面向Web绘图的JavaScript框架)","archived":false,"fork":false,"pushed_at":"2025-05-11T12:55:06.000Z","size":18012,"stargazers_count":1036,"open_issues_count":0,"forks_count":83,"subscribers_count":8,"default_branch":"main","last_synced_at":"2025-05-12T18:17:27.099Z","etag":null,"topics":["2d","canvas","design","draw","drawing","fabric","fabricjs","figma","graph","graphics","idraw","idraw-studio","idrawjs","idrawjs-editor","konva","konvajs","photoshop","pixijs","sketch"],"latest_commit_sha":null,"homepage":"https://idrawjs.com/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/idrawjs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-05-23T11:46:41.000Z","updated_at":"2025-05-11T12:53:20.000Z","dependencies_parsed_at":"2024-01-06T04:26:21.446Z","dependency_job_id":"6d2f2026-f799-497e-9ff4-fbbb87d479ee","html_url":"https://github.com/idrawjs/idraw","commit_stats":{"total_commits":786,"total_committers":2,"mean_commits":393.0,"dds":"0.0012722646310432406","last_synced_commit":"bfc9df4b720bd4fe847bbe9e8002ca88409ff4d2"},"previous_names":[],"tags_count":133,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/idrawjs%2Fidraw","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/idrawjs%2Fidraw/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/idrawjs%2Fidraw/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/idrawjs%2Fidraw/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/idrawjs","download_url":"https://codeload.github.com/idrawjs/idraw/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254010828,"owners_count":21999004,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["2d","canvas","design","draw","drawing","fabric","fabricjs","figma","graph","graphics","idraw","idraw-studio","idrawjs","idrawjs-editor","konva","konvajs","photoshop","pixijs","sketch"],"created_at":"2024-07-31T05:00:38.231Z","updated_at":"2025-05-16T11:05:49.023Z","avatar_url":"https://github.com/idrawjs.png","language":"TypeScript","readme":"\u003cp align=\"center\"\u003e\n  \u003cimg width=\"200\" src=\"https://github.com/idrawjs/idraw/assets/8216630/bcf8fbc6-6374-4cb9-a67f-1687d029a863\" alt=\"iDraw.js Logo\" /\u003e\n\u003c/p\u003e\n\n\n\u003ch1 align=\"center\"\u003eiDraw.js\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003eiDraw.js is a simple JavaScript framework for Drawing on the web.\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e一个面向Web绘图的JavaScript框架\u003c/p\u003e\n\n\n\u003cp align=\"center\"\u003e\u003ca href=\"https://idrawjs.com\"\u003eidrawjs.com\u003c/a\u003e\u003c/p\u003e\n\n\n\n\u003cp align=\"center\"\u003e\n\n  \u003ca title=\"CI\" href=\"https://github.com/idrawjs/idraw/actions/workflows/node.js.yml\"\u003e\n    \u003cimg src=\"https://github.com/idrawjs/idraw/actions/workflows/node.js.yml/badge.svg?branch=main\" alt=\"CI\"\u003e\n  \u003ca\u003e\n\n  \u003c!-- \u003ca href=\"https://codecov.io/gh/idrawjs/idraw\"\u003e\n    \u003cimg src=\"https://codecov.io/gh/idrawjs/idraw/branch/main/graph/badge.svg?token=MICIC9SCKY\"/\u003e\n  \u003c/a\u003e --\u003e\n    \n  \u003ca href=\"https://www.npmjs.com/package/idraw\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/idraw.svg?sanitize=idraw\" alt=\"Version\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/idraw\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/l/idraw.svg?sanitize=true\" alt=\"License\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\n\n\u003c!-- [![Node.js CI](https://github.com/idrawjs/idraw/actions/workflows/node.js.yml/badge.svg?branch=main)](https://github.com/idrawjs/idraw/actions/workflows/node.js.yml) --\u003e\n\n\u003chr/\u003e\n\n\n- [Documents](https://idrawjs.com/docs/en-US/) | [中文文档](https://idrawjs.com/docs/zh-CN/) \n- [Online Playground](https://idrawjs.com/playground/) | [在线API示例](https://idrawjs.com/playground/)\n- [Online Studio](https://idrawjs.com/studio/) | [在线绘图演示](https://idrawjs.com/studio/)\n \n\n## Sponsors\n\niDraw.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 iDrawjs's development](https://opencollective.com/idrawjs).\n\n[![Become a Backer](https://opencollective.com/idrawjs/tiers/backers.svg?avatarHeight=48)](https://opencollective.com/idrawjs)\n\n\n## @idraw/studio Preview\n\nThe preview of `@idraw/studo`. Click [here](https://github.com/idrawjs/studio) to get it.\n\n\u003cp align=\"center\"\u003e\n\n  \u003cimg width=\"700\" alt=\"idraw-studio-light-theme\" src=\"https://github.com/idrawjs/studio/assets/8216630/8a49bab8-1e4a-44dd-9836-b6ce3861aaea\" /\u003e\n\n  \u003cimg width=\"700\" alt=\"idraw-studio-dark-theme\" src=\"https://github.com/idrawjs/studio/assets/8216630/479fce0b-891f-47f2-ace8-d91580e68b4b\" /\u003e\n\n\u003c/p\u003e\n\n\n\n\n## Install\n\n```\nnpm i idraw\n```\n\n## Getting Started\n\n### Common\n\n```js\nimport { iDraw } from 'idraw';\n\nconst idraw = new iDraw(\n  document.querySelector('#app'),\n  {\n    width: 600,\n    height: 400,\n    devicePixelRatio: 1,\n  }\n);\nidraw.addElement({\n  name: \"rect-1\",\n  x: 140,\n  y: 120,\n  w: 200,\n  h: 100,\n  type: \"rect\",\n  detail: {\n    background: \"#f7d3c1\",\n    borderRadius: 20,\n    borderWidth: 4,\n    borderColor: \"#ff6032\",\n  },\n});\n```\n\n### React\n\n```jsx\nimport { iDraw } from 'idraw';\nimport { useEffect, useRef } from 'react';\n\nfunction Demo() {\n  const ref = useRef(null);\n  useEffect(() =\u003e {\n    const idraw = new iDraw(ref.current, {\n      width: 600,\n      height: 400, \n      devicePixelRatio: 1,\n    });\n    idraw.addElement({\n      name: \"rect-001\",\n      x: 140,\n      y: 120,\n      w: 200,\n      h: 100,\n      type: \"rect\",\n      detail: {\n        background: \"#f7d3c1\",\n        borderRadius: 20,\n        borderWidth: 4,\n        borderColor: \"#ff6032\",\n      },\n    })\n  }, []);\n\n  return (\n    \u003cdiv ref={ref}\u003e\u003c/div\u003e\n  )\n}\n```\n\n### Vue\n\n```html\n\u003ctemplate\u003e\n  \u003cdiv ref=\"mount\"\u003e\u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript setup \u003e\nimport { iDraw } from 'idraw';\nimport { ref, onMounted } from 'vue'\nconst mount = ref();\n\nonMounted(() =\u003e {\n  const idraw = new iDraw(mount.value, {\n    width: 600,\n    height: 400, \n    devicePixelRatio: 1,\n  });\n  idraw.addElement({\n    name: \"rect-001\",\n    x: 140,\n    y: 120,\n    w: 200,\n    h: 100,\n    type: \"rect\",\n    detail: {\n      background: \"#f7d3c1\",\n      borderRadius: 20,\n      borderWidth: 4,\n      borderColor: \"#ff6032\",\n    },\n  })\n})\n\u003c/script\u003e\n```\n\n\n## Contributing\n\nWe appreciate your help!\n\nTo contribute, please follow the steps:\n \n\n- `git clone git@github.com:idrawjs/idraw.git`\n- `cd idraw`\n- `pnpm i`\n- `npm run dev`\n \n ","funding_links":["https://opencollective.com/idrawjs"],"categories":["Libraries"],"sub_categories":["Graph Editing"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fidrawjs%2Fidraw","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fidrawjs%2Fidraw","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fidrawjs%2Fidraw/lists"}