无论语法如何,我都无法在 cytoscape.js 中使用本地图像作为节点背景。
在 styles.json 我尝试过:
"selector": "node[ id = '6104' ]",
"css": {
"background-image": "image.jpg",
还有
"background-image": "url(image.jpg)",
还有
"background-image": "data(image.jpg)",
还有
"background-image": "url(./image.jpg)",
除此之外......似乎没有任何效果。使用图像的网络 URL 效果很好。只是不是本地文件。 有什么建议么? 预先感谢
您可以将图像转换为 Base64 代码并使用“encodeURI()”函数来完成。
这是一个演示代码:
// [1] Base64 code obtained from PING image
// The image is pixel based, when zoomed-in pixels are bigger
// The 'base64' string was converted from an original 'ping' image file
// Use online services to get your images conversion
const ap_base64 = `iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAApgAAAKYB3X3/OAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAANCSURBVEiJtZZPbBtFFMZ/M7ubXdtdb1xSFyeilBapySVU8h8OoFaooFSqiihIVIpQBKci6KEg9Q6H9kovIHoCIVQJJCKE1ENFjnAgcaSGC6rEnxBwA04Tx43t2FnvDAfjkNibxgHxnWb2e/u992bee7tCa00YFsffekFY+nUzFtjW0LrvjRXrCDIAaPLlW0nHL0SsZtVoaF98mLrx3pdhOqLtYPHChahZcYYO7KvPFxvRl5XPp1sN3adWiD1ZAqD6XYK1b/dvE5IWryTt2udLFedwc1+9kLp+vbbpoDh+6TklxBeAi9TL0taeWpdmZzQDry0AcO+jQ12RyohqqoYoo8RDwJrU+qXkjWtfi8Xxt58BdQuwQs9qC/afLwCw8tnQbqYAPsgxE1S6F3EAIXux2oQFKm0ihMsOF71dHYx+f3NND68ghCu1YIoePPQN1pGRABkJ6Bus96CutRZMydTl+TvuiRW1m3n0eDl0vRPcEysqdXn+jsQPsrHMquGeXEaY4Yk4wxWcY5V/9scqOMOVUFthatyTy8QyqwZ+kDURKoMWxNKr2EeqVKcTNOajqKoBgOE28U4tdQl5p5bwCw7BWquaZSzAPlwjlithJtp3pTImSqQRrb2Z8PHGigD4RZuNX6JYj6wj7O4TFLbCO/Mn/m8R+h6rYSUb3ekokRY6f/YukArN979jcW+V/S8g0eT/N3VN3kTqWbQ428m9/8k0P/1aIhF36PccEl6EhOcAUCrXKZXXWS3XKd2vc/TRBG9O5ELC17MmWubD2nKhUKZa26Ba2+D3P+4/MNCFwg59oWVeYhkzgN/JDR8deKBoD7Y+ljEjGZ0sosXVTvbc6RHirr2reNy1OXd6pJsQ+gqjk8VWFYmHrwBzW/n+uMPFiRwHB2I7ih8ciHFxIkd/3Omk5tCDV1t+2nNu5sxxpDFNx+huNhVT3/zMDz8usXC3ddaHBj1GHj/As08fwTS7Kt1HBTmyN29vdwAw+/wbwLVOJ3uAD1wi/dUH7Qei66PfyuRj4Ik9is+hglfbkbfR3cnZm7chlUWLdwmprtCohX4HUtlOcQjLYCu+fzGJH2QRKvP3UNz8bWk1qMxjGTOMThZ3kvgLI5AzFfo379UAAAAASUVORK5CYII=`;
const ap_base64Url = encodeURI("data:image/ping;base64," + ap_base64);
const ap_style = {
"background-color": "#bbbbbb",
"background-image": ap_base64Url,
label: "PING_Base64",
width: 60,
height: 60,
opacity: 1.0
};
// [1] Base64 code obtained from SVG graphic
// The image is scalable when zooming, the graphic is always sharp
const bolt_svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" width="100" height="200" title="bolt">
<path d="M296 160H180.6l42.6-129.8C227.2 15 215.7 0 200 0H56C44 0 33.8 8.9 32.2 20.8l-32 240C-1.7 275.2 9.5 288 24 288h118.7L96.6 482.5c-3.6 15.2 8 29.5 23.3 29.5 8.4 0 16.4-4.4 20.8-12l176-304c9.3-15.9-2.2-36-20.7-36z" />
</svg>`;
const svg_base64Url = encodeURI("data:image/svg+xml;utf-8," + bolt_svg);
const svg_style = {
"background-color": "#bbbbbb",
"background-image": svg_base64Url,
label: "SVG_Base64",
width: 160,
height: 160,
opacity: 1.0
};
var cy = cytoscape({
container: document.getElementById("cy"),
elements: {
nodes: [
{
data: { id: "AB", name: "SVG Icon" },
position: { x: 80, y: 350 },
classes: "svg_class"
},
{
data: { id: "DE", name: "Dreamy eyes" },
position: { x: 300, y: 250 },
classes: "ap_class"
},
],
edges: [
{ data: { source: "AB", target: "DE", label: "edge1" } },
]
},
style: [
{
selector: "node.ap_class",
style: ap_style
},
{
selector: "node.svg_class",
style: svg_style
},
{
selector: "edge",
style: {
label: "data(label)",
width: 3,
"line-color": "#cc00cc",
//"target-arrow-color": "#000099",
"curve-style": "bezier",
"target-arrow-shape": "triangle",
//"target-arrow-fill": "#990000",
"arrow-scale": 1
}
},
{
selector: ".highlight",
css: {
"background-color": "yellow"
}
},
],
layout: {
name: "preset"
}
});
//Left-mouseBtn click to select
cy.on("tap", "node", function (e) {
var ele = e.target;
ele.addClass("highlight");
});
// Right-mouseBtn click to unselect
cy.on("cxttap", "node", function (e) {
var ele = e.target;
ele.removeClass("highlight");
});
#cy {
width: 600px;
height: 400px;
position: absolute;
top: 5px;
left: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.23.0/cytoscape.min.js"></script>
<div>
<span>Cytoscape nodes with image</span>
</div><br/>
<div id="cy"></div>