Offset for ImageStyle
This commit is contained in:
committed by
Andreas Hocevar
parent
ee1b038714
commit
4c7f52c8a4
@@ -10,6 +10,7 @@ import RegularShape from './RegularShape.js';
|
|||||||
* @property {import("./Fill.js").default} [fill] Fill style.
|
* @property {import("./Fill.js").default} [fill] Fill style.
|
||||||
* @property {number} radius Circle radius.
|
* @property {number} radius Circle radius.
|
||||||
* @property {import("./Stroke.js").default} [stroke] Stroke style.
|
* @property {import("./Stroke.js").default} [stroke] Stroke style.
|
||||||
|
* @property {Array<number>} [offset=[0,0]] offset
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
||||||
@@ -30,7 +31,8 @@ class CircleStyle extends RegularShape {
|
|||||||
points: Infinity,
|
points: Infinity,
|
||||||
fill: options.fill,
|
fill: options.fill,
|
||||||
radius: options.radius,
|
radius: options.radius,
|
||||||
stroke: options.stroke
|
stroke: options.stroke,
|
||||||
|
offset: options.offset !== undefined ? options.offset : [0, 0]
|
||||||
});
|
});
|
||||||
|
|
||||||
}
|
}
|
||||||
@@ -45,7 +47,8 @@ class CircleStyle extends RegularShape {
|
|||||||
const style = new CircleStyle({
|
const style = new CircleStyle({
|
||||||
fill: this.getFill() ? this.getFill().clone() : undefined,
|
fill: this.getFill() ? this.getFill().clone() : undefined,
|
||||||
stroke: this.getStroke() ? this.getStroke().clone() : undefined,
|
stroke: this.getStroke() ? this.getStroke().clone() : undefined,
|
||||||
radius: this.getRadius()
|
radius: this.getRadius(),
|
||||||
|
offset: this.getOffset().slice()
|
||||||
});
|
});
|
||||||
style.setOpacity(this.getOpacity());
|
style.setOpacity(this.getOpacity());
|
||||||
style.setScale(this.getScale());
|
style.setScale(this.getScale());
|
||||||
|
|||||||
@@ -84,6 +84,7 @@ class Icon extends ImageStyle {
|
|||||||
opacity: opacity,
|
opacity: opacity,
|
||||||
rotation: rotation,
|
rotation: rotation,
|
||||||
scale: scale,
|
scale: scale,
|
||||||
|
offset: options.offset !== undefined ? options.offset : [0, 0],
|
||||||
rotateWithView: rotateWithView
|
rotateWithView: rotateWithView
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -172,12 +173,6 @@ class Icon extends ImageStyle {
|
|||||||
this.iconImage_ = getIconImage(
|
this.iconImage_ = getIconImage(
|
||||||
image, /** @type {string} */ (src), imgSize, this.crossOrigin_, imageState, this.color_);
|
image, /** @type {string} */ (src), imgSize, this.crossOrigin_, imageState, this.color_);
|
||||||
|
|
||||||
/**
|
|
||||||
* @private
|
|
||||||
* @type {Array<number>}
|
|
||||||
*/
|
|
||||||
this.offset_ = options.offset !== undefined ? options.offset : [0, 0];
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @private
|
* @private
|
||||||
* @type {import("./IconOrigin.js").default}
|
* @type {import("./IconOrigin.js").default}
|
||||||
|
|||||||
+18
-1
@@ -10,6 +10,7 @@ import {abstract} from '../util.js';
|
|||||||
* @property {boolean} rotateWithView
|
* @property {boolean} rotateWithView
|
||||||
* @property {number} rotation
|
* @property {number} rotation
|
||||||
* @property {number} scale
|
* @property {number} scale
|
||||||
|
* @property {Array<number>} offset
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
||||||
@@ -51,6 +52,12 @@ class ImageStyle {
|
|||||||
*/
|
*/
|
||||||
this.scale_ = options.scale;
|
this.scale_ = options.scale;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @private
|
||||||
|
* @type {Array<number>}
|
||||||
|
*/
|
||||||
|
this.offset_ = options.offset;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -63,7 +70,8 @@ class ImageStyle {
|
|||||||
opacity: this.getOpacity(),
|
opacity: this.getOpacity(),
|
||||||
scale: this.getScale(),
|
scale: this.getScale(),
|
||||||
rotation: this.getRotation(),
|
rotation: this.getRotation(),
|
||||||
rotateWithView: this.getRotateWithView()
|
rotateWithView: this.getRotateWithView(),
|
||||||
|
offset: this.getOffset().slice()
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -103,6 +111,15 @@ class ImageStyle {
|
|||||||
return this.scale_;
|
return this.scale_;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get the offset of the shape
|
||||||
|
* @return {Array<number>} Shape's center offset
|
||||||
|
* @api
|
||||||
|
*/
|
||||||
|
getOffset() {
|
||||||
|
return this.offset_;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Get the anchor point in pixels. The anchor determines the center point for the
|
* Get the anchor point in pixels. The anchor determines the center point for the
|
||||||
* symbolizer.
|
* symbolizer.
|
||||||
|
|||||||
@@ -20,7 +20,7 @@ import ImageStyle from './Image.js';
|
|||||||
* @property {number} [radius1] Outer radius of a star.
|
* @property {number} [radius1] Outer radius of a star.
|
||||||
* @property {number} [radius2] Inner radius of a star.
|
* @property {number} [radius2] Inner radius of a star.
|
||||||
* @property {number} [angle=0] Shape's angle in radians. A value of 0 will have one of the shape's point facing up.
|
* @property {number} [angle=0] Shape's angle in radians. A value of 0 will have one of the shape's point facing up.
|
||||||
* @property {Array<number>} [offset] Offset of the shape
|
* @property {Array<number>} [offset=[0,0]] Offset of the shape
|
||||||
* @property {import("./Stroke.js").default} [stroke] Stroke style.
|
* @property {import("./Stroke.js").default} [stroke] Stroke style.
|
||||||
* @property {number} [rotation=0] Rotation in radians (positive rotation clockwise).
|
* @property {number} [rotation=0] Rotation in radians (positive rotation clockwise).
|
||||||
* @property {boolean} [rotateWithView=false] Whether to rotate the shape with the view.
|
* @property {boolean} [rotateWithView=false] Whether to rotate the shape with the view.
|
||||||
@@ -62,7 +62,8 @@ class RegularShape extends ImageStyle {
|
|||||||
opacity: 1,
|
opacity: 1,
|
||||||
rotateWithView: rotateWithView,
|
rotateWithView: rotateWithView,
|
||||||
rotation: options.rotation !== undefined ? options.rotation : 0,
|
rotation: options.rotation !== undefined ? options.rotation : 0,
|
||||||
scale: 1
|
scale: 1,
|
||||||
|
offset: options.offset !== undefined ? options.offset : [0, 0]
|
||||||
});
|
});
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -89,12 +90,6 @@ class RegularShape extends ImageStyle {
|
|||||||
*/
|
*/
|
||||||
this.origin_ = [0, 0];
|
this.origin_ = [0, 0];
|
||||||
|
|
||||||
/**
|
|
||||||
* @private
|
|
||||||
* @type {Array<number>}
|
|
||||||
*/
|
|
||||||
this.offset_ = options.offset ? options.offset : [0, 0];
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @private
|
* @private
|
||||||
* @type {number}
|
* @type {number}
|
||||||
@@ -168,7 +163,7 @@ class RegularShape extends ImageStyle {
|
|||||||
stroke: this.getStroke() ? this.getStroke().clone() : undefined,
|
stroke: this.getStroke() ? this.getStroke().clone() : undefined,
|
||||||
rotation: this.getRotation(),
|
rotation: this.getRotation(),
|
||||||
rotateWithView: this.getRotateWithView(),
|
rotateWithView: this.getRotateWithView(),
|
||||||
offset: this.getOffset()
|
offset: this.getOffset().slice()
|
||||||
});
|
});
|
||||||
style.setOpacity(this.getOpacity());
|
style.setOpacity(this.getOpacity());
|
||||||
style.setScale(this.getScale());
|
style.setScale(this.getScale());
|
||||||
@@ -192,15 +187,6 @@ class RegularShape extends ImageStyle {
|
|||||||
return this.angle_;
|
return this.angle_;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* Get the offset of the shape
|
|
||||||
* @return {Array<number>} Shape's center offset
|
|
||||||
* @api
|
|
||||||
*/
|
|
||||||
getOffset() {
|
|
||||||
return this.offset_;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Get the fill style for the shape.
|
* Get the fill style for the shape.
|
||||||
* @return {import("./Fill.js").default} Fill style.
|
* @return {import("./Fill.js").default} Fill style.
|
||||||
|
|||||||
Reference in New Issue
Block a user