gpt4 book ai didi

javascript - 响应式修改 svg 弧的最快方法?

转载 作者:行者123 更新时间:2023-11-29 15:22:56 26 4
gpt4 key购买 nike

我正在使用 SVG 创建大量广泛使用圆弧的矩形。当尝试使 SVG 具有响应性时,问题就来了,因为当 SVG 在 vi​​ewBox 内并且不能很好地缩放时,弧坐标将保持不变。

目前,我已经提出了“概念验证”。调整父容器大小时,SVG 路径将被删除然后重绘。我现在只是在测试高度属性,我已将其设置为 vw单元。

http://plnkr.co/edit/duFwRXxVw5HREgFDQS0a?p=preview

如您所见,它可以工作,但是在调整大小时删除和重绘 SVG 路径的想法似乎会非常慢,尤其是当它们更多的时候。我认为修改现有路径会更有效,而不是不断地从头开始删除和重绘它们。我想知道是否可以将事件监听器附加到每个弧坐标,并在调整容器大小时仅更改这些数字?

如果重绘 SVG 是唯一可行的选择,我也乐于接受其他方法的建议,这些方法可以使这更快,那么在 <canvas> 中重新创建此实现可能更有意义?我想最终将鼠标悬停事件附加到每个路径,所以我不确定在这方面使用 Canvas 是否有优势?

希望问题很清楚,如果您需要我进一步解释,请告诉我!

下面的代码;


var doc = document;
var times = ['times', 10, 11, 12, 13, 14, 15, 16]

function getNode(n, v) {
n = document.createElementNS("http://www.w3.org/2000/svg", n);
for (var p in v)
n.setAttributeNS(null, p.replace(/[A-Z]/g, function (m, p, o, s) {
return "-" + m.toLowerCase();
}), v[p]);
return n
}

// CREATE TIME LIST

function createList() {


for (var i = 0; i < times.length; i++) {
var el = doc.getElementById('times');
el.appendChild(doc.createElement('div'))
el.getElementsByTagName('div')[i].setAttribute('class', 'info')
doc.getElementsByClassName('info')[i].innerHTML = times[i]
}


}

// CREATE SVG

function createSvg() {

times.shift()

var container = doc.getElementById('headings')
var svg = doc.getElementById('graphic')

var height = 100;
var width = 100;

var cellHeight = height / times.length;
var cellWidth = width;

var cHeight = container.clientHeight;
var rHeight = cHeight / 100;

var perc = (n) => (height / 16) * n;

var container = doc.getElementById('headings')

var calcY = '6.25'

var y;


if(height < cHeight){
y = (calcY / rHeight).toString()

var fixHeight = (calcY - y) * 2;

perc = (n) => (((height / 16) * n) + fixHeight)
} else {
y = calcY
perc = (n) => (((height / 16) * n))
}
var rectA = getNode('path', {
d: 'm0 ' + y +
'a6.25 ' + y + ' 0 0 1 6.25 -' + y +
'h87.5' +
'a6.25 ' + y + ' 0 0 1 6.25 ' + y +
'v' + perc(4.5).toString() +
'a6.25 ' + y + ' 0 0 1 -6.25 ' + y +
'h-43.75 ' +
'a6.25 ' + y + ' 0 0 0 -6.25 ' + y +
'v' + perc(1).toString() +
'a6.25 ' + y + ' 0 0 1 -6.25 ' + y +
'h-31.25 ' +
'a6.25 ' + y + ' 0 0 1 -6.25 -' + y,
fill: 'steelblue'
})


var rectB = getNode('path', {
d: 'm0 ' + (height - y).toString() +
'a6.25 ' + y + ' 0 0 0 6.25 ' + y +
'h87.5 ' +
'a6.25 -' + y + ' 0 0 0 6.25 -' + y +
'v-' + perc(7.5).toString() +
'a-6.25 -' + y + ' 0 0 0 -6.25 -' + y +
'h-43.75 ' +
'a-6.25 ' + y + ' 0 0 0 -6.25 ' + y +
'v'+ perc(1).toString() +
'a-6.25 ' + y + ' 0 0 1 -6.25 ' + y +
'h-31.25 ' +
'a6.25 ' + y + ' 0 0 0 -6.25 ' + y,
fill: 'crimson'
})

var rects = [rectA, rectB]

for (let i = 0; i < rects.length; i++) {
svg.append(rects[i])
}

}

// REMOVE ON RESIZE

function resize() {
var svg = doc.getElementById('graphic')

var ele = svg.getElementsByTagName('path')

for(var i = 0; i < ele.length; i++){
ele[i].remove()
}

createSvg()
}

createList();
createSvg();
#headings {
position: relative;
width: 200px;
height: 40vw;
margin: 15px 15px;
}

#headings #times {
width: 50%;
height: 100%;
float: left;
}

#headings #times .info {
width: 100%;
height: 5.7vw;
display: flex;
justify-content: center;
align-items: center;
}

#headings #svg {
width: 50%;
height: 100%;
float: left;
}

#headings #svg .heading {
height: 25px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
<div id="headings">
<div id="times"></div>
<div id="svg">
<div class="heading">Rects</div>
<svg id="graphic" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none" onresize="resize()"></svg>
</div>
</div>

旁注:如果您有兴趣了解在没有响应式缩放但增加了父级高度的情况下圆弧的外观,click here.

最佳答案

您可以通过使用百分比和蒙版来模拟您的绘图。这样它将“响应”并缩放到您想要的任何大小,而根本不会改变您的路径......抚摸是可能的,但会非常棘手;-)

function changeSize() {
var w = Math.random() * 200 + 100
var h = Math.random() * 200 + 100
svg.setAttribute("width", w)
svg.setAttribute("height", h)
}
<button onclick="changeSize()">change size</button><br/>
<svg id="svg" width="50" height="200">
<symbol id="arc" overflow="visible">
<path d="M0,0H10A10 10 0 0 0 0 10z" stroke="white" />
</symbol>
<symbol id="arc2" overflow="visible">
<path d="M0,0H10A10 10 0 0 0 0 10z" transform="rotate(180)" stroke="white" />
</symbol>
<mask id="upper">
<rect x="0" y="0" width="100%" height="40%" rx="10" ry="10" fill="white" />
<rect x="0" y="0" width="50%" height="60%" rx="10" ry="10" fill="white" />
<use xlink:href="#arc" x="50%" y="40%" fill="white" />
</mask>

<mask id="lower">
<rect x="0" y="60%" width="100%" height="40%" rx="10" ry="10" fill="white" />
<rect x="50%" y="40%" width="50%" height="60%" rx="10" ry="10" fill="white" />
<use xlink:href="#arc2" x="50%" y="60%" fill="white" />
</mask>

<rect x="0" y="0" width="100%" height="100%" fill="blue" mask="url(#upper)" />
<rect x="0" y="0" width="100%" height="100%" fill="red" mask="url(#lower)" />
</svg>

关于javascript - 响应式修改 svg 弧的最快方法?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42141985/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com