test/g6
1
0
Fork 0
mirror of https://gitee.com/antv/g6.git synced 2024-12-05 13:18:40 +08:00
Code Issues Actions 8 Packages Projects Releases Wiki Activity
504e2d8dba
g6/docs/api/shapeProperties.en.md

547 lines
13 KiB
Markdown
Raw Normal View History

fix: delete pixelRatio for demos, docs, examples, and tests. add: changelog. add: performance demos.
2020-01-13 20:36:19 +08:00
---
docs: add the middle docs for combo item. docs: modify the docs below node/edge/combo to introduce combo. docs: add item model properties API for convenient model configuration searching.
2020-05-12 19:45:29 +08:00
title: Shape Style Properties
docs: update docs for new version theme
2020-11-13 21:53:34 +08:00
order: 8
fix: delete pixelRatio for demos, docs, examples, and tests. add: changelog. add: performance demos.
2020-01-13 20:36:19 +08:00
---
fix: render problem of custom node card demo. refactor: use type instead of shape to define the graphics type of a node or edge
2020-01-16 18:11:35 +08:00
Shape is the basic element on an item (node/edge). The `style` of a node or an edge corresponds to the shape properties of its keyShape (key shape). The `style` in `labelCfg` of a label on a node or an edge corresponds to the properties of text shape.
fix: delete pixelRatio for demos, docs, examples, and tests. add: changelog. add: performance demos.
2020-01-13 20:36:19 +08:00
```javascript
group.addShape('rect', {
chore: prettier all code
2020-02-14 10:10:54 +08:00
attrs: {
fill: 'red',
fix: delete pixelRatio for demos, docs, examples, and tests. add: changelog. add: performance demos.
2020-01-13 20:36:19 +08:00
shadowOffsetX: 10,
shadowOffsetY: 10,
shadowColor: 'blue',
shadowBlur: 10,
chore: prettier all code
2020-02-14 10:10:54 +08:00
opacity: 0.8,
feat: site for G 3.3
2020-02-07 22:05:40 +08:00
},
// must be assigned in G6 3.3 and later versions. it can be any value you want
chore: prettier all code
2020-02-14 10:10:54 +08:00
name: 'rect-shape',
});
fix: delete pixelRatio for demos, docs, examples, and tests. add: changelog. add: performance demos.
2020-01-13 20:36:19 +08:00
```
docs: add docs for item/nodde/edge properties (Chinese)
2020-08-10 19:08:49 +08:00
G6 has these shapes:
- [circle](#circle);
- [rect](#rect);
- [ellipse](#ellipse);
- [polygon](#polygon);
- [fan](#fan);
- [image](#image);
- [marker](#marker);
- [path](#path);
- [text](#text);
- [dom(svg)](#dom-svg): DOM (available only when the `renderer` of Graph instance is `'svg'`).
## Common Property
docs: fix the advanced docs lack of keyconcept problem and update the docs about shapes.
2020-04-20 11:07:50 +08:00
docs: add docs for item/nodde/edge properties (Chinese)
2020-08-10 19:08:49 +08:00
### name
docs: fix the advanced docs lack of keyconcept problem and update the docs about shapes.
2020-04-20 11:07:50 +08:00
docs: add docs for item/nodde/edge properties (Chinese)
2020-08-10 19:08:49 +08:00
<description> _String_ **required** </description>
docs: fix the advanced docs lack of keyconcept problem and update the docs about shapes.
2020-04-20 11:07:50 +08:00
docs: add docs for item/nodde/edge properties (Chinese)
2020-08-10 19:08:49 +08:00
Must be assigned in G6 3.3 and later versions. It can be any value you want
docs: fix the advanced docs lack of keyconcept problem and update the docs about shapes.
2020-04-20 11:07:50 +08:00
docs: add docs for item/nodde/edge properties (Chinese)
2020-08-10 19:08:49 +08:00
### fill
docs: fix the advanced docs lack of keyconcept problem and update the docs about shapes.
2020-04-20 11:07:50 +08:00
docs: add docs for item/nodde/edge properties (Chinese)
2020-08-10 19:08:49 +08:00
<description> _String_ **optional** </description>
docs: fix the advanced docs lack of keyconcept problem and update the docs about shapes.
2020-04-20 11:07:50 +08:00
docs: add docs for item/nodde/edge properties (Chinese)
2020-08-10 19:08:49 +08:00
The color(RGB or Hex) or [gradient](/en/docs/manual/middle/elements/advanced-style/gradient) color for filling. The corresponding property in canvas is `fillStyle`. Examples: `rgb(18, 150, 231)`,`#c193af`,`l(0) 0:#ffffff 0.5:#7ec2f3 1:#1890ff`, `r(0.5, 0.5, 0.1) 0:#ffffff 1:#1890ff`.
docs: fix the advanced docs lack of keyconcept problem and update the docs about shapes.
2020-04-20 11:07:50 +08:00
docs: add docs for item/nodde/edge properties (Chinese)
2020-08-10 19:08:49 +08:00
### stroke
docs: fix the advanced docs lack of keyconcept problem and update the docs about shapes.
2020-04-20 11:07:50 +08:00
docs: add docs for item/nodde/edge properties (Chinese)
2020-08-10 19:08:49 +08:00
<description> _String_ **optional** </description>
docs: fix the advanced docs lack of keyconcept problem and update the docs about shapes.
2020-04-20 11:07:50 +08:00
docs: add docs for item/nodde/edge properties (Chinese)
2020-08-10 19:08:49 +08:00
The color(RGB or Hex) or [gradient](/en/docs/manual/middle/elements/advanced-style/gradient) color for stroke. The corresponding property in canvas is `strokeStyle`. Examples: `rgb(18, 150, 231)`,`#c193af`,`l(0) 0:#ffffff 0.5:#7ec2f3 1:#1890ff`, `r(0.5, 0.5, 0.1) 0:#ffffff 1:#1890ff`.
docs: fix the advanced docs lack of keyconcept problem and update the docs about shapes.
2020-04-20 11:07:50 +08:00
docs: add docs for item/nodde/edge properties (Chinese)
2020-08-10 19:08:49 +08:00
### lineWidth
style: fix eslint bugs
2020-08-17 14:51:02 +08:00
docs: add docs for item/nodde/edge properties (Chinese)
2020-08-10 19:08:49 +08:00
<description> _Number_ **optional** </description>
docs: fix graphics group doc; add setClip method in doc
2020-07-10 17:17:07 +08:00
docs: add docs for item/nodde/edge properties (Chinese)
2020-08-10 19:08:49 +08:00
The width of the stroke.
docs: fix graphics group doc; add setClip method in doc
2020-07-10 17:17:07 +08:00
docs: add docs for item/nodde/edge properties (Chinese)
2020-08-10 19:08:49 +08:00
### lineDash
docs: fix graphics group doc; add setClip method in doc
2020-07-10 17:17:07 +08:00
docs: add docs for item/nodde/edge properties (Chinese)
2020-08-10 19:08:49 +08:00
<description> _Number | Number[]_ **optional** </description>
docs: fix graphics group doc; add setClip method in doc
2020-07-10 17:17:07 +08:00
docs: add docs for item/nodde/edge properties (Chinese)
2020-08-10 19:08:49 +08:00
The lineDash of the stroke. If its type is `Number[]`, the elements in the array are the lengths of the lineDash.
docs: fix graphics group doc; add setClip method in doc
2020-07-10 17:17:07 +08:00
docs: add docs for item/nodde/edge properties (Chinese)
2020-08-10 19:08:49 +08:00
### shadowColor
docs: fix the advanced docs lack of keyconcept problem and update the docs about shapes.
2020-04-20 11:07:50 +08:00
docs: add docs for item/nodde/edge properties (Chinese)
2020-08-10 19:08:49 +08:00
<description> _String_ **optional** </description>
docs: fix the advanced docs lack of keyconcept problem and update the docs about shapes.
2020-04-20 11:07:50 +08:00
docs: add docs for item/nodde/edge properties (Chinese)
2020-08-10 19:08:49 +08:00
The color of the shadow.
### shadowBlur
<description> _Number_ **optional** </description>
The blur level for shadow. Larger the value, more blur.
### shadowOffsetX
<description> _Number_ **optional** </description>
The horizontal offset of the shadow.
fix: delete pixelRatio for demos, docs, examples, and tests. add: changelog. add: performance demos.
2020-01-13 20:36:19 +08:00
docs: add docs for item/nodde/edge properties (Chinese)
2020-08-10 19:08:49 +08:00
### shadowOffsetY
fix: delete pixelRatio for demos, docs, examples, and tests. add: changelog. add: performance demos.
2020-01-13 20:36:19 +08:00
docs: add docs for item/nodde/edge properties (Chinese)
2020-08-10 19:08:49 +08:00
<description> _Number_ **optional** </description>
fix: delete pixelRatio for demos, docs, examples, and tests. add: changelog. add: performance demos.
2020-01-13 20:36:19 +08:00
docs: add docs for item/nodde/edge properties (Chinese)
2020-08-10 19:08:49 +08:00
The vertical offset of the shadow.
### opacity
<description> _Number_ **optional** </description>
The opacity (alpha value) of the shape. The corresponding property in canvas is `globalAlpha`.
### fillOpacity
<description> _Number_ **optional** </description>
The filling opacity (alpha value) of the shape. The priority is higher than `opacity`. Range [0, 1].
### strokeOpacity
<description> _Number_ **optional** </description>
The stroke opacity (alpha value) of the shape. The priority is higher than `opacity`. Range [0, 1].
### cursor
<description> _String_ **optional** </description>
The type of the mouse when hovering the node. The options are the same as [cursor in CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor).
## Circle
chore: prettier all code
2020-02-14 10:10:54 +08:00
fix: delete pixelRatio for demos, docs, examples, and tests. add: changelog. add: performance demos.
2020-01-13 20:36:19 +08:00
```javascript
group.addShape('circle', {
chore: prettier all code
2020-02-14 10:10:54 +08:00
attrs: {
x: 100,
fix: delete pixelRatio for demos, docs, examples, and tests. add: changelog. add: performance demos.
2020-01-13 20:36:19 +08:00
y: 100,
r: 50,
chore: prettier all code
2020-02-14 10:10:54 +08:00
fill: 'blue',
feat: site for G 3.3
2020-02-07 22:05:40 +08:00
},
// must be assigned in G6 3.3 and later versions. it can be any value you want
chore: prettier all code
2020-02-14 10:10:54 +08:00
name: 'circle-shape',
});
fix: delete pixelRatio for demos, docs, examples, and tests. add: changelog. add: performance demos.
2020-01-13 20:36:19 +08:00
```
docs: add docs for item/nodde/edge properties (Chinese)
2020-08-10 19:08:49 +08:00
### x
<description> _Number_ **optional** </description>
The x of the center of the circle.
### y
fix: delete pixelRatio for demos, docs, examples, and tests. add: changelog. add: performance demos.
2020-01-13 20:36:19 +08:00
docs: add docs for item/nodde/edge properties (Chinese)
2020-08-10 19:08:49 +08:00
<description> _Number_ **optional** </description>
fix: delete pixelRatio for demos, docs, examples, and tests. add: changelog. add: performance demos.
2020-01-13 20:36:19 +08:00
docs: add docs for item/nodde/edge properties (Chinese)
2020-08-10 19:08:49 +08:00
The y of the center of the circle.
fix: delete pixelRatio for demos, docs, examples, and tests. add: changelog. add: performance demos.
2020-01-13 20:36:19 +08:00
docs: add docs for item/nodde/edge properties (Chinese)
2020-08-10 19:08:49 +08:00
### r
<description> _Number_ **optional** </description>
The radius of the circle.
## Ellipse
chore: prettier all code
2020-02-14 10:10:54 +08:00
fix: delete pixelRatio for demos, docs, examples, and tests. add: changelog. add: performance demos.
2020-01-13 20:36:19 +08:00
```javascript
group.addShape('ellipse', {
chore: prettier all code
2020-02-14 10:10:54 +08:00
attrs: {
x: 100,
fix: delete pixelRatio for demos, docs, examples, and tests. add: changelog. add: performance demos.
2020-01-13 20:36:19 +08:00
y: 100,
rx: 50,
ry: 50,
chore: prettier all code
2020-02-14 10:10:54 +08:00
fill: 'blue',
feat: site for G 3.3
2020-02-07 22:05:40 +08:00
},
// must be assigned in G6 3.3 and later versions. it can be any value you want
chore: prettier all code
2020-02-14 10:10:54 +08:00
name: 'ellipse-shape',
});
fix: delete pixelRatio for demos, docs, examples, and tests. add: changelog. add: performance demos.
2020-01-13 20:36:19 +08:00
```
docs: add docs for item/nodde/edge properties (Chinese)
2020-08-10 19:08:49 +08:00
### x
fix: delete pixelRatio for demos, docs, examples, and tests. add: changelog. add: performance demos.
2020-01-13 20:36:19 +08:00
docs: add docs for item/nodde/edge properties (Chinese)
2020-08-10 19:08:49 +08:00
<description> _Number_ **optional** </description>
fix: delete pixelRatio for demos, docs, examples, and tests. add: changelog. add: performance demos.
2020-01-13 20:36:19 +08:00
docs: add docs for item/nodde/edge properties (Chinese)
2020-08-10 19:08:49 +08:00
The x of the center of the ellipse.
fix: delete pixelRatio for demos, docs, examples, and tests. add: changelog. add: performance demos.
2020-01-13 20:36:19 +08:00
docs: add docs for item/nodde/edge properties (Chinese)
2020-08-10 19:08:49 +08:00
### y
<description> _Number_ **optional** </description>
The y of the center of the ellipse.
### rx
<description> _Number_ **optional** </description>
The horizontal raidus of the ellipse.
### ry
<description> _Number_ **optional** </description>
The vertical raidus of the ellipse.
## Image
chore: prettier all code
2020-02-14 10:10:54 +08:00
fix: delete pixelRatio for demos, docs, examples, and tests. add: changelog. add: performance demos.
2020-01-13 20:36:19 +08:00
```javascript
group.addShape('image', {
attrs: {
x: 0,
y: 0,
chore: prettier all code
2020-02-14 10:10:54 +08:00
img: 'https://g.alicdn.com/cm-design/arms-trace/1.0.155/styles/armsTrace/images/TAIR.png',
feat: site for G 3.3
2020-02-07 22:05:40 +08:00
},
// must be assigned in G6 3.3 and later versions. it can be any value you want
chore: prettier all code
2020-02-14 10:10:54 +08:00
name: 'image-shape',
});
fix: delete pixelRatio for demos, docs, examples, and tests. add: changelog. add: performance demos.
2020-01-13 20:36:19 +08:00
```
docs: add docs for item/nodde/edge properties (Chinese)
2020-08-10 19:08:49 +08:00
### x
<description> _Number_ **optional** </description>
fix: delete pixelRatio for demos, docs, examples, and tests. add: changelog. add: performance demos.
2020-01-13 20:36:19 +08:00
docs: add docs for item/nodde/edge properties (Chinese)
2020-08-10 19:08:49 +08:00
The x of the left top of the image.
fix: delete pixelRatio for demos, docs, examples, and tests. add: changelog. add: performance demos.
2020-01-13 20:36:19 +08:00
docs: add docs for item/nodde/edge properties (Chinese)
2020-08-10 19:08:49 +08:00
### y
fix: delete pixelRatio for demos, docs, examples, and tests. add: changelog. add: performance demos.
2020-01-13 20:36:19 +08:00
docs: add docs for item/nodde/edge properties (Chinese)
2020-08-10 19:08:49 +08:00
<description> _Number_ **optional** </description>
The y of the left top of the image.
### width
<description> _Number_ **optional** </description>
The width of the image.
### height
<description> _Number_ **optional** </description>
The height of the image.
### img
<description> _String_ **optional** </description>
The source of the image.G6 supports multiple image formats: <br />- url<br />- ImageData<br />- Image<br />- canvas<br />.
## Marker
chore: prettier all code
2020-02-14 10:10:54 +08:00
fix: delete pixelRatio for demos, docs, examples, and tests. add: changelog. add: performance demos.
2020-01-13 20:36:19 +08:00
```javascript
docs: update marker docs.
2020-04-16 19:34:53 +08:00
// use the built-in symbol
group.addShape('marker', {
attrs: {
x: 10,
y: 10,
r: 10,
style: fix eslint bugs
2020-08-17 14:51:02 +08:00
symbol: 'triangle-down',
docs: update marker docs.
2020-04-16 19:34:53 +08:00
},
// must be assigned in G6 3.3 and later versions. it can be any value you want
style: fix eslint bugs
2020-08-17 14:51:02 +08:00
name: 'marker-shape',
docs: update marker docs.
2020-04-16 19:34:53 +08:00
});
// custom the symbol with path
fix: delete pixelRatio for demos, docs, examples, and tests. add: changelog. add: performance demos.
2020-01-13 20:36:19 +08:00
group.addShape('marker', {
attrs: {
x: 10,
y: 10,
r: 10,
style: fix eslint bugs
2020-08-17 14:51:02 +08:00
symbol: function (x, y, r) {
return [['M', x, y], ['L', x + r, y + r], ['L', x + r * 2, y], ['Z']];
},
feat: site for G 3.3
2020-02-07 22:05:40 +08:00
},
// must be assigned in G6 3.3 and later versions. it can be any value you want
style: fix eslint bugs
2020-08-17 14:51:02 +08:00
name: 'marker-shape',
fix: delete pixelRatio for demos, docs, examples, and tests. add: changelog. add: performance demos.
2020-01-13 20:36:19 +08:00
});
```
docs: add docs for item/nodde/edge properties (Chinese)
2020-08-10 19:08:49 +08:00
### x
<description> _Number_ **optional** </description>
The x of the center of the marker.
### y
<description> _Number_ **optional** </description>
fix: delete pixelRatio for demos, docs, examples, and tests. add: changelog. add: performance demos.
2020-01-13 20:36:19 +08:00
docs: add docs for item/nodde/edge properties (Chinese)
2020-08-10 19:08:49 +08:00
The y of the center of the marker.
fix: delete pixelRatio for demos, docs, examples, and tests. add: changelog. add: performance demos.
2020-01-13 20:36:19 +08:00
docs: add docs for item/nodde/edge properties (Chinese)
2020-08-10 19:08:49 +08:00
### r
fix: delete pixelRatio for demos, docs, examples, and tests. add: changelog. add: performance demos.
2020-01-13 20:36:19 +08:00
docs: add docs for item/nodde/edge properties (Chinese)
2020-08-10 19:08:49 +08:00
<description> _Number_ **optional** </description>
The radius of the marker.
### symbol
<description> _String | Function_ **optional** </description>
The shape name.There are several built-in shapes: `'circle'`, `'square'`, `'diamond'`, `'triangle'`, `'triangle-down'`, you can use them with the String names. And user could customize a shape as marker.
## Polygon
chore: prettier all code
2020-02-14 10:10:54 +08:00
fix: delete pixelRatio for demos, docs, examples, and tests. add: changelog. add: performance demos.
2020-01-13 20:36:19 +08:00
```javascript
group.addShape('polygon', {
attrs: {
chore: prettier all code
2020-02-14 10:10:54 +08:00
points: [
[30, 30],
[40, 20],
[30, 50],
[60, 100],
],
fill: 'red',
feat: site for G 3.3
2020-02-07 22:05:40 +08:00
},
// must be assigned in G6 3.3 and later versions. it can be any value you want
chore: prettier all code
2020-02-14 10:10:54 +08:00
name: 'polygon-shape',
fix: delete pixelRatio for demos, docs, examples, and tests. add: changelog. add: performance demos.
2020-01-13 20:36:19 +08:00
});
```
docs: add docs for item/nodde/edge properties (Chinese)
2020-08-10 19:08:49 +08:00
### points
fix: delete pixelRatio for demos, docs, examples, and tests. add: changelog. add: performance demos.
2020-01-13 20:36:19 +08:00
docs: add docs for item/nodde/edge properties (Chinese)
2020-08-10 19:08:49 +08:00
<description> _Array_ **optional** </description>
fix: delete pixelRatio for demos, docs, examples, and tests. add: changelog. add: performance demos.
2020-01-13 20:36:19 +08:00
docs: add docs for item/nodde/edge properties (Chinese)
2020-08-10 19:08:49 +08:00
The coordinates of the points on the polygon.
fix: delete pixelRatio for demos, docs, examples, and tests. add: changelog. add: performance demos.
2020-01-13 20:36:19 +08:00
docs: add docs for item/nodde/edge properties (Chinese)
2020-08-10 19:08:49 +08:00
## Rect
chore: prettier all code
2020-02-14 10:10:54 +08:00
fix: delete pixelRatio for demos, docs, examples, and tests. add: changelog. add: performance demos.
2020-01-13 20:36:19 +08:00
```javascript
group.addShape('rect', {
attrs: {
x: 150,
y: 150,
width: 150,
height: 150,
stroke: 'black',
chore: prettier all code
2020-02-14 10:10:54 +08:00
radius: [2, 4],
feat: site for G 3.3
2020-02-07 22:05:40 +08:00
},
// must be assigned in G6 3.3 and later versions. it can be any value you want
chore: prettier all code
2020-02-14 10:10:54 +08:00
name: 'rect-shape',
fix: delete pixelRatio for demos, docs, examples, and tests. add: changelog. add: performance demos.
2020-01-13 20:36:19 +08:00
});
```
docs: add docs for item/nodde/edge properties (Chinese)
2020-08-10 19:08:49 +08:00
### x
chore: prettier all code
2020-02-14 10:10:54 +08:00
docs: add docs for item/nodde/edge properties (Chinese)
2020-08-10 19:08:49 +08:00
<description> _Number_ **optional** </description>
The x of left top of the rect.
### y
<description> _Number_ **optional** </description>
The y of left top of the rect.
### width
<description> _Number_ **optional** </description>
The width of the rect.
fix: delete pixelRatio for demos, docs, examples, and tests. add: changelog. add: performance demos.
2020-01-13 20:36:19 +08:00
docs: add docs for item/nodde/edge properties (Chinese)
2020-08-10 19:08:49 +08:00
### height
fix: delete pixelRatio for demos, docs, examples, and tests. add: changelog. add: performance demos.
2020-01-13 20:36:19 +08:00
docs: add docs for item/nodde/edge properties (Chinese)
2020-08-10 19:08:49 +08:00
<description> _Number_ **optional** </description>
style: fix eslint bugs
2020-08-17 14:51:02 +08:00
docs: add docs for item/nodde/edge properties (Chinese)
2020-08-10 19:08:49 +08:00
The height of the rect.
fix: delete pixelRatio for demos, docs, examples, and tests. add: changelog. add: performance demos.
2020-01-13 20:36:19 +08:00
docs: add docs for item/nodde/edge properties (Chinese)
2020-08-10 19:08:49 +08:00
### radius
<description> _Number | Number[]_ **optional** </description>
The border radius. It can be an integer or an array, representing the border radii of lefttop, righttop, rightbottom, leftbotton respectively. <br />- `radius = 1` or `radius = [ 1 ]` is equal to `radius = [ 1, 1, 1, 1 ]`<br />- `radius = [ 1, 2 ]` is equal to `radius = [ 1, 2, 1, 2 ]`<br />- `radius: [ 1, 2, 3 ]` is equal to `radius: [ 1, 2, 3, 2 ]`<br />
## Path
<span style="background-color: rgb(251, 233, 231); color: rgb(139, 53, 56)"><strong>⚠️Attention:</strong></span> When the edge is too thin to be hitted by mouse, set **lineAppendWidth** to enlarge the hitting area.
chore: prettier all code
2020-02-14 10:10:54 +08:00
fix: delete pixelRatio for demos, docs, examples, and tests. add: changelog. add: performance demos.
2020-01-13 20:36:19 +08:00
```javascript
group.addShape('path', {
attrs: {
startArrow: {
fix: clone exceed maximum stack problem. docs: custom endArrow and startArrow for demos and docs.
2020-03-17 23:03:28 +08:00
// The custom arrow is a path points at (0, 0), and its tail points to the positive direction of x-axis
path: 'M 0,0 L 20,10 L 20,-10 Z',
// the offset of the arrow, nagtive value means the arrow is moved alone the positive direction of x-axis
// d: -10
fix: delete pixelRatio for demos, docs, examples, and tests. add: changelog. add: performance demos.
2020-01-13 20:36:19 +08:00
},
endArrow: {
fix: clone exceed maximum stack problem. docs: custom endArrow and startArrow for demos and docs.
2020-03-17 23:03:28 +08:00
// The custom arrow is a path points at (0, 0), and its tail points to the positive direction of x-axis
path: 'M 0,0 L 20,10 L 20,-10 Z',
// the offset of the arrow, nagtive value means the arrow is moved alone the positive direction of x-axis
// d: -10
fix: delete pixelRatio for demos, docs, examples, and tests. add: changelog. add: performance demos.
2020-01-13 20:36:19 +08:00
},
path: [
chore: prettier all code
2020-02-14 10:10:54 +08:00
['M', 100, 100],
['L', 200, 200],
fix: delete pixelRatio for demos, docs, examples, and tests. add: changelog. add: performance demos.
2020-01-13 20:36:19 +08:00
],
stroke: '#000',
lineWidth: 8,
chore: prettier all code
2020-02-14 10:10:54 +08:00
lineAppendWidth: 5,
feat: site for G 3.3
2020-02-07 22:05:40 +08:00
},
// must be assigned in G6 3.3 and later versions. it can be any value you want
chore: prettier all code
2020-02-14 10:10:54 +08:00
name: 'path-shape',
fix: delete pixelRatio for demos, docs, examples, and tests. add: changelog. add: performance demos.
2020-01-13 20:36:19 +08:00
});
```
docs: add docs for item/nodde/edge properties (Chinese)
2020-08-10 19:08:49 +08:00
### path
<description> _String | Array_ **optional** </description>
The path. Refer to [SVG path](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths).
### startArrow
<description> _Boolean | Object_ **optional** </description>
The arrow on the start of the path. When `startArrow` is `true`, show a default arrow on the start of the path. User can custom an arrow by path.
### endArrow
<description> _Boolean | Object_ **optional** </description>
The arrow on the end of the path. When `startArrow` is `true`, show a default arrow on the end of the path. User can custom an arrow by path.
### lineAppendWidth
<description> _Number_ **optional** </description>
The hitting area of the path. Enlarge the hitting area by enlarging its value.
### lineCap
<description> _String_ **optional** _default:_ `'miter'`</description>
The style of two ends of the path. Options: <br/> - `'bevel'` <br/> - `'round'` <br/> - `'miter'`(default)
### lineJoin
<description> _String_ **optional** _default:_ `'miter'`</description>
chore: prettier all code
2020-02-14 10:10:54 +08:00
docs: add docs for item/nodde/edge properties (Chinese)
2020-08-10 19:08:49 +08:00
The style of the intersection of two path. Options: <br/> - `'bevel'` <br/> - `'round'` <br/> - `'miter'`(default)
### lineWidth
<description> _Number_ **optional** </description>
The line width of the current path.
### miterLimit
<description> _Number_ **optional** </description>
The maximum miter length.
### lineDash
<description> _Number | Number[]_ **optional** </description>
The style of the dash line. It is an array that describes the length of gaps and line segments. If the number of the elements in the array is odd, the elements will be dulplicated. Such as [5, 15, 25] will be regarded as [5, 15, 25, 5, 15, 25].
## Text
fix: delete pixelRatio for demos, docs, examples, and tests. add: changelog. add: performance demos.
2020-01-13 20:36:19 +08:00
```javascript
group.addShape('text', {
attrs: {
text: 'test text',
fill: 'red',
fontWeight: 400,
shadowOffsetX: 10,
shadowOffsetY: 10,
shadowColor: 'blue',
chore: prettier all code
2020-02-14 10:10:54 +08:00
shadowBlur: 10,
feat: site for G 3.3
2020-02-07 22:05:40 +08:00
},
// must be assigned in G6 3.3 and later versions. it can be any value you want
chore: prettier all code
2020-02-14 10:10:54 +08:00
name: 'text-shape',
fix: delete pixelRatio for demos, docs, examples, and tests. add: changelog. add: performance demos.
2020-01-13 20:36:19 +08:00
});
```
doc: update dom shape doc and api. doc: using svg document.
2020-03-10 17:19:59 +08:00
docs: add docs for item/nodde/edge properties (Chinese)
2020-08-10 19:08:49 +08:00
### textAlign
doc: update dom shape doc and api. doc: using svg document.
2020-03-10 17:19:59 +08:00
docs: add docs for item/nodde/edge properties (Chinese)
2020-08-10 19:08:49 +08:00
<description> _String_ **optional** </description>
doc: update dom shape doc and api. doc: using svg document.
2020-03-10 17:19:59 +08:00
docs: add docs for item/nodde/edge properties (Chinese)
2020-08-10 19:08:49 +08:00
The align way of the text. Options: `'center'` / `'end'` / `'left'` / `'right'` / `'start'`. `'start'` by default.
style: fix eslint bugs
2020-08-17 14:51:02 +08:00
docs: add docs for item/nodde/edge properties (Chinese)
2020-08-10 19:08:49 +08:00
### textBaseline
<description> _String_ **optional** </description>
The base line of the text. Options: <br />`'top'` / `'middle'` / `'bottom'` / `'alphabetic'` / `'hanging'`. `'bottom'` by default.
### fontStyle
<description> _String_ **optional** </description>
The font style of the text. The corresponding property in CSS is `font-style`.
### fontVariant
<description> _String_ **optional** </description>
docs: dom events.
2020-03-16 18:25:20 +08:00
docs: add docs for item/nodde/edge properties (Chinese)
2020-08-10 19:08:49 +08:00
The font variant of the text. The corresponding property in CSS is `font-variant`.
doc: update dom shape doc and api. doc: using svg document.
2020-03-10 17:19:59 +08:00
docs: add docs for item/nodde/edge properties (Chinese)
2020-08-10 19:08:49 +08:00
### fontWeight
doc: update dom shape doc and api. doc: using svg document.
2020-03-10 17:19:59 +08:00
docs: add docs for item/nodde/edge properties (Chinese)
2020-08-10 19:08:49 +08:00
<description> _Number_ **optional** </description>
The font weight of the text. The corresponding property in CSS is `font-weight`.
### fontSize
<description> _Number_ **optional** </description>
The font size of the text. The corresponding property in CSS is `font-size`.
### fontFamily
<description> _String_ **optional** </description>
The font family of the text. The corresponding property in CSS is `font-family`.
### lineHeight
<description> _Number_ **optional** </description>
Line height of the text. The corresponding property in CSS is `line-height`.
## DOM (svg)
> This shape is available only when the `renderer` is assgined to `'svg'` for graph instance.
<span style="background-color: rgb(251, 233, 231); color: rgb(139, 53, 56)"><strong>⚠️ Attention:</strong></span>
doc: update dom shape doc and api. doc: using svg document.
2020-03-10 17:19:59 +08:00
```javascript
group.addShape('dom', {
attrs: {
width: cfg.size[0],
height: cfg.size[1],
// DOM's html
html: `
style: fix eslint bugs
2020-08-17 14:51:02 +08:00
<div style="background-color: #fff; border: 2px solid #5B8FF9; border-radius: 5px; width: ${
cfg.size[0] - 5
}px; height: ${cfg.size[1] - 5}px; display: flex;">
doc: update dom shape doc and api. doc: using svg document.
2020-03-10 17:19:59 +08:00
<div style="height: 100%; width: 33%; background-color: #CDDDFD">
docs: add advanced docs about registerCombo. docs: add alt for the i img tags.
2020-05-13 22:33:54 +08:00
<img alt="img" style="line-height: 100%; padding-top: 6px; padding-left: 8px;" src="https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*Q_FQT6nwEC8AAAAAAAAAAABkARQnAQ" width="20" height="20" />
doc: update dom shape doc and api. doc: using svg document.
2020-03-10 17:19:59 +08:00
</div>
<span style="margin:auto; padding:auto; color: #5B8FF9">${cfg.label}</span>
</div>
style: fix eslint bugs
2020-08-17 14:51:02 +08:00
`,
doc: update dom shape doc and api. doc: using svg document.
2020-03-10 17:19:59 +08:00
},
// must be assigned in G6 3.3 and later versions. it can be any value you want
name: 'dom-shape',
draggable: true,
});
docs: dom events.
2020-03-16 18:25:20 +08:00
```
docs: add docs for item/nodde/edge properties (Chinese)
2020-08-10 19:08:49 +08:00
- Only support native HTML DOM, but not react or other components;
- If you custom a Node type or an Edge type with dom shape, please use the original DOM events instead of events of G6.
### html
<description> _String_ **optional** </description>
The HTML value for DOM shape.
Reference in New Issue Copy Permalink