gpt4 book ai didi

typescript - Openlayers:LineString 上的渐变发光

转载 作者:行者123 更新时间:2023-12-02 03:00:40 64 4
gpt4 key购买 nike

我有一个渲染 LineStrings 的图层,并尝试对线条应用发光效果。我创建的样式使用自定义渲染器来创建具有垂直于每个线段的渐变的笔划:

const glow_style = new Style({
renderer: (_coords, state) => {
const ctx = state.context;
const coords = _coords as Coordinate[];
ctx.lineWidth = 25;
for (let i = 1; i < coords.length; i++) {
const start = coords[i - 1];
const end = coords[i];
const [grd_start, grd_end] = getPerpendicularPoints(start, end, ctx.lineWidth);
const grd = ctx.createLinearGradient(grd_start[0], grd_start[1], grd_end[0], grd_end[1]);
grd.addColorStop(0, '#ffffff00');
grd.addColorStop(0.5, 'white');
grd.addColorStop(1, '#ffffff00');
ctx.strokeStyle = grd;
ctx.beginPath();
ctx.moveTo(start[0], start[1]);
ctx.lineTo(end[0], end[1]);
ctx.stroke();
}
}
});

这种样式适用于完全直线,但在拐角处会失效,因为线段之间的渐变不能很好地连接。如果 ctx.lineCap 保留为 butt,则渐变在拐角处不连续。如果设置为round,线段会接触,但渐变会因为重叠而变得不连续。以下是每个示例:

gradient glow w/ "butt" line caps gradient glow w/ "round" line caps

我有哪些选项可以沿着整个线串创建平滑渐变?

最佳答案

渲染整个线串会更简单,而无需通过绘制宽度逐渐减小的线将其分成几段。对于平滑渐变,每条线的不透明度应定义为剩余透明度的分数。它甚至可以作为 OpenLayers 样式数组来完成:

var steps = 13;
var styles = [];
for (var i = 0; i < steps; i++) {
styles.push(
new ol.style.Style({
stroke: new ol.style.Stroke({
color: [255, 255, 255, 1/(steps - i)],
width: (steps-i)*2 - 1
})
})
);
}

关于typescript - Openlayers:LineString 上的渐变发光,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60043522/

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