我要入驻
iDraw.js——基于Canvas的前端绘图JavaScript框架
发布自: lowcoder
时间: 2021-9-16
433人围观
开源项目

lowcode开发者社区

iDraw.js简介


  • 一个基于纯Canvas来实现绘图和操控素材能力的JavaScript库
  • 可以基于 iDraw.js 进行扩展自定义开发各种可视化操控应用

iDraw.js有哪些功能


  • 支持绘制文字、矩形、圆形、图片、HTML片段和SVG片段 绘图元素
  • 绘制文字

  • 绘制矩形


  • 绘制圆形

  • 绘制图片


  • 绘制HTML片段


  • 绘制SVG片段


  • 支持基于Canvas的可视化操作

iDraw.js有哪些特点


  • 可以绘制文字、矩形、圆形、图片、HTML片段和SVG文件,并且作为绘图元素。
  • 可以直接在Canvas操控以上绘图元素,不用担心CSS和DOM变化的污染问题。
  • Canvas操控绘制,并且是所见即所得可以直接导出绘制的图片结果。
  • 由于可视化操控和图片生成都是基于Canvas,可以尽量减少绘图的浏览器兼容问题。

原理介绍

  • 基于数据驱动来绘制Canvas的图画
  • 基于 requestAnimationFrame 来控制数据变化时候,Canvas的重绘处理
  • 内置一个前端并发队列来处理 图片、HTML和SVG的图片化转换渲染

实际使用案例

  • 一个基于 iDraw.js 实现的UI可视化绘图
  • @idraw/studio 的实现

点个赞支持一下?

评论
我要评论
评论