Openlayers: การไล่ระดับสีเรืองแสงบน LineString

ฉันมีเลเยอร์ที่เรนเดอร์ 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 ส่วนต่างๆ จะสัมผัสกัน แต่การไล่ระดับสีจะไม่ต่อเนื่องเนื่องจากการทับซ้อนกัน นี่คือตัวอย่างของแต่ละ:

การไล่ระดับสีเรืองแสงพร้อมตัวพิมพ์ใหญ่เส้นก้น การไล่ระดับสีเรืองแสงพร้อมตัวพิมพ์ใหญ่แบบกลม

ฉันมีตัวเลือกอะไรบ้างในการสร้างการไล่ระดับสีที่ราบรื่นตลอด LineString ทั้งหมด


typescript transparency openlayers
person Ace    schedule 03.02.2020    source แหล่งที่มา
comment
จุดตั้งฉากจะต้องได้รับการปรับให้เป็นจุดตัดที่แท้จริงภายในและภายนอกมุมดังเช่นใน stackoverflow.com/questions/57421223/   -  person Mike    schedule 03.02.2020
comment
ฉันไม่เห็นว่าการปรับจุดตั้งฉากจะช่วยได้อย่างไร การปรับใดๆ จะไม่รบกวนการจัดแนวการไล่ระดับสีกับเส้นทึบใช่หรือไม่   -  person Ace    schedule 04.02.2020
comment
รหัสนั้นมีไว้สำหรับเส้นคู่ขนาน ฉันเห็นแล้วว่ามันไม่เหมาะกับเส้นเดี่ยวที่มีการไล่ระดับสี   -  person Mike    schedule 04.02.2020

คำตอบ (1)


arrow_upward
4
arrow_downward

มันจะง่ายกว่าถ้าแสดงเส้นทั้งหมดโดยไม่แบ่งออกเป็นส่วนๆ ด้วยการวาดเส้นที่มีความกว้างลดลง สำหรับการไล่ระดับสีที่ราบรื่น ควรกำหนดความทึบของแต่ละบรรทัดเป็นเศษส่วนของความโปร่งใสที่เหลือ มันสามารถทำได้เป็นอาเรย์สไตล์ 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
คุณทำมันอีกแล้วไมค์ ขอบคุณสำหรับมุมมองทางเลือกนี้ - person Ace; 04.02.2020