CD2H gitForager

antvis/g

Name: g

Owner: AntV team

Description: A canvas library which providing 2d draw for G2.

Created: 2017-11-20 02:52:38.0

Updated: 2018-05-23 07:09:39.0

Pushed: 2018-05-24 09:25:48.0

Homepage: null

Size: 1003

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

G

A canvas library which providing 2d draw for G2.

Install

npm i @antv/g

Development

t clone git@github.com:antvis/g.git
m install
m run dev

Use

canvas = new Canvas({
ntainerId: 'c1',
dth: 500,
ight: 600


group = canvas.addGroup();
shape = group.addShape('circle', {
trs: {
x: 100,
y: 100,
r: 50,
fill: 'red'



as.draw();

e.attr({
 200,
 200

as.draw();

API

G ?? G2?G6 ?????????????

Canvas ???????
Group ??????????????
Shape ????
Element Group ? Shape ???

Canvas

width ????
height ????
containerId ?? id
pixelRatio ??????? DOM ???????????? window.devicePixelRatio
children ??????????????????

canvas = new Canvas({
ntainerId: 'c1',
dth: 500,
ight: 600

get(name) ????
set(name, value) ????
draw ????

addShape(type, cfg) ????????????? Shape

as.addShape('circle', {
ndex: 5,
trs: {
x: 10,
y: 10,
r: 50

addGroup([GroupClass], cfg) ????

group = canvas.addGroup(); // ????
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) ????

Group

?????????????

zIndex ??????????????????
visible ????
children ??????????

get(name) ????
set(name, value) ????
setSilent(name, value) ?? set ?????????????????????????????????

addShape(type, cfg) ????? ???????? Shape

p.addShape('circle', {
ndex: 5,
trs: {
x: 10,
y: 10,
r: 50

addGroup([GroupClass], cfg) ????

g1 = group.addGroup(); // ????
g2 = group.addGroup(AGroup, {
?

getBBox() ?????????????
show() ??
hide() ??
remove() ???????????
sort() ??????????????????? zIndex ????
clear() ????
destroy() ??

Shape

????????????????????????

zIndex ??????????????????
visible ????
attrs ???????????????
transform ?????????
?????????????

attr('name', [value]) ?????????

le.attr({ // ????????
 100,
 100,
ll: '#fff'

le.attr('fill', 'red'); // ??????
le.attr('fill'); // ????

animate(attrs, duration, easing, callback, delay = 0) ????
attrs ???????
duration ????? ms
easing ?? d3-ease
callback ??????????
delay ????
getBBox() ????????
show() ??
hide() ??
remove() ???????????
destroy() ??

Shape.Circle

???????????? 'circle' ???, type = 'circle'

????

?????????????
x ?????x??
y ?????y??
r ????

nvas.addShape('circle', {
attrs: {
  x: 150,
  y: 150,
  r: 70,
  stroke: 'black'
}
;
nvas.addShape('circle', {
attrs: {
  x: 100,
  y: 100,
  r: 60,
  lineDash: [20, 20],
  stroke: 'red'
}
;
nvas.addShape('circle', {
attrs: {
  x: 100,
  y: 100,
  r: 100,
  fill: 'rgba(129,9,39,0.5)',
  stroke: 'blue'
}
;
nvas.draw();

Shape.Rect

?????type = 'rect'

????

?????????????
x ??? x ??
y ??? y ??
width ??
height ??
radius ??

as.addShape('rect', {
attrs: {
  x: 150,
  y: 150,
  width: 150,
  height: 150,
  stroke: 'black',
  radius: 2
}
;
nvas.addShape('rect', {
attrs: {
  x: 150-50,
  y: 150-50,
  width: 150,
  height: 150,
  stroke: 'red'
}
;
nvas.addShape('rect', {
attrs: {
  x: 150+50,
  y: 150+50,
  width: 150,
  height: 150,
  fill: 'rgba(129,9,39,0.5)',
  stroke: 'blue'
}
;

Shape.Path

????? ,?? 'path' ???, type = 'path'

????

?????????????
path?????? ???????????????? svg path

arrow ?????? ture / false

t path = group.addShape('path', {
trs: {
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'


t path1 = group.addShape('path', {
trs: {
path: [['M', 100, 100], ['L', 200, 200]],
stroke: 'red',
lineWidth: 2

Shape.Line

????, type = 'line'????? path ????

????

?????????????
x1 ???? x ??
y1 ???? y ??
x2 ???? x ??
y2 ???? y ??
arrow ?????? ture / false

nvas.addShape('line', {
attrs: {
  x1: 20,
  y1: 20,
  x2: 280,
  y2: 280,
  stroke: 'red'                       // ????
}
;
nvas.addShape('line', {
attrs: {
  x1: 20,
  y1: 300 + 20,
  x2: 280,
  y2: 300 + 280,
  arrow: true,                                             // ????
  stroke: '#00ff00'                   // 6?????
}
;
nvas.addShape('line', {
attrs: {
  x2: 300 + 20,
  y2: 300 + 20,
  x1: 300 + 280,
  y1: 300 + 280,
  arrow: true,                                             // ????
  stroke: '#00f'                      // 3?????
}
;
nvas.addShape('line', {
attrs: {
  x1: 20,
  y1: 600 + 20,
  x2: 280,
  y2: 600 + 280,
  lineDash: [10,10],
  stroke: 'rgb(100, 100, 200)'         // rgb????
}
;

Shape.Polyline

???????type = 'polyline'

????

?????????????
points ??????

vas.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'
}

Shape.Image

?????type = 'image'

????

x ??? x ??
y ??? y ??
width ??
height ??
img ??????canvas ???????

nvas.addShape('image', {
attrs: {
  x: 150+200,
  y: 150,
  img: 'https://zos.alipayobjects.com/rmsportal/FDWrsEmamcNvtEf.png'
}
;
nvas.addShape('image', {
attrs: {
  x: 150-50,
  y: 150-50,
  img: 'https://zos.alipayobjects.com/rmsportal/nAVchPnSaAWncPj.png'
}
;
nvas.addShape('image', {
attrs: {
  x: 150+50,
  y: 150+150,
  img: 'https://zos.alipayobjects.com/rmsportal/GHGrgIDTVMCaYZT.png'
}
;

Shape.Text

???type = 'text'

????

?????????????
x ??????? x
y ??????? y
font ?????????????,??????????????????
fontStyle ?? font-style?
fontVariant ?? font-variant?
fontWeight ?? font-weight?
fontSize ?? font-size?
fontFamily ?? font-family?
textAlign ?????????????, ??????center|end|left|right|start?
textBaseline ?????????????????, ?????:top|middle|bottom?

???????????? fill ????? 'stroke' ??

nvas.addShape('text', {
attrs: {
  x: 150,
  y: 150,
  fontFamily: 'PingFang SC',
  text: '????',
  fontSize: 90,
  stroke: 'black'
}
;
nvas.addShape('text', {
attrs: {
  x: 150+100,
  y: 250,
  fontFamily: 'PingFang SC',
  fontSize: 90,
  text: '??',
  lineDash: [10, 10],
  stroke: 'red'
}
;
nvas.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

marker ?????? icon
fan ????
arc ??
ellipse ??
cubic ???????
quadratic ???????

????????? path ??????????????

This work is supported by the National Institutes of Health's National Center for Advancing Translational Sciences, Grant Number U24TR002306. This work is solely the responsibility of the creators and does not necessarily represent the official views of the National Institutes of Health.