Version 3.18.1
Show:

File: graphics/js/CanvasPath.js

  1.             /**
  2.              * <a href="http://www.w3.org/TR/html5/the-canvas-element.html">Canvas</a> implementation of the <a href="Path.html">`Path`</a> class.
  3.              * `CanvasPath` is not intended to be used directly. Instead, use the <a href="Path.html">`Path`</a> class.
  4.              * If the browser lacks <a href="http://www.w3.org/TR/SVG/">SVG</a> capabilities but has
  5.              * <a href="http://www.w3.org/TR/html5/the-canvas-element.html">Canvas</a> capabilities, the <a href="Path.html">`Path`</a>
  6.              * class will point to the `CanvasPath` class.
  7.              *
  8.              * @module graphics
  9.              * @class CanvasPath
  10.              * @extends CanvasShape
  11.              */
  12.             CanvasPath = function()
  13.             {
  14.             	CanvasPath.superclass.constructor.apply(this, arguments);
  15.             };
  16.             CanvasPath.NAME = "path";
  17.             Y.extend(CanvasPath, Y.CanvasShape, {
  18.                 /**
  19.                  * Indicates the type of shape
  20.                  *
  21.                  * @property _type
  22.                  * @type String
  23.                  * @private
  24.                  */
  25.                 _type: "path",
  26.             
  27.             	/**
  28.             	 * Draws the shape.
  29.             	 *
  30.             	 * @method _draw
  31.             	 * @private
  32.             	 */
  33.                 _draw: function()
  34.                 {
  35.                     this._closePath();
  36.                     this._updateTransform();
  37.                 },
  38.             
  39.             	/**
  40.             	 * Creates the dom node for the shape.
  41.             	 *
  42.                  * @method createNode
  43.             	 * @return HTMLElement
  44.             	 * @private
  45.             	 */
  46.             	createNode: function()
  47.             	{
  48.             		var host = this,
  49.                         node = Y.config.doc.createElement('canvas'),
  50.             			name = host.name,
  51.                         concat = host._camelCaseConcat,
  52.                         id = host.get("id");
  53.             		host._context = node.getContext('2d');
  54.             		node.setAttribute("overflow", "visible");
  55.                     node.setAttribute("pointer-events", "none");
  56.                     node.style.pointerEvents = "none";
  57.                     node.style.overflow = "visible";
  58.             		node.setAttribute("id", id);
  59.             		id = "#" + id;
  60.             		host.node = node;
  61.             		host.addClass(
  62.                         _getClassName(SHAPE) +
  63.                         " " +
  64.                         _getClassName(concat(IMPLEMENTATION, SHAPE)) +
  65.                         " " +
  66.                         _getClassName(name) +
  67.                         " " +
  68.                         _getClassName(concat(IMPLEMENTATION, name))
  69.                     );
  70.             	},
  71.             
  72.                 /**
  73.                  * Completes a drawing operation.
  74.                  *
  75.                  * @method end
  76.                  */
  77.                 end: function()
  78.                 {
  79.                     this._draw();
  80.                     return this;
  81.                 }
  82.             });
  83.             
  84.             CanvasPath.ATTRS = Y.merge(Y.CanvasShape.ATTRS, {
  85.             	/**
  86.             	 * Indicates the width of the shape
  87.             	 *
  88.             	 * @config width
  89.             	 * @type Number
  90.             	 */
  91.             	width: {
  92.             		getter: function()
  93.             		{
  94.             			var offset = this._stroke && this._strokeWeight ? (this._strokeWeight * 2) : 0;
  95.             			return this._width - offset;
  96.             		},
  97.             
  98.             		setter: function(val)
  99.             		{
  100.             			this._width = val;
  101.             			return val;
  102.             		}
  103.             	},
  104.             
  105.             	/**
  106.             	 * Indicates the height of the shape
  107.             	 *
  108.             	 * @config height
  109.             	 * @type Number
  110.             	 */
  111.             	height: {
  112.             		getter: function()
  113.             		{
  114.             			var offset = this._stroke && this._strokeWeight ? (this._strokeWeight * 2) : 0;
  115.                         return this._height - offset;
  116.             		},
  117.             
  118.             		setter: function(val)
  119.             		{
  120.             			this._height = val;
  121.             			return val;
  122.             		}
  123.             	},
  124.             
  125.             	/**
  126.             	 * Indicates the path used for the node.
  127.             	 *
  128.             	 * @config path
  129.             	 * @type String
  130.                  * @readOnly
  131.             	 */
  132.             	path: {
  133.                     readOnly: true,
  134.             
  135.             		getter: function()
  136.             		{
  137.             			return this._path;
  138.             		}
  139.             	}
  140.             });
  141.             Y.CanvasPath = CanvasPath;
  142.             
  143.