把一个svg图像转成json用zrender绘制
把每个元素的属性啥的映射好
new zrender.Path.extend({
shape: {
pathData: 路径,
id: node.shape.id,
},
style: {
fill: 'red',
stroke: 'red',
lineWidth: 1
}
});这样写绘制不出来，不知道这个实例的opt参数项，或者有没有直接绘制svg的
demo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Pin</title>
<script src="../dist/zrender.js"></script>
</head>
<body>
<div id="main" style="width:1000px;height:500px;"></div>
<script type="text/javascript">
var zr = zrender.init(document.getElementById('main')); var Pin = zrender.Path.extend({
type: 'pin', shape: { // x, y on the cusp
x: 0, y: 0, width: 0, height: 0
},
buildPath: function (path, shape) {
var x = shape.x; var y = shape.y; var w = shape.width / 5 * 3; // Height must be larger than width
var h = Math.max(w, shape.height); var r = w / 2; // Dist on y with tangent point and circle center
var dy = r * r / (h - r); var cy = y - h + r + dy; var angle = Math.asin(dy / r); // Dist on x with tangent point and circle center
var dx = Math.cos(angle) * r; var tanX = Math.sin(angle); var tanY = Math.cos(angle); path.arc(x, cy, r, Math.PI - angle, Math.PI * 2 + angle); var cpLen = r * 0.6; var cpLen2 = r * 0.7; path.bezierCurveTo(x + dx - tanX * cpLen, cy + dy + tanY * cpLen, x, y - cpLen2, x, y); path.bezierCurveTo(x, y - cpLen2, x - dx + tanX * cpLen, cy + dy + tanY * cpLen, x - dx, cy + dy); path.closePath();
}
});
var pin = new Pin({ shape: { x: 100, y: 100, width: 20, height: 40 }, scale: [2, 2] });
zr.add(pin);
</script>
</body>
</html>
<div class="example-container"></div>
<script>
window.onload = function() {
var container = document.getElementsByClassName('example-container')[0];
var zr = zrender.init(container);
var path = new zrender.path.createFromString('M8 15A7 7 0 108 1a7 7 0 000 14zM4.5 8.2l.7-.7L7 9.3l3.8-3.8.7.7L7 10.7 4.5 8.2z')
zr.add(path)
};
</script>https://ecomfe.github.io/zrender-doc/public/api.html#zrenderp...
