A canvas library which providing 2d draw for G2.
npm i @antv/g
$ git clone git@github.com:antvis/g.git
$ npm install
$ npm run dev
var canvas = new Canvas({
containerId: 'c1',
width: 500,
height: 600
});
var group = canvas.addGroup();
var shape = group.addShape('circle', {
attrs: {
x: 100,
y: 100,
r: 50,
fill: 'red'
}
});
canvas.draw();
shape.attr({
x: 200,
y: 200
});
canvas.draw();
G 作为 G2、G6 的绘图引擎，主要包括的类：
var canvas = new Canvas({
containerId: 'c1',
width: 500,
height: 600
});
get(name) 获取属性
set(name, value) 设置属性
draw 绘制方法
addShape(type, cfg) 添加图形，支持的图形类型见 Shape
canvas.addShape('circle', {
zIndex: 5,
attrs: {
x: 10,
y: 10,
r: 50
}
});
addGroup([GroupClass], cfg) 添加分组
var group = canvas.addGroup(); // 添加分组
var group1 = canvas.addGroup(AGroup, {
// 属性
});
getPointByClient(clientX, clientY) 根据窗口的位置获取画布上的位置信息
changeSize(w,h) 改变大小
sort() 对内部图形元素进行排序，根据图形元素的 zIndex 进行排序
clear() 清空画布
destroy() 销毁
on(eventType, callback) 绑定事件，支持浏览器的常见事件：click, dblclick, mouseenter, mouseleave, mouseover, mouseup, mousedown, touchstart, touchend
off(eventType, callback) 解除绑定
图形分组可以嵌套图形和分组
get(name) 获取属性
set(name, value) 设置属性
setSilent(name, value) 由于 set 方法进行一些检测，会执行一些方法，所以可以使用这个方法提升函数性能
addShape(type, cfg) 添加图形， 支持的图形类型见 Shape
group.addShape('circle', {
zIndex: 5,
attrs: {
x: 10,
y: 10,
r: 50
}
});
addGroup([GroupClass], cfg) 添加分组
var g1 = group.addGroup(); // 添加分组
var g2 = group.addGroup(AGroup, {
// 属性
});
getBBox() 获取包含的所有图形的包围盒
show() 显示
hide() 隐藏
remove() 从父容器中移除当前分组
sort() 对内部图形元素进行排序，根据图形元素的 zIndex 进行排序
clear() 清空画布
destroy() 销毁
find(fn) 在当前group中递归查找满足fn的shape或group
findAll(fn) 在当前group中递归查找所有满足fn的shape和group
findById(id) 在当前group中递归查找id匹配的shape或group
findBy(fn) 接口已废弃
find(id) 接口已废弃
支持的所有图形的基类，支持的所有通用的属性和方法
attr('name', [value]) 设置、获取图形属性
circle.attr({ // 同时设置多个属性
x: 100,
y: 100,
fill: '#fff'
});
circle.attr('fill', 'red'); // 设置单个属性
circle.attr('fill'); // 获取属性
animate(attrs, duration, easing, callback, delay = 0) 执行动画
getBBox() 获取图形的包围盒
show() 显示
hide() 隐藏
remove() 从父容器中移除当前图形
destroy() 销毁
圆，一般在添加图形时使用 'circle' 来标识, type = 'circle'
canvas.addShape('circle', {
attrs: {
x: 150,
y: 150,
r: 70,
stroke: 'black'
}
});
canvas.addShape('circle', {
attrs: {
x: 100,
y: 100,
r: 60,
lineDash: [20, 20],
stroke: 'red'
}
});
canvas.addShape('circle', {
attrs: {
x: 100,
y: 100,
r: 100,
fill: 'rgba(129,9,39,0.5)',
stroke: 'blue'
}
});
canvas.draw();
绘制矩形，type = 'rect'
canvas.addShape('rect', {
attrs: {
x: 150,
y: 150,
width: 150,
height: 150,
stroke: 'black',
radius: 2
}
});
canvas.addShape('rect', {
attrs: {
x: 150-50,
y: 150-50,
width: 150,
height: 150,
stroke: 'red'
}
});
canvas.addShape('rect', {
attrs: {
x: 150+50,
y: 150+50,
width: 150,
height: 150,
fill: 'rgba(129,9,39,0.5)',
stroke: 'blue'
}
});
绘制的路径 ,使用 'path' 来标识, type = 'path'
通用的图形属性见：绘图属性
path：路径，支持 字符串或者数组两种方式，详情参考 svg path
arrow 箭头设置
canvas.addShape('path', {
attrs: {
startArrow: {
path: 'M 10,0 L -10,-10 L -10,10 Z',
d: 10
}
}
});
const path = group.addShape('path', {
attrs: {
path: 'M100,600' +
'l 50,-25' +
'a25,25 -30 0,1 50,-25' +
'l 50,-25' +
'a25,50 -30 0,1 50,-25' +
'l 50,-25' +
'a25,75 -30 0,1 50,-25' +
'l 50,-25' +
'a25,100 -30 0,1 50,-25' +
'l 50,-25' +
'l 0, 200,' +
'z',
lineWidth: 10,
lineJoin: 'round',
stroke: '#54BECC'
}
});
const path1 = group.addShape('path', {
attrs: {
path: [['M', 100, 100], ['L', 200, 200]],
stroke: 'red',
lineWidth: 2
}
});
绘制直线, type = 'line'，可以使用 path 来代替，
canvas.addShape('line', {
attrs: {
startArrow: new Marker({
attrs: { ... }
})
}
});
canvas.addShape('line', {
attrs: {
x1: 20,
y1: 20,
x2: 280,
y2: 280,
stroke: 'red' // 颜色名字
}
});
canvas.addShape('line', {
attrs: {
x1: 20,
y1: 300 + 20,
x2: 280,
y2: 300 + 280,
startArrow: true,
endArrow: true, // 显示箭头
stroke: '#00ff00' // 6位十六进制
}
});
canvas.addShape('line', {
attrs: {
x2: 300 + 20,
y2: 300 + 20,
x1: 300 + 280,
y1: 300 + 280,
startArrow: true,
endArrow: true, // 显示箭头
stroke: '#00f' // 3位十六进制
}
});
canvas.addShape('line', {
attrs: {
x1: 20,
y1: 600 + 20,
x2: 280,
y2: 600 + 280,
lineDash: [10,10],
stroke: 'rgb(100, 100, 200)' // rgb数字模式
}
});
多个点的折线，type = 'polyline'
canvas.addShape('polyline', {
attrs: {
points: [[741.6487813219777,1183.92131359719],[583.1709046233477,33.93352498571885],[1098.3455104904451,246.13363066051957],[211.30437444177633,420.3306748934016],[980.3732054245157,756.2252762234709],[374.28495603818607,108.15975006182006],[422.7940564389682,1119.2144105552136],[833.5078092462321,586.7198136138784]],
stroke: 'red'
}
});
绘制图片，type = 'image'
canvas.addShape('image', {
attrs: {
x: 150+200,
y: 150,
img: 'https://zos.alipayobjects.com/rmsportal/FDWrsEmamcNvtEf.png'
}
});
canvas.addShape('image', {
attrs: {
x: 150-50,
y: 150-50,
img: 'https://zos.alipayobjects.com/rmsportal/nAVchPnSaAWncPj.png'
}
});
canvas.addShape('image', {
attrs: {
x: 150+50,
y: 150+150,
img: 'https://zos.alipayobjects.com/rmsportal/GHGrgIDTVMCaYZT.png'
}
});
文本，type = 'text'
注意：文本的颜色一般使用 fill 属性，而非 'stroke' 属性
canvas.addShape('text', {
attrs: {
x: 150,
y: 150,
fontFamily: 'PingFang SC',
text: '文本文本',
fontSize: 90,
stroke: 'black'
}
});
canvas.addShape('text', {
attrs: {
x: 150+100,
y: 250,
fontFamily: 'PingFang SC',
fontSize: 90,
text: '字体',
lineDash: [10, 10],
stroke: 'red'
}
});
canvas.addShape('text', {
attrs: {
x: 150+50,
y: 150+150,
text: '对齐方式',
fontFamily: 'Hiragino Sans GB',
fontSize: 100,
textAlign: 'center',
textBaseline: 'top',
fill: 'rgba(129,9,39,0.5)',
stroke: 'blue'
}
});
G 还提供了几个特殊的 Shape
这些图形都可以使用 path 代替，所以在这里不详细介绍了
FAQs
A core module for rendering engine implements DOM API.
The npm package @antv/g receives a total of 40,600 weekly downloads. As such, @antv/g popularity was classified as popular.
We found that @antv/g demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.
Security News
Research
Socket's threat research team has detected five malicious npm packages targeting Roblox developers, deploying malware to steal credentials and personal data.
Security News
vlt introduced its new package manager and a serverless registry this week, innovating in a space where npm has stagnated.