184 lines
3.8 KiB
JavaScript
184 lines
3.8 KiB
JavaScript
// FIXME decide default value for snapToPixel
|
|
|
|
goog.provide('ol.style.Circle');
|
|
|
|
goog.require('goog.dom');
|
|
goog.require('goog.dom.TagName');
|
|
goog.require('ol.color');
|
|
goog.require('ol.render.canvas');
|
|
goog.require('ol.style.Fill');
|
|
goog.require('ol.style.Image');
|
|
goog.require('ol.style.ImageState');
|
|
goog.require('ol.style.Stroke');
|
|
|
|
|
|
|
|
/**
|
|
* @constructor
|
|
* @param {olx.style.CircleOptions=} opt_options Options.
|
|
* @extends {ol.style.Image}
|
|
*/
|
|
ol.style.Circle = function(opt_options) {
|
|
|
|
var options = goog.isDef(opt_options) ? opt_options : {};
|
|
|
|
/**
|
|
* @private
|
|
* @type {HTMLCanvasElement}
|
|
*/
|
|
this.canvas_ = /** @type {HTMLCanvasElement} */
|
|
(goog.dom.createElement(goog.dom.TagName.CANVAS));
|
|
|
|
/**
|
|
* @private
|
|
* @type {HTMLCanvasElement}
|
|
*/
|
|
this.hitDetectionCanvas_ = null;
|
|
|
|
/**
|
|
* @private
|
|
* @type {ol.style.Fill}
|
|
*/
|
|
this.fill_ = goog.isDef(options.fill) ? options.fill : null;
|
|
|
|
/**
|
|
* @private
|
|
* @type {number}
|
|
*/
|
|
this.radius_ = options.radius;
|
|
|
|
/**
|
|
* @private
|
|
* @type {ol.style.Stroke}
|
|
*/
|
|
this.stroke_ = goog.isDef(options.stroke) ? options.stroke : null;
|
|
|
|
var size = this.render_();
|
|
|
|
goog.base(this, {
|
|
anchor: [size / 2, size / 2],
|
|
imageState: ol.style.ImageState.LOADED,
|
|
rotation: 0,
|
|
scale: 1,
|
|
size: [size, size],
|
|
snapToPixel: undefined,
|
|
subtractViewRotation: false
|
|
});
|
|
|
|
};
|
|
goog.inherits(ol.style.Circle, ol.style.Image);
|
|
|
|
|
|
/**
|
|
* @return {ol.style.Fill} Fill style.
|
|
*/
|
|
ol.style.Circle.prototype.getFill = function() {
|
|
return this.fill_;
|
|
};
|
|
|
|
|
|
/**
|
|
* @inheritDoc
|
|
*/
|
|
ol.style.Circle.prototype.getHitDetectionImage = function(pixelRatio) {
|
|
return this.hitDetectionCanvas_;
|
|
};
|
|
|
|
|
|
/**
|
|
* @inheritDoc
|
|
*/
|
|
ol.style.Circle.prototype.getImage = function(pixelRatio) {
|
|
return this.canvas_;
|
|
};
|
|
|
|
|
|
/**
|
|
* @return {number} Radius.
|
|
*/
|
|
ol.style.Circle.prototype.getRadius = function() {
|
|
return this.radius_;
|
|
};
|
|
|
|
|
|
/**
|
|
* @return {ol.style.Stroke} Stroke style.
|
|
*/
|
|
ol.style.Circle.prototype.getStroke = function() {
|
|
return this.stroke_;
|
|
};
|
|
|
|
|
|
/**
|
|
* @inheritDoc
|
|
*/
|
|
ol.style.Circle.prototype.load = goog.nullFunction;
|
|
|
|
|
|
/**
|
|
* @private
|
|
* @return {number} Size.
|
|
*/
|
|
ol.style.Circle.prototype.render_ = function() {
|
|
var canvas = this.canvas_;
|
|
var strokeStyle, strokeWidth;
|
|
|
|
if (goog.isNull(this.stroke_)) {
|
|
strokeWidth = 0;
|
|
} else {
|
|
strokeStyle = ol.color.asString(this.stroke_.getColor());
|
|
strokeWidth = this.stroke_.getWidth();
|
|
if (!goog.isDef(strokeWidth)) {
|
|
strokeWidth = ol.render.canvas.defaultLineWidth;
|
|
}
|
|
}
|
|
|
|
var size = 2 * (this.radius_ + strokeWidth) + 1;
|
|
|
|
// draw the circle on the canvas
|
|
|
|
canvas.height = size;
|
|
canvas.width = size;
|
|
|
|
var context = /** @type {CanvasRenderingContext2D} */
|
|
(canvas.getContext('2d'));
|
|
context.arc(size / 2, size / 2, this.radius_, 0, 2 * Math.PI, true);
|
|
|
|
if (!goog.isNull(this.fill_)) {
|
|
context.fillStyle = ol.color.asString(this.fill_.getColor());
|
|
context.fill();
|
|
}
|
|
if (!goog.isNull(this.stroke_)) {
|
|
context.strokeStyle = strokeStyle;
|
|
context.lineWidth = strokeWidth;
|
|
context.stroke();
|
|
}
|
|
|
|
// deal with the hit detection canvas
|
|
|
|
if (!goog.isNull(this.fill_)) {
|
|
this.hitDetectionCanvas_ = canvas;
|
|
} else {
|
|
this.hitDetectionCanvas_ = /** @type {HTMLCanvasElement} */
|
|
(goog.dom.createElement(goog.dom.TagName.CANVAS));
|
|
canvas = this.hitDetectionCanvas_;
|
|
|
|
canvas.height = size;
|
|
canvas.width = size;
|
|
|
|
context = /** @type {CanvasRenderingContext2D} */
|
|
(canvas.getContext('2d'));
|
|
context.arc(size / 2, size / 2, this.radius_, 0, 2 * Math.PI, true);
|
|
|
|
context.fillStyle = ol.render.canvas.defaultFillStyle;
|
|
context.fill();
|
|
if (!goog.isNull(this.stroke_)) {
|
|
context.strokeStyle = strokeStyle;
|
|
context.lineWidth = strokeWidth;
|
|
context.stroke();
|
|
}
|
|
}
|
|
|
|
return size;
|
|
};
|