Openlayers: Cahaya gradien pada LineString

Saya memiliki lapisan yang merender LineStrings dan saya mencoba menerapkan efek cahaya pada garis. Style yang saya buat menggunakan penyaji khusus untuk membuat goresan dengan gradien tegak lurus pada setiap segmen garis:

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();
    }
  }
});

Gaya ini berfungsi untuk garis lurus sepenuhnya, namun rusak di sudut, karena gradien tidak terhubung dengan baik antar segmen garis. Jika ctx.lineCap dibiarkan sebagai butt, gradiennya tidak bersebelahan di sekitar sudut. Jika disetel ke round, segmen akan bersentuhan, namun gradien menjadi terputus-putus karena tumpang tindih. Berikut adalah contoh masing-masing:

cahaya gradien dengan penutup garis pantat gradien cahaya dengan penutup garis bulat

Opsi apa yang saya miliki untuk membuat gradien halus di sepanjang LineString?


typescript transparency openlayers
person Ace    schedule 03.02.2020    source sumber
comment
Titik tegak lurus perlu disesuaikan menjadi titik perpotongan sebenarnya di dalam dan di luar sudut seperti pada stackoverflow.com/questions/57421223/   -  person Mike    schedule 03.02.2020
comment
Saya tidak melihat bagaimana menyesuaikan titik tegak lurus akan membantu. Bukankah penyesuaian apa pun akan mengganggu kesejajaran gradien dengan garis padat?   -  person Ace    schedule 04.02.2020
comment
Kode itu ditujukan untuk garis paralel. Saya dapat melihat sekarang ini tidak akan cocok untuk satu garis dengan gradien.   -  person Mike    schedule 04.02.2020

Jawaban (1)


arrow_upward
4
arrow_downward

Akan lebih mudah untuk merender seluruh linestring tanpa memecahnya menjadi beberapa segmen dengan menggambar garis yang lebarnya semakin kecil. Untuk gradien yang halus, opacity setiap baris harus didefinisikan sebagai pecahan dari transparansi yang tersisa. Itu bahkan bisa dilakukan sebagai array gaya 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
            })
        })
    );
}
person Mike    schedule 04.02.2020
comment
Anda telah melakukannya lagi, Mike. Terima kasih atas perspektif alternatif ini. - person Ace; 04.02.2020