# Yahoo! UI Library

### charts 3.3.0

Yahoo! UI Library > charts > CanvasShape.js (source view)
Search:
Filters Show Private Show Protected Show Deprecated

    /**
     * The Shape class creates a graphic object with editable
     * properties.
     *
     * @class CanvasShape
     * @extends CanvasGraphic
     * @constructor
     */
    function CanvasShape(cfg)
    {
        this._dummy = this._createDummy();
        this._canvas = this._createGraphic();
        this.node = this._canvas;
        this._context = this._canvas.getContext('2d');
        this._initialize(cfg);
        this._validate();
    }

    Y.extend(CanvasShape, Y.CanvasDrawingUtil, {
        /**
         * Indicates the type of shape.
         *
         * @property type
         * @type string
         */
        type: "shape",

        /**
         * Indicates whether or not the instance will size itself based on its contents.
         *
         * @property autoSize
         * @type string
         */
        autoSize: false,

        /**
         * Initializes the graphic instance.
         *
         * @method _initialize
         * @private
         */
        _initialize: function(cfg)
        {
            this._canvas.style.position = "absolute";
            if(cfg.graphic)
            {
                cfg.graphic.node.appendChild(this._canvas);
            }
            this._setProps(cfg);
        },

        /**
         * Updates properties for the shape.
         *
         * @method _setProps
         * @param {Object} cfg Properties to update.
         * @private
         */
        _setProps: function(cfg)
        {
            this.autoSize = cfg.autoSize || this.autoSize;
            this.width = cfg.width || this.width;
            this.height = cfg.height || this.height;
            this.border = cfg.border || this.border;
            this.graphics = cfg.graphic || this.graphics;
            this.fill = cfg.fill || this.fill;
            this.type = cfg.shape || this.type;
            this.props = cfg.props || this.props;
            this.path = cfg.path || this.path;
            this.props = cfg.props || this.props;
            this.parentNode = this.graphics.node;
        },

        /**
         * Draws the graphic.
         *
         * @method _validate
         * @private
         */
        _validate: function()
        {
            var w = this.width,
                h = this.height,
                border = this.border,
                type = this.type,
                fill = this.fill;
            this.clear();
            this.setSize(this.width, this.height);
            this._canvas.style.top = "0px";
            this._canvas.style.left = "0px";
            if(border && border.weight && border.weight > 0)
            {
                border.color = border.color || "#000";
                border.alpha = border.alpha || 1;
                this.lineStyle(border.weight, border.color, border.alpha);
            }
            if(fill.type === "radial" || fill.type === "linear")
            {
                this.beginGradientFill(fill);
            }
            else if(fill.type === "bitmap")
            {
                this.beginBitmapFill(fill);
            }
            else
            {
                this.beginFill(fill.color, fill.alpha);
            }
            switch(type)
            {
                case "circle" :
                    this.drawEllipse(0, 0, w, h);
                break;
                case "rect" :
                    this.drawRect(0, 0, w, h);
                break;
                case "wedge" :
                    this.drawWedge(this.props);
                break;
            }
            return this;
        },

        /**
         * Updates the properties of the shape instance.
         *
         * @method update
         * @param {Object} cfg Object literal containing properties to update.
         */
        update: function(cfg)
        {
            this._setProps(cfg);
            this._validate();
            return this;
        },

        /**
         * Sets the visibility of a shape.
         *
         * @method toggleVisible
         * @param {Boolean} val indicates whether or not the shape is visible.
         */
        toggleVisible: function(val)
        {
            var visibility = val ? "visible" : "hidden";
            if(this.node)
            {
                this.node.style.visibility = visibility;
            }
        },

        /**
         * Positions the parent node of the shape.
         *
         * @method setPosition
         * @param {Number}, x The x-coordinate
         * @param {Number}, y The y-coordinate
         */
        setPosition: function(x, y)
        {
            var pNode = Y.one(this.parentNode);
            pNode.setStyle("position", "absolute");
            pNode.setStyle("left", x);
            pNode.setStyle("top", y);
        },

        /**
         * Adds a class to the shape's node.
         *
         * @method addClass
         * @param {String} className Name of the class to add.
         */
        addClass: function(val)
        {
            if(this.node)
            {
                this.node.style.pointerEvents = "painted";
                this.node.setAttribute("class", val);
            }
        }
    });

    Y.CanvasShape = CanvasShape;

    if(DRAWINGAPI == "canvas")
    {
        Y.Shape = Y.CanvasShape;
    }

Copyright © 2011 Yahoo! Inc. All rights reserved.