CanvasPath.js revision 04f886d0ad2a12c3c0e4ec29a1c42e8732e9327f
29099c2d04b11e614f1fa399fab9e9162f2788b9vboxsync/**
29099c2d04b11e614f1fa399fab9e9162f2788b9vboxsync * <a href="http://www.w3.org/TR/html5/the-canvas-element.html">Canvas</a> implementation of the <a href="Path.html">`Path`</a> class.
661bfa5aae55ac2f94fa1cb131ea2323e5f6e633vboxsync * `CanvasPath` is not intended to be used directly. Instead, use the <a href="Path.html">`Path`</a> class.
29099c2d04b11e614f1fa399fab9e9162f2788b9vboxsync * If the browser lacks <a href="http://www.w3.org/TR/SVG/">SVG</a> capabilities but has
29099c2d04b11e614f1fa399fab9e9162f2788b9vboxsync * <a href="http://www.w3.org/TR/html5/the-canvas-element.html">Canvas</a> capabilities, the <a href="Path.html">`Path`</a>
29099c2d04b11e614f1fa399fab9e9162f2788b9vboxsync * class will point to the `CanvasPath` class.
0c69348b58bb8eabb1bea8867ee932b667bd0d34vboxsync *
29099c2d04b11e614f1fa399fab9e9162f2788b9vboxsync * @module graphics
29099c2d04b11e614f1fa399fab9e9162f2788b9vboxsync * @class CanvasPath
29099c2d04b11e614f1fa399fab9e9162f2788b9vboxsync * @extends CanvasShape
29099c2d04b11e614f1fa399fab9e9162f2788b9vboxsync */
29099c2d04b11e614f1fa399fab9e9162f2788b9vboxsyncCanvasPath = function(cfg)
29099c2d04b11e614f1fa399fab9e9162f2788b9vboxsync{
29099c2d04b11e614f1fa399fab9e9162f2788b9vboxsync CanvasPath.superclass.constructor.apply(this, arguments);
29099c2d04b11e614f1fa399fab9e9162f2788b9vboxsync};
29099c2d04b11e614f1fa399fab9e9162f2788b9vboxsyncCanvasPath.NAME = "canvasPath";
29099c2d04b11e614f1fa399fab9e9162f2788b9vboxsyncY.extend(CanvasPath, Y.CanvasShape, {
29099c2d04b11e614f1fa399fab9e9162f2788b9vboxsync /**
29099c2d04b11e614f1fa399fab9e9162f2788b9vboxsync * Indicates the type of shape
29099c2d04b11e614f1fa399fab9e9162f2788b9vboxsync *
29099c2d04b11e614f1fa399fab9e9162f2788b9vboxsync * @property _type
661bfa5aae55ac2f94fa1cb131ea2323e5f6e633vboxsync * @type String
661bfa5aae55ac2f94fa1cb131ea2323e5f6e633vboxsync * @private
0c69348b58bb8eabb1bea8867ee932b667bd0d34vboxsync */
29099c2d04b11e614f1fa399fab9e9162f2788b9vboxsync _type: "path",
29099c2d04b11e614f1fa399fab9e9162f2788b9vboxsync
29099c2d04b11e614f1fa399fab9e9162f2788b9vboxsync /**
29099c2d04b11e614f1fa399fab9e9162f2788b9vboxsync * Draws the shape.
0c69348b58bb8eabb1bea8867ee932b667bd0d34vboxsync *
29099c2d04b11e614f1fa399fab9e9162f2788b9vboxsync * @method _draw
29099c2d04b11e614f1fa399fab9e9162f2788b9vboxsync * @private
0c69348b58bb8eabb1bea8867ee932b667bd0d34vboxsync */
29099c2d04b11e614f1fa399fab9e9162f2788b9vboxsync _draw: function()
29099c2d04b11e614f1fa399fab9e9162f2788b9vboxsync {
66b58af085e22ee26be57f98127fb49ee2e91790vboxsync this._paint();
0c69348b58bb8eabb1bea8867ee932b667bd0d34vboxsync },
29099c2d04b11e614f1fa399fab9e9162f2788b9vboxsync
29099c2d04b11e614f1fa399fab9e9162f2788b9vboxsync /**
29099c2d04b11e614f1fa399fab9e9162f2788b9vboxsync * Creates the dom node for the shape.
29099c2d04b11e614f1fa399fab9e9162f2788b9vboxsync *
29099c2d04b11e614f1fa399fab9e9162f2788b9vboxsync * @method createNode
0c69348b58bb8eabb1bea8867ee932b667bd0d34vboxsync * @return HTMLElement
0c69348b58bb8eabb1bea8867ee932b667bd0d34vboxsync * @private
0c69348b58bb8eabb1bea8867ee932b667bd0d34vboxsync */
0c69348b58bb8eabb1bea8867ee932b667bd0d34vboxsync createNode: function()
5c4d7e2aae42bbf39793dfa686925f076a56b4d5vboxsync {
5c4d7e2aae42bbf39793dfa686925f076a56b4d5vboxsync var node = Y.config.doc.createElement('canvas'),
5c4d7e2aae42bbf39793dfa686925f076a56b4d5vboxsync id = this.get("id");
5c4d7e2aae42bbf39793dfa686925f076a56b4d5vboxsync this._context = node.getContext('2d');
5c4d7e2aae42bbf39793dfa686925f076a56b4d5vboxsync node.setAttribute("overflow", "visible");
5c4d7e2aae42bbf39793dfa686925f076a56b4d5vboxsync node.setAttribute("pointer-events", "none");
5c4d7e2aae42bbf39793dfa686925f076a56b4d5vboxsync node.style.pointerEvents = "none";
5c4d7e2aae42bbf39793dfa686925f076a56b4d5vboxsync node.style.overflow = "visible";
5c4d7e2aae42bbf39793dfa686925f076a56b4d5vboxsync node.setAttribute("id", id);
5c4d7e2aae42bbf39793dfa686925f076a56b4d5vboxsync id = "#" + id;
0c69348b58bb8eabb1bea8867ee932b667bd0d34vboxsync this.node = node;
29099c2d04b11e614f1fa399fab9e9162f2788b9vboxsync this.addClass("yui3-" + SHAPE + " yui3-" + this.name);
5c4d7e2aae42bbf39793dfa686925f076a56b4d5vboxsync },
0c69348b58bb8eabb1bea8867ee932b667bd0d34vboxsync
0c94a8282c9042b02f022302a3d987746140eab9vboxsync /**
0c69348b58bb8eabb1bea8867ee932b667bd0d34vboxsync * Completes a drawing operation.
0c69348b58bb8eabb1bea8867ee932b667bd0d34vboxsync *
29099c2d04b11e614f1fa399fab9e9162f2788b9vboxsync * @method end
0c69348b58bb8eabb1bea8867ee932b667bd0d34vboxsync */
0c69348b58bb8eabb1bea8867ee932b667bd0d34vboxsync end: function()
0c69348b58bb8eabb1bea8867ee932b667bd0d34vboxsync {
fdb40b7d2efa84fc6f03b7a695cb4b2e035c30c7vboxsync this._draw();
fdb40b7d2efa84fc6f03b7a695cb4b2e035c30c7vboxsync }
5c4d7e2aae42bbf39793dfa686925f076a56b4d5vboxsync});
0c69348b58bb8eabb1bea8867ee932b667bd0d34vboxsync
19320d55d1417c39b3b5673a53aaa5ef177242c8vboxsyncCanvasPath.ATTRS = Y.merge(Y.CanvasShape.ATTRS, {
19320d55d1417c39b3b5673a53aaa5ef177242c8vboxsync /**
0c69348b58bb8eabb1bea8867ee932b667bd0d34vboxsync * Indicates the width of the shape
0c69348b58bb8eabb1bea8867ee932b667bd0d34vboxsync *
29099c2d04b11e614f1fa399fab9e9162f2788b9vboxsync * @config width
0c69348b58bb8eabb1bea8867ee932b667bd0d34vboxsync * @type Number
29099c2d04b11e614f1fa399fab9e9162f2788b9vboxsync */
0c69348b58bb8eabb1bea8867ee932b667bd0d34vboxsync width: {
0c69348b58bb8eabb1bea8867ee932b667bd0d34vboxsync getter: function()
5c4d7e2aae42bbf39793dfa686925f076a56b4d5vboxsync {
c66c4413faa5a72ce047742f9acfa85e94dec8afvboxsync var offset = this._stroke && this._strokeWeight ? (this._strokeWeight * 2) : 0;
c66c4413faa5a72ce047742f9acfa85e94dec8afvboxsync return this._width - offset;
c66c4413faa5a72ce047742f9acfa85e94dec8afvboxsync },
5c4d7e2aae42bbf39793dfa686925f076a56b4d5vboxsync
5c4d7e2aae42bbf39793dfa686925f076a56b4d5vboxsync setter: function(val)
5c4d7e2aae42bbf39793dfa686925f076a56b4d5vboxsync {
5c4d7e2aae42bbf39793dfa686925f076a56b4d5vboxsync this._width = val;
5c4d7e2aae42bbf39793dfa686925f076a56b4d5vboxsync return val;
5c4d7e2aae42bbf39793dfa686925f076a56b4d5vboxsync }
0c69348b58bb8eabb1bea8867ee932b667bd0d34vboxsync },
0c69348b58bb8eabb1bea8867ee932b667bd0d34vboxsync
0c69348b58bb8eabb1bea8867ee932b667bd0d34vboxsync /**
0c69348b58bb8eabb1bea8867ee932b667bd0d34vboxsync * Indicates the height of the shape
0c94a8282c9042b02f022302a3d987746140eab9vboxsync *
0c94a8282c9042b02f022302a3d987746140eab9vboxsync * @config height
0c94a8282c9042b02f022302a3d987746140eab9vboxsync * @type Number
0c94a8282c9042b02f022302a3d987746140eab9vboxsync */
0c94a8282c9042b02f022302a3d987746140eab9vboxsync height: {
0c94a8282c9042b02f022302a3d987746140eab9vboxsync getter: function()
0c94a8282c9042b02f022302a3d987746140eab9vboxsync {
0c94a8282c9042b02f022302a3d987746140eab9vboxsync var offset = this._stroke && this._strokeWeight ? (this._strokeWeight * 2) : 0;
0c94a8282c9042b02f022302a3d987746140eab9vboxsync return this._height - offset;
0c94a8282c9042b02f022302a3d987746140eab9vboxsync },
0c94a8282c9042b02f022302a3d987746140eab9vboxsync
0c94a8282c9042b02f022302a3d987746140eab9vboxsync setter: function(val)
0c94a8282c9042b02f022302a3d987746140eab9vboxsync {
0c94a8282c9042b02f022302a3d987746140eab9vboxsync this._height = val;
0c69348b58bb8eabb1bea8867ee932b667bd0d34vboxsync return val;
0c69348b58bb8eabb1bea8867ee932b667bd0d34vboxsync }
0c69348b58bb8eabb1bea8867ee932b667bd0d34vboxsync },
0c69348b58bb8eabb1bea8867ee932b667bd0d34vboxsync
0c94a8282c9042b02f022302a3d987746140eab9vboxsync /**
0c94a8282c9042b02f022302a3d987746140eab9vboxsync * Indicates the path used for the node.
0c94a8282c9042b02f022302a3d987746140eab9vboxsync *
0c94a8282c9042b02f022302a3d987746140eab9vboxsync * @config path
0c69348b58bb8eabb1bea8867ee932b667bd0d34vboxsync * @type String
0c69348b58bb8eabb1bea8867ee932b667bd0d34vboxsync * @readOnly
0c69348b58bb8eabb1bea8867ee932b667bd0d34vboxsync */
0c69348b58bb8eabb1bea8867ee932b667bd0d34vboxsync path: {
0c69348b58bb8eabb1bea8867ee932b667bd0d34vboxsync readOnly: true,
0c69348b58bb8eabb1bea8867ee932b667bd0d34vboxsync
0c69348b58bb8eabb1bea8867ee932b667bd0d34vboxsync getter: function()
0c69348b58bb8eabb1bea8867ee932b667bd0d34vboxsync {
0c69348b58bb8eabb1bea8867ee932b667bd0d34vboxsync return this._path;
0c69348b58bb8eabb1bea8867ee932b667bd0d34vboxsync }
0c69348b58bb8eabb1bea8867ee932b667bd0d34vboxsync }
0c69348b58bb8eabb1bea8867ee932b667bd0d34vboxsync});
0c69348b58bb8eabb1bea8867ee932b667bd0d34vboxsyncY.CanvasPath = CanvasPath;
0c69348b58bb8eabb1bea8867ee932b667bd0d34vboxsync