Path classj

A Path object. A Path object can be used to draw lines or polygons with curves. Note: Do not use a Path if you can use a Polyline or a Polygon. A Path object renders significally slower than a Polyline or a Polygon.

Syntax:

new websis.graphic.Path([options]);

Arguments:

1. options - (object, optional) See below.

Options:

• id - (string, default: an automatically generated unique identifier) The id of the Path.
• style - (object) The style of the Path. The object can have the following properties:
  • fill - (string) The fill color of the Path. All CSS colors are possible. Alternative a gradient can be set:
    • linear gradient: "<angle>-<colour>[-<colour>[:<offset>]]*-<colour>", example: "90-#fff-#000" - 90° gradient from white to black or "0-#fff-#f00:20-#000" - 0° gradient from white via red (at 20%) to black.
  • fillOpacity - (number, default: 1.0) The opacity of the Path. A value beetween 0.0 and 1.0.
  • stroke - (string, default: "#000") The color of the Path. All CSS colors are possible.
  • strokeWidth - (number, default: 1) The width of the stroke in pixels.
  • strokeOpacity - (number, default: 1.0) The opacity of the stroke. A value beetween 0.0 and 1.0.
  • strokeDasharray - (string) The type of the stroke. One of the following strings: "", "-", ".", "-.", "-..", ". ", "- ", "--", "- .", "--.", "--.."
  • strokeLinecap - (string) Specifies the shape to be used at the end of open subpaths when they are stroked. One of the following strings: "butt", "square", "round"
  • strokeLinejoin - (string) Specifies the shape to be used at the corners of paths or basic shapes when they are stroked. One of the following strings: "bevel", "round", "miter"
  • cursor - (string) The CSS cursor when hovering over the Path.
• shape - (object || array(object)) The shape of the Path or an array of shape objects (for multipart paths).
  • points - (array) An array of objects. Each object can have different properties. The points array can be used to draw curves. See the examples below or see the SVG specification for more informations (Scalable Vector Graphics (SVG) 1.1 (Second Edition)).
• bbox - (object, default: generated from property shape) The bounding box of the Path. An object with the properties (minx, miny, maxx, maxy).
• levels - (array) An array of zoom levels. If this property is set, the Path will only be drawn when the current map zoom level is included in the array.
• name - (string) The name of the Path.
• visible - (boolean, default: true) Should this Path be drawn in the map? You can change the visibility of a Path with the methods show and hide.
• events - (object) An object with events. You can initialize the Path with various events. Your function receives a jQuery event object as the first and a reference to the Path as second argument.
  • mouseover - (function) The event will be fired if the mouse is moved over the graphic.
  • mouseout - (function) The event will be fired if the mouse is moved out of the graphic.
  • mouseenter - (function) The event will be fired if the mouse enters the graphic. The event will not be fired if the mouse is over the graphic but an element is beetween the mouse and the graphic, e.g. another graphic.
  • mouseleave - (function) The event will be fired if the mouse leaves the graphic. The event will not be fired if the mouse leaves the graphic but an element is beetween the mouse and the graphic, e.g. another graphic.
  • mouseup - (function) The event will be fired if the mouse button is released.
  • mousedown - (function) The event will be fired if the mouse button is pressed.
  • mousemove - (function) The event will be fired if the mouse is moved over the map.
  • click - (function) The event will be fired if the user clicks on the graphic.
  • dblclick - (function) The event will be fired if the user double clicks on the graphic.

Returns:

• (websis.graphic.Path) The Path itself.

Example:

Creates a new green Path with 4 points.

				var path = new websis.graphic.Path({
					style: {
						fill: 'green'
					},
					shape: {
						points: [
							{x: 76281, y: 76312},
							{x: 77856, y: 76329},
							{x: 78804, y: 75347},
							{x: 75655, y: 75246}
						]
					},
					events: {
						click: function(e, it) {
							alert(it.id);
						}
					}
				});
			

Example:

Creates a new Path with a Cubic Bézier Curve.

				var path = new websis.graphic.Path({
					style: {
						fill: 'green'
					},
					shape: {
						points: [
							{x: 76281, y: 76312},
							{cx: 76520, cy: 76490},
							{cx: 77134, cy: 76538},
							{x: 77856, y: 76329},
							{x: 78804, y: 75347},
							{x: 75655, y: 75246}
						]
					}
				});
			

Example:

Creates a new Path with a Smooth Cubic Bézier Curve.

				var path = new websis.graphic.Path({
					style: {
						fill: 'green'
					},
					shape: {
						points: [
							{x: 76281, y: 76312},
							{cx: 76520, cy: 76490},
							{cx: 77134, cy: 76538},
							{x: 77856, y: 76329},
							{sx: 78648, sy: 75813},
							{x: 78804, y: 75347},
							{x: 75655, y: 75246}
						]
					}
				});
			

Example:

Creates a new Path with a Quadratic Bézier Curve.

				var path = new websis.graphic.Path({
					style: {
						fill: 'green'
					},
					shape: {
						points: [
							{x: 76281, y: 76312},
							{qx: 76631, qy: 78358},
							{x: 77856, y: 76329},
							{x: 78804, y: 75347},
							{x: 75655, y: 75246}
						]
					}
				});
			

Example:

Creates a new Path with a Smooth Quadratic Bézier Curve.

				var path = new websis.graphic.Path({
					style: {
						fill: 'green'
					},
					shape: {
						points: [
							{x: 76281, y: 76312},
							{qx: 76631, qy: 78358},
							{x: 77856, y: 76329},
							{tx: 78648, ty: 75813},
							{x: 78804, y: 75347},
							{x: 75655, y: 75246}
						]
					}
				});
			

Example:

Creates a new Path with an Elliptical Arc Curve.

				var path = new websis.graphic.Path({
					style: {
						fill: 'green'
					},
					shape: {
						points: [
							{x: 76281, y: 76312},
							{arx: 400, ary: 200, ar: 10, al: 1, ac: 0},
							{x: 77856, y: 76329},
							{x: 78804, y: 75347},
							{x: 75655, y: 75246}
						]
					}
				});
			

Note:

See websis.graphic.Graphic for inherited methods.

simplify method

Simplifies the path. The simplify method removes vertexes to reduce the number of coordinates a path has. The higher the number of vertexes, the slower is the performance. The graphic will be redrawn after this method call.

Syntax:

graphic.simplify(tolerance);

Arguments:

1. tolerance - (number, default: 50) The tolerance in meters within two vertexes are reduced to one.

Returns:

• (websis.graphic.Graphic) Returns the graphic itself.

Example:

Reduces the number of vertexes in a path.

				path.simplify(40);

Path