logo

G

  • 教程
  • API
  • 示例
  • 插件
  • 所有产品antv logo arrow
  • 6.1.26
  • 插件系统介绍
  • 插件结构
  • g-plugin-a11y
  • g-plugin-annotation
  • g-plugin-box2d
  • g-plugin-gpgpu
  • g-plugin-matterjs
  • g-plugin-yoga
  • g-plugin-css-select
  • g-plugin-3d
  • g-plugin-device-renderer
  • g-plugin-canvas-renderer
  • g-plugin-canvaskit-renderer
  • g-plugin-rough-canvas-renderer
  • g-plugin-rough-svg-renderer
  • g-plugin-canvas-path-generator
  • g-plugin-canvas-picker
  • g-plugin-svg-renderer
  • g-plugin-svg-picker
  • g-plugin-dom-interaction
  • g-plugin-dragndrop
  • g-plugin-control

g-plugin-canvas-renderer

上一篇
g-plugin-device-renderer
下一篇
g-plugin-canvaskit-renderer

资源

Ant Design
Galacea Effects
Umi-React 应用开发框架
Dumi-组件/文档研发工具
ahooks-React Hooks 库

社区

体验科技专栏
seeconfSEE Conf-蚂蚁体验科技大会

帮助

GitHub
StackOverflow

more products更多产品

Ant DesignAnt Design-企业级 UI 设计语言
yuque语雀-知识创作与分享工具
EggEgg-企业级 Node 开发框架
kitchenKitchen-Sketch 工具集
GalaceanGalacean-互动图形解决方案
xtech蚂蚁体验科技
© Copyright 2025 Ant Group Co., Ltd..备案号:京ICP备15032932号-38

Loading...

提供基于 Canvas2D 的渲染能力。

安装方式

g-canvas 渲染器默认内置,因此无需手动引入。

import { Renderer as CanvasRenderer } from '@antv/g-canvas';
// 创建 Canvas 渲染器,其中内置了该插件
const canvasRenderer = new CanvasRenderer();

扩展点

StyleRenderer

在使用 CanvasRenderingContext2D 渲染基础图形时,在使用 g-plugin-canvas-path-generator 生成图形路径之后,实现该接口即可完成绘制样式。

export interface StyleRenderer {
render: (
context: CanvasRenderingContext2D,
parsedStyle: ParsedBaseStyleProps,
object: DisplayObject,
renderingService: RenderingService,
) => void;
}

我们为不同类型的图形提供了不同的扩展点。例如在 g-plugin-rough-canvas-renderer 中,我们使用 rough.js 提供的 API 为 Circle 增加手绘风格的样式:

@singleton({
token: CanvasRenderer.CircleRendererContribution,
})
export class CircleRenderer implements CanvasRenderer.StyleRenderer {
render(
context: CanvasRenderingContext2D,
parsedStyle: ParsedCircleStyleProps,
object: DisplayObject<any, any>,
) {
const { r } = parsedStyle as ParsedCircleStyleProps;
// rough.js use diameter instead of radius
// @see https://github.com/rough-stuff/rough/wiki#circle-x-y-diameter--options
context.roughCanvas.circle(r.value, r.value, r.value * 2, generateRoughOptions(object));
}
}