[英]Openlayers: Gradient glow on LineString
I have a layer that renders LineStrings and am trying to apply a glow effect to the lines.我有一个渲染 LineStrings 的图层,并试图对线条应用发光效果。 The Style I created uses a custom renderer to create a stroke with a gradient perpendicular to each line segment:
我创建的样式使用自定义渲染器创建一个渐变的笔触垂直于每条线段:
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();
}
}
});
This style works for completely straight lines, but breaks down at corners, because the gradient doesn't connect nicely between line segments.这种样式适用于完全直线,但在拐角处失效,因为渐变线段之间的连接不太好。 If
ctx.lineCap
is left as butt
, the gradient is discontiguous around corners.如果
ctx.lineCap
保留为butt
,则渐变在拐角处不连续。 If it's set to round
, the segments touch, but the gradient becomes discontinuous because of overlapping.如果设置为
round
,则段会接触,但由于重叠,渐变会变得不连续。 Here are examples of each:以下是每个示例:
What options do I have for creating a smooth gradient along the entire LineString?我有哪些选项可以沿整个 LineString 创建平滑渐变?
It would be simpler to render the entire linestring without breaking it into segments by drawing lines of decreasing width.通过绘制宽度减小的线来渲染整个线串而不将其分成段会更简单。 For a smooth gradient the opacity of each line should be defined as the fraction of the remaining transparency.
对于平滑渐变,每条线的不透明度应定义为剩余透明度的分数。 It could even be done as an OpenLayers style array:
它甚至可以作为 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
})
})
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.