У меня есть проблема в течение нескольких недель, в основном мне нужно создать карту с использованием фонового изображения и сети, такой как цитоскейп.
Я сохраняю положение узлов, но когда я переключаюсь с монитора или захожу в полноэкранный режим, я явно теряю отзывчивость.
как я могу заставить цитоскейп реагировать на фоновое изображение независимо от размера экрана (мобильный, рабочий стол, стол)?
<div class='cy-container rotata0v' id="cy" [ngStyle]="{'background-image': getUrl()}">
</div>
this.style = this.style || cytoscape.stylesheet()
.selector('node')
.css({
'shape': 'data(shapeType)',
'width': 'mapData(weight, 40, 80, 20, 60)',
'content': 'data(name)',
'text-valign': 'center',
'text-outline-width': 1,
'text-outline-color': 'data(colorCode)',
'background-color': 'data(colorCode)',
'color': '#fff',
'font-size': 10
})
.selector(':selected')
.css({
'border-width': 1,
'border-color': 'black'
})
.selector('edge')
.css({
'curve-style': 'bezier',
'opacity': 0.7,
'width': 'mapData(strength, 70, 100, 2, 6)',
'target-arrow-shape': 'triangle',
'line-color': 'data(colorCode)',
'source-arrow-color': 'data(colorCode)',
'target-arrow-color': 'data(colorCode)'
})
.selector('edge.questionable')
.css({
'line-style': 'dotted',
'target-arrow-shape': 'diamond'
})
.selector('.faded')
.css({
'opacity': 0.25,
'text-opacity': 0
});
}