ZRender

/*
 *  zr has been init like this, just use it!
 *
 *  var zrender = require('zrender');
 *  var zr = zrender.init(document.getElementById('main'));
 */
zr.clear();
var Base = require('zrender/shape/Base');
function Cross(options) {
    Base.call(this, options);
}
Cross.prototype = {
    type : 'cross',
    brush : function(ctx, isHighlight) {
        var style = this.style || {};
        if (isHighlight) {
            // 根据style扩展默认高亮样式
            style = this.highlightStyle || {};
            for (var k in this.style) {
                style[k] = this.style[k];
            }
        }
        ctx.save();
        ctx.beginPath();
        ctx.strokeStyle = style.strokeColor || style.color;
        ctx.moveTo(style.x - style.width / 2, style.y);
        ctx.lineTo(style.x + style.width / 2, style.y);
        ctx.moveTo(style.x, style.y - style.height / 2);
        ctx.lineTo(style.x, style.y + style.height / 2);
        ctx.closePath();
        ctx.stroke();
        ctx.restore();
        return;
    },

drift : function(dx, dy) {
        this.style.x += dx;
        this.style.y += dy;
    },

isCover : function(x, y) {
        var originPos = this.getTansform(x, y);
        x = originPos[0];
        y = originPos[1];

if (x >= (this.style.x - this.style.width / 2)
            && x <= (this.style.x + this.style.width / 2)
            && y >= this.style.y - this.style.height / 2
            && y <= (this.style.y + this.style.height / 2)
        ) {
            return true;
        }
        return false;
    }
}
require('zrender/tool/util').inherits(Cross, Base);

zr.addShape(new Cross({
    style : {
         x : 100,
         y : 100,
         width : 50,
         height : 50,
         color : 'red'
    },
    draggable : true
}));

/**
     * 返回矩形区域，用于局部刷新和文字定位
     * @param {Object} style
     */
    getRect : function(style) {
        return {
            x : Math.round(style.x - style.r),
            y : Math.round(style.y - style.r),
            width : style.r * 6.5,
            height : style.r * 2
        };
    }
}

require('zrender/tool/util').inherits(Audi, Base);
zr.addShape(new Audi({
    style : {
         x : 200,
         y : 100,
         r : 50,
         color : '#1e90ff',
         lineWidth : 1,
         text : 'Audi'
    },
    draggable : true
}));
zr.render();