152 lines
4.0 KiB
JavaScript
152 lines
4.0 KiB
JavaScript
"use strict";
|
|
|
|
var _tslib = require("tslib");
|
|
var _g6Core = require("@antv/g6-core");
|
|
/**
|
|
* 基本的图片，可以添加文本，默认文本在图片的下面
|
|
*/
|
|
(0, _g6Core.registerNode)('image', {
|
|
options: {
|
|
img: 'https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*eD7nT6tmYgAAAAAAAAAAAABkARQnAQ',
|
|
size: 200,
|
|
labelCfg: {
|
|
style: {
|
|
fontFamily: _g6Core.BaseGlobal.windowFontFamily
|
|
}
|
|
},
|
|
clipCfg: {
|
|
show: false,
|
|
type: 'circle',
|
|
// circle
|
|
r: 50,
|
|
// ellipse
|
|
rx: 50,
|
|
ry: 35,
|
|
// rect
|
|
width: 50,
|
|
height: 35,
|
|
// polygon
|
|
points: [[30, 12], [12, 30], [30, 48], [48, 30]],
|
|
// path
|
|
path: [['M', 25, 25], ['L', 50, 25], ['A', 12.5, 12.5, 0, 1, 1, 50, 50], ['A', 12.5, 12.5, 0, 1, 0, 50, 50], ['L', 25, 75], ['Z']],
|
|
// 坐标
|
|
x: 0,
|
|
y: 0
|
|
// clip 的属性样式
|
|
// style: {
|
|
// lineWidth: 1
|
|
// },
|
|
}
|
|
},
|
|
shapeType: 'image',
|
|
labelPosition: 'bottom',
|
|
drawShape: function drawShape(cfg, group) {
|
|
var shapeType = this.shapeType; // || this.type，都已经加了 shapeType
|
|
var style = this.getShapeStyle(cfg);
|
|
delete style.fill;
|
|
var shape = group.addShape(shapeType, {
|
|
attrs: style,
|
|
className: "".concat(this.type, "-keyShape"),
|
|
name: "".concat(this.type, "-keyShape"),
|
|
draggable: true
|
|
});
|
|
group['shapeMap']["".concat(this.type, "-keyShape")] = shape;
|
|
this.drawClip(cfg, shape);
|
|
return shape;
|
|
},
|
|
drawClip: function drawClip(cfg, shape) {
|
|
var clip = (this.mergeStyle || this.getOptions(cfg)).clipCfg;
|
|
if (!clip.show) {
|
|
return;
|
|
}
|
|
// 支持 circle、rect、ellipse、Polygon 及自定义 path clip
|
|
var type = clip.type,
|
|
x = clip.x,
|
|
y = clip.y,
|
|
style = clip.style;
|
|
if (type === 'circle') {
|
|
var r = clip.r;
|
|
shape.setClip({
|
|
type: 'circle',
|
|
attrs: (0, _tslib.__assign)({
|
|
r: r,
|
|
x: x,
|
|
y: y
|
|
}, style)
|
|
});
|
|
} else if (type === 'rect') {
|
|
var width = clip.width,
|
|
height = clip.height;
|
|
var rectX = x - width / 2;
|
|
var rectY = y - height / 2;
|
|
shape.setClip({
|
|
type: 'rect',
|
|
attrs: (0, _tslib.__assign)({
|
|
x: rectX,
|
|
y: rectY,
|
|
width: width,
|
|
height: height
|
|
}, style)
|
|
});
|
|
} else if (type === 'ellipse') {
|
|
var rx = clip.rx,
|
|
ry = clip.ry;
|
|
shape.setClip({
|
|
type: 'ellipse',
|
|
attrs: (0, _tslib.__assign)({
|
|
x: x,
|
|
y: y,
|
|
rx: rx,
|
|
ry: ry
|
|
}, style)
|
|
});
|
|
} else if (type === 'polygon') {
|
|
var points = clip.points;
|
|
shape.setClip({
|
|
type: 'polygon',
|
|
attrs: (0, _tslib.__assign)({
|
|
points: points
|
|
}, style)
|
|
});
|
|
} else if (type === 'path') {
|
|
var path = clip.path;
|
|
shape.setClip({
|
|
type: 'path',
|
|
attrs: (0, _tslib.__assign)({
|
|
path: path
|
|
}, style)
|
|
});
|
|
}
|
|
},
|
|
getShapeStyle: function getShapeStyle(cfg) {
|
|
var _a = this.mergeStyle || this.getOptions(cfg),
|
|
defaultStyle = _a.style,
|
|
img = _a.img;
|
|
var size = this.getSize(cfg);
|
|
var width = size[0];
|
|
var height = size[1];
|
|
if (defaultStyle) {
|
|
width = defaultStyle.width || size[0];
|
|
height = defaultStyle.height || size[1];
|
|
}
|
|
var style = (0, _tslib.__assign)({
|
|
x: -width / 2,
|
|
y: -height / 2,
|
|
width: width,
|
|
height: height,
|
|
img: img
|
|
}, defaultStyle);
|
|
return style;
|
|
},
|
|
updateShapeStyle: function updateShapeStyle(cfg, item) {
|
|
var group = item.getContainer();
|
|
var shapeClassName = "".concat(this.itemType, "-shape");
|
|
var shape = group['shapeMap'][shapeClassName] || group.find(function (element) {
|
|
return element.get('className') === shapeClassName;
|
|
}) || item.getKeyShape();
|
|
var shapeStyle = this.getShapeStyle(cfg);
|
|
if (shape) {
|
|
shape.attr(shapeStyle);
|
|
}
|
|
}
|
|
}, 'single-node'); |