Package Exports

janvas

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (janvas) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Janvas

A lightweight&simple 2D javascript library based on HTML5 Canvas.

一款轻量、简单的 2d JavaScript 绘图库，基于 HTML5 Canvas 2d 绘图上下文，使用寄生组合式继承，完全面向对象方式开发，不仅便于拓展，拥有极佳的 灵活度 和超越原生 canvas API 开发的性能，更是 渐进迭代式 开发的绝佳选择。

Janvas 目前能做

高度定制化图表
可视化大屏
特效
物理模拟
数学可视化
游戏
其他 janvas 能做的都能做（笑

Janvas 的特点

简单，要什么就 new 出来；
高效，比原生 API 开发更快（几乎没有比它更快的了）；
易用，图形变形 getMatrix().set...()，样式 getStyle().set...()；
强大，原生绘制、SVG Path 支持、坐标点等等计算的支持；
兼容，只需一个容器 div，不管它在哪里，janvas 都能精准地填充它并适配高分屏。

Janvas 示例

About AntV Performance Test

原示例：https://g6.antv.vision/zh/examples/performance/perf#moreData，如其所说：

对 G6 的性能测试，用来验证 G6 能够承载的数据量，分别使用 5000+ 图元、将近 20000 图元及 50000+ 图元的示例进行了测试，从结果来看，20000 左右图元时，G6 是可以正常交互的，当数据量达到 50000+ 时，交互就会出现一定的卡顿，但对于绝大部分业务来说，都不建议在画布上展示如此多的数据，具体的做法可以参考 AntV G6 团队的大图可视化方案，预计 1122 发布

而使用 janvas 从低抽象角度来定制，数据量即使达到 50000+ 时，依然可以缩放、拖曳以及自定义更多交互。

Hello World

与既有 Canvas 项目整合
1. <canvas></canvas>
2. <script src="janvas.min.js"></script>
3. var ctx = document.querySelector("canvas").getContext("2d");
4. var text = new janvas.Text(ctx, 50, 50, "Hello World"); // new 一个文本
5. text.fill(); // 文本绘制
使用 janvas.Canvas 开发

<body>

<div id="app" style="width: 100%;height: 100%;"></div>

<script src="../dist/janvas.min.js"></script>
<script>
  // 在 div 容器 中央绘制 "HelloWorld"
  var helloWorld = new janvas.Canvas({
    container: "#app", // 找到容器 id
    methods: {
      init: function () { // 初始化
        this.text = new janvas.Text(this.ctx, 0, 0, "HelloWorld"); // new 一个 Text
        this.text.getStyle().setFont("small-caps bold 128px courier")
          .setTextAlign("center").setTextBaseline("middle"); // 给 Text 设置样式
      },
      draw: function () {
        this.text.fill(); // 让 Text 进行绘制
      }
    },
    events: {
      resize: function () { // 添加 resize 事件监听
        this.text.initXY(this.width / 2, this.height / 2); // 置于中间
        this.draw(); // 绘制一次
      }
    }
  });
</script>

</body>

使用 npm 安装，在 vue 中使用
1. npm install janvas --save
2. <div ref="container"></div>
3. import janvas from "janvas"
4. ...如下

mounted() {
  // 在 div 容器 中央绘制 "HelloWorld"
  const helloWorld = new janvas.Canvas({
    container: this.$refs.container, // 找到容器的引用
    methods: {
      init: function () { // 初始化
        this.text = new janvas.Text(this.ctx, 0, 0, "HelloWorld"); // new 一个 Text
        this.text.getStyle().setFont("small-caps bold 128px courier")
          .setTextAlign("center").setTextBaseline("middle"); // 给 Text 设置样式
      },
      draw: function () {
        this.text.fill(); // 让 Text 进行绘制
      }
    },
    events: {
      resize: function () { // 添加 resize 事件监听
        this.text.initXY(this.width / 2, this.height / 2); // 置于中间
        this.draw(); // 绘制一次
      }
    }
  });
}

TaiChi

太极图可由外圆，左半圆，右半圆，上下中小圆，一共 7 个圆形组成，不到两百行代码构建太极屏保，包含旋转、渐变、碰撞检测等。

SVG Support

依据 svg 数据生成的组合图形仍然具有范围检测、样式自定义及矩阵变形的功能。

Clock

秒针使用了 janvas 中自带的高阶贝塞尔曲线实现动画，阴影偏移量随时间偏移。

BezierMaker

鼠标点击生成一个数据点
鼠标右键拖曳所有数据点
响应键盘 wasd/方向键控制节点位置
响应键盘 q/e 切换当前节点
响应键盘 Delete 删除节点
响应 Enter 从控制台打印原始数据点与计算后的数据点

FlyDots

使用 janvas 简单轻松绘制的不算特效的特效。

AboutWheel

缩放公式：target = event + (source - event) * scale / lastScale;

在 janvas 中读取一张 SVG 图片，并随时间旋转，随鼠标响应范围检测并拖曳，随滚轮实现无损缩放的示例。

AboutEdge

v2.1.0 新增绘制连线的 Edge 类，实现了图数据库中的连线的样式。

源代码

从一开始 janvas 本只想以最简洁的方式应用到项目中，所以没有以 npm 方式管理包，之后有需求与精力再重写。

目前 janvas.min.js 仅使用 uglifyjs --compress 简单压缩无任何混淆。

文档

Utils

Rgb

Hsl

Matrix

FillStrokeStyle

TextStyle

ShapeStyle

ShadowStyle

OtherStyle

Point

Collision

Config

ImgData

目前对于 ImageData 的处理都挂载在 ImgData 类上，后续如有需求可能会考虑改写静态方法，改写成挂载在 ImageData.prototype 上。

Animate

AnimateITV

AnimateRAF

BasicShape

Shape

Rect

RoundRect

Image

janvas 中加载一张图片非常容易：var img = new janvas.Image(ctx, 0, 0, src);。

janvas.Image 会自动加载图片并进行一次绘制，如果已经存在了图片，可以使用 img.setImage(img) 来设置其图片。

Arc

Sector

Ellipse

Line

BezierLine

Edge

ArrowHead

Arrow

RegularPolygon

RegularStar

Text

DotShape

Polyline

Bezier

Polygon

PolyRect

PolyArc

SmoothLine

Dots

FixedShape

FixedRect

FixedArc

Canvas

...

挂载在 janvas.Canvas 上的 components，如 factory: (function () {...}()) 为立即调用函数表达式(IIFE, Immediately-invoked function expressions)，返回一个会被默认挂载 $ctx/$cfg 的工厂对象，这意味着仅一次编写好的组件完全可以在不同的 janvas.Canvas 框架下复用。

特殊说明（不重要）

为了便于进行样式的判断，janvas 在绘制的过程中在绘图上下文 ctx 上相对应的挂载用于读写的属性值，如 ctx.fillStyle 则会挂载一个 ctx.CURRENT_FILL_STYLE。如果使用过 clip/clipEvenOdd/clear/clearEvenOdd 这种唯一使用过 ctx.save() 的方法，会额外挂载 ctx._CURRENT_FILL_STYLE 用于回退样式。
为了仅使用一次 transform 进行变换，janvas 可能时时刻刻都在进行坐标系变换，并在 ctx 上挂载 m11/m11i 等值（若如上用过 ctx.save() 会挂载 _m11/_m11i 等值），所以如果需与原生融合开发（不太推荐），需在 ** janvas** 代码的前后使用 ctx.save() 和 ctx.restore() 来确保变换和样式的还原。

License

MIT