Show an example of changing the color with setfill

This commit is contained in:
Duck
2022-06-16 07:56:03 -07:00
parent 4ef584b410
commit c182bbf66b
3 changed files with 16 additions and 0 deletions

View File

@@ -12,3 +12,6 @@ docs: >
tags: "vector, symbol, regularshape, style, square, rectangle, cross, star, triangle, x" tags: "vector, symbol, regularshape, style, square, rectangle, cross, star, triangle, x"
--- ---
<div id="map" class="map"></div> <div id="map" class="map"></div>
<div>
<button id="color-changer">Change Square Colors</button>
</div>

View File

@@ -129,3 +129,14 @@ const map = new Map({
zoom: 2, zoom: 2,
}), }),
}); });
const colors = ['blue', 'green', 'yellow', 'aqua', 'red'];
let currentColor = 0;
document.getElementById('color-changer').addEventListener('click', function () {
styles.square
.getImage()
.setFill(new Fill({color: colors[currentColor % colors.length]}));
vectorLayer.changed();
currentColor++;
});

View File

@@ -207,6 +207,7 @@ class RegularShape extends ImageStyle {
*/ */
setFill(fill) { setFill(fill) {
this.fill_ = fill; this.fill_ = fill;
this.render();
} }
/** /**
@@ -325,6 +326,7 @@ class RegularShape extends ImageStyle {
*/ */
setStroke(stroke) { setStroke(stroke) {
this.stroke_ = stroke; this.stroke_ = stroke;
this.render();
} }
/** /**