ZRender源码分析4：Painter(View层)-中

回顾

上一篇说到：ZRender源码分析3：Painter(View层)-上，接上篇，开始Shape对象

总体理解

先回到上次的Painter的render方法

/**
 * 首次绘图，创建各种dom和context
 * 核心方法，zr.render() --> painter.render
 *
 * render和refersh的区别：render是clear所有，refresh是清除已经改变的layer
 *
 * @param {Function=} callback 绘画结束后的回调函数
 */
Painter.prototype.render = function (callback) {
	//省略
    //升序遍历，shape上的zlevel指定绘画图层的z轴层叠
    this.storage.iterShape(
        this._brush({ all : true }),
        { normal: ‘up‘ }
    );

    //省略
    return this;
};
/**
 * 刷画图形
 *
 * @private
 * @param {Object} changedZlevel 需要更新的zlevel索引
 */
Painter.prototype._brush = function (changedZlevel) {
    var ctxList = this._ctxList;
    var me = this;
    function updatePainter(shapeList, callback) {
        me.update(shapeList, callback);
    }

    return function(shape) {
        if ((changedZlevel.all || changedZlevel[shape.zlevel])
            && !shape.invisible
        ) {
            var ctx = ctxList[shape.zlevel];
            if (ctx) {
                if (!shape.onbrush //没有onbrush
                    //有onbrush并且调用执行返回false或undefined则继续粉刷
                    || (shape.onbrush && !shape.onbrush(ctx, false))
                ) {
                    if (config.catchBrushException) {
                        try {
                            shape.brush(ctx, false, updatePainter);
                        }
                        catch(error) {
                            log(
                                error,
                                ‘brush error of ‘ + shape.type,
                                shape
                            );
                        }
                    }
                    else {
                        shape.brush(ctx, false, updatePainter);
                    }
                }
            }
            else {
                log(
                    ‘can not find the specific zlevel canvas!‘
                );
            }
        }
    };
};

可以看到，在最核心处，便是调用了storage的遍历shape对象方法，传入的回调便是Painter._brush方法， 逻辑转入到_brush方法，这里返回一个回调，在回调中，直接调用了shape对象的brush方法，可见，最后还是要到shape对象中去了。

Shape对象

打开zrender的shape文件夹，可以看到，有很多个JS，其中，Base类是一个基类，而其他的文件都各自是一个图形类，都继承自Base类。 很明确的是，这里用的是一个模板方法，接下来，用最简单的Circle类来分析源码。先看Circle的结构。

function Circle(options) {
            Base.call(this, options);
}
Circle.prototype = {
    type: ‘circle‘,
    /**
     * 创建圆形路径
     * @param {Context2D} ctx Canvas 2D上下文
     * @param {Object} style 样式
     */
    buildPath : function (ctx, style) { //省略实现
    },

    /**
     * 返回矩形区域，用于局部刷新和文字定位
     * @param {Object} style
     */
    getRect : function (style) { //省略实现
    }
};

require(‘../tool/util‘).inherits(Circle, Base);

最后一行比较重要，继承了Base类，而Base类实现了brush方法，看见Circle实现的buildPath和getRect方法和type属性，应该就是覆盖了Base类的同名方法吧。 来看Base类，依旧是function Base() {} Base.prototype.baba = funciton () {}，构造中先设置了一些默认值，然后用用户自定义的option进行覆盖。

 function Base( options ) {
     this.id = options.id || guid();
     this.zlevel = 0;
     this.draggable = false;
     this.clickable = false;
     this.hoverable = true;
     this.position = [0, 0];
     this.rotation = [0, 0, 0];
     this.scale = [1, 1, 0, 0];

     for ( var key in options ) {
         this[ key ] = options[ key ];
     }

     this.style = this.style || {};
 }

再来看核心方法brush

/**
 * 画刷
 *
 * @param ctx       画布句柄
 * @param isHighlight   是否为高亮状态
 * @param updateCallback 需要异步加载资源的shape可以通过这个callback(e)
 *                       让painter更新视图，base.brush没用，需要的话重载brush
 */
Base.prototype.brush = function (ctx, isHighlight) {
    var style = this.style;

    //比如LineShape，配置的有brushTypeOnly
    if (this.brushTypeOnly) {
        style.brushType = this.brushTypeOnly;
    }

    if (isHighlight) {
        // 根据style扩展默认高亮样式
        style = this.getHighlightStyle(
            style,
            this.highlightStyle || {},
            this.brushTypeOnly
        );
    }

    if (this.brushTypeOnly == ‘stroke‘) {
        style.strokeColor = style.strokeColor || style.color;
    }

    ctx.save();

    //根据style设置content对象
    this.setContext(ctx, style);

    // 设置transform
    this.updateTransform(ctx);

    ctx.beginPath();
    this.buildPath(ctx, style);
    if (this.brushTypeOnly != ‘stroke‘) {
        ctx.closePath();
    }

    switch (style.brushType) {
        case ‘both‘:
            ctx.fill();
        case ‘stroke‘:
            style.lineWidth > 0 && ctx.stroke();
            break;
        default:
            ctx.fill();
    }

    if (style.text) {
        this.drawText(ctx, style, this.style);
    }

    ctx.restore();
};
  • 1.设置brushTypeOnly，brushType有三种形式：both,stroke,fill。比如在LineShape对象中，划线是不可能fill的，只能是stroke，所以由此特殊处理
  • 2.根据当前shape的style来获取适合的highlightStyle,转入到getHighlightStyle。

    /**
 * 根据默认样式扩展高亮样式
 *
 * @param ctx Canvas 2D上下文
 * @param {Object} style 默认样式
 * @param {Object} highlightStyle 高亮样式
 */
Base.prototype.getHighlightStyle = function (style, highlightStyle, brushTypeOnly) {
    var newStyle = {};
    for (var k in style) {
        newStyle[k] = style[k];
    }

    var color = require(‘../tool/color‘);
    var highlightColor = color.getHighlightColor(); // rgba(255,255.0.0.5) 半透明黄色
    // 根据highlightStyle扩展
    if (style.brushType != ‘stroke‘) {
        // 带填充则用高亮色加粗边线
        newStyle.strokeColor = highlightColor;
        newStyle.lineWidth = (style.lineWidth || 1)
                              + this.getHighlightZoom(); //如果是文字，就是6，如果不是文字，是2
        newStyle.brushType = ‘both‘; //如果高亮层并且brushType为both或者fill，强制其为both
    }
    else {
        if (brushTypeOnly != ‘stroke‘) {
            // 描边型的则用原色加工高亮
            newStyle.strokeColor = highlightColor;
            newStyle.lineWidth = (style.lineWidth || 1)
                                  + this.getHighlightZoom();
        }
        else {
            // 线型的则用原色加工高亮
            newStyle.strokeColor = highlightStyle.strokeColor
                                   || color.mix(
                                         style.strokeColor,
                                         color.toRGB(highlightColor)
                                      );
        }
    }

    // 可自定义覆盖默认值
    for (var k in highlightStyle) {
        if (typeof highlightStyle[k] != ‘undefined‘) {
            newStyle[k] = highlightStyle[k];
        }
    }

    return newStyle;
};
    • 先将默认的样式拷贝到newStyle变量中，在方法末尾，返回newStyle
    • 根据默认的样式计算出高亮的样式，如果brushType为both或者fill，将strokeColor变成半透明的黄色，根据图形类型算出lineWidth，将brushType赋值为both
    • 如果brushType为stroke，再如果brushOnly没有被设置为stroke，将strokeCOlor设置为半透明黄色，设置lineWidth
    • 如果brushType为stroke，没有设置brushOnly为stroke，就用color.mix计算出一个颜色值
    • 最后将用户自定义的highlightStyle覆盖到newStyle，返回newStyle
  • 如果brushTypeOnly为stroke，处理color的多个出处，然后就是ctx.save()与ctx.restore()之间的真正绘图了。
  • 转到setContext方法

    var STYLE_CTX_MAP = [
    [‘color‘, ‘fillStyle‘],
    [‘strokeColor‘, ‘strokeStyle‘],
    [‘opacity‘, ‘globalAlpha‘],
    [‘lineCap‘],
    [‘lineJoin‘],
    [‘miterLimit‘],
    [‘lineWidth‘],
    [‘shadowBlur‘],
    [‘shadowColor‘],
    [‘shadowOffsetX‘],
    [‘shadowOffsetY‘]
];

/**
 * 画布通用设置
 *
 * @param ctx       画布句柄
 * @param style     通用样式
 */
Base.prototype.setContext = function (ctx, style) {
    for (var i = 0, len = STYLE_CTX_MAP.length; i < len; i++) {
        var styleProp = STYLE_CTX_MAP[i][0];
        var styleValue = style[styleProp];
        var ctxProp = STYLE_CTX_MAP[i][1] || styleProp;

        if (typeof styleValue != ‘undefined‘) {
            ctx[ctxProp] = styleValue;
        }
    }
};

    在原生的context赋值样式时，都是context.fillStyle = ‘#aaa‘; 但是经过zrender的抽象变得更加的易用，setContext就是负责原生canvasAPI与zrender.shape.style的转换， 其实有变化的就只有fillStyle,strokeStyle,globalAlpha。分别用style.color,style.strokeColor,opacity进行替换，不过这些原生API的属性名确实不那么平易近人。

  • 关于变形，暂时跳过
  • 开始beginPath，然后调用Base.buildPath，发现Base中没有buildPath的实现，上面说了嘛，在子类实现了，模板方法。下面举例 进行buildPath的分析

    // shape/Circle.js

/**
 * 创建圆形路径
 * @param {Context2D} ctx Canvas 2D上下文
 * @param {Object} style 样式
 */
buildPath : function (ctx, style) {
    ctx.arc(style.x, style.y, style.r, 0, Math.PI * 2, true);
    return;
},

//shape/Rectangle
/**
 * 创建矩形路径
 * @param {Context2D} ctx Canvas 2D上下文
 * @param {Object} style 样式
 */
buildPath : function(ctx, style) {
    if(!style.radius) {
        ctx.moveTo(style.x, style.y);
        ctx.lineTo(style.x + style.width, style.y);
        ctx.lineTo(style.x + style.width, style.y + style.height);
        ctx.lineTo(style.x, style.y + style.height);
        ctx.lineTo(style.x, style.y);
        //ctx.rect(style.x, style.y, style.width, style.height);
    } else {
        this._buildRadiusPath(ctx, style);
    }
    return;
},

    可以看到，在Circle类的buildPath中，只有一句话，那就是真正的Canvas画图的API调用，而在Rectangle中，用moveTo和lineTo画出了一个路径出来。

  • 如果是只能划线的shape，没有必要closePath，否则colsePath,以避免图形的乱线出现，然后根据brushType的类型，进行fill和stroke，注意，第一个case没有break，所以fill和stroke可以同时进行
  • 最后，处理图形上附属的文字。

    Base.prototype.drawText = function (ctx, style, normalStyle) {
    // 字体颜色策略
    var textColor = style.textColor || style.color || style.strokeColor;
    ctx.fillStyle = textColor;

    /*
    if (style.textPosition == ‘inside‘) {
        ctx.shadowColor = ‘rgba(0,0,0,0)‘;   // 内部文字不带shadowColor
    }
    */

    // 文本与图形间空白间隙
    var dd = 10;
    var al;         // 文本水平对齐
    var bl;         // 文本垂直对齐
    var tx;         // 文本横坐标
    var ty;         // 文本纵坐标

    var textPosition = style.textPosition       // 用户定义
                       || this.textPosition     // shape默认
                       || ‘top‘;                // 全局默认

    switch (textPosition) {
        case ‘inside‘:
        case ‘top‘:
        case ‘bottom‘:
        case ‘left‘:
        case ‘right‘:
            if (this.getRect) {
                var rect = (normalStyle || style).__rect
                           || this.getRect(normalStyle || style);

                switch (textPosition) {
                    case ‘inside‘:
                        tx = rect.x + rect.width / 2;
                        ty = rect.y + rect.height / 2;
                        al = ‘center‘;
                        bl = ‘middle‘;
                        // 如果brushType为both或者fill，那么就会有fill动作，这时，如果文字颜色跟填充颜色相同，文字就看不见了，所以把它变成白色
                        // 但是，如果文字颜色是白色呢，哎，不想了，太变态
                        if (style.brushType != ‘stroke‘
                            && textColor == style.color
                        ) {
                            ctx.fillStyle = ‘#fff‘;
                        }
                        break;
                    case ‘left‘:
                        tx = rect.x - dd; //间隙
                        ty = rect.y + rect.height / 2;
                        al = ‘end‘;
                        bl = ‘middle‘;
                        break;
                    case ‘right‘:
                        tx = rect.x + rect.width + dd;
                        ty = rect.y + rect.height / 2;
                        al = ‘start‘;
                        bl = ‘middle‘;
                        break;
                    case ‘top‘:
                        tx = rect.x + rect.width / 2;
                        ty = rect.y - dd;
                        al = ‘center‘;
                        bl = ‘bottom‘;
                        break;
                    case ‘bottom‘:
                        tx = rect.x + rect.width / 2;
                        ty = rect.y + rect.height + dd;
                        al = ‘center‘;
                        bl = ‘top‘;
                        break;
                }
            }
            break;
        case ‘start‘:
        case ‘end‘:
            var xStart;
            var xEnd;
            var yStart;
            var yEnd;
            if (typeof style.pointList != ‘undefined‘) {
                var pointList = style.pointList;
                if (pointList.length < 2) {
                    // 少于2个点就不画了~
                    return;
                }
                var length = pointList.length;
                switch (textPosition) {
                    case ‘start‘:
                        xStart = pointList[0][0];
                        xEnd = pointList[1][0];
                        yStart = pointList[0][1];
                        yEnd = pointList[1][1];
                        break;
                    case ‘end‘:
                        xStart = pointList[length - 2][0];
                        xEnd = pointList[length - 1][0];
                        yStart = pointList[length - 2][1];
                        yEnd = pointList[length - 1][1];
                        break;
                }
            }
            else {
                xStart = style.xStart || 0;
                xEnd = style.xEnd || 0;
                yStart = style.yStart || 0;
                yEnd = style.yEnd || 0;
            }

            switch (textPosition) {
                case ‘start‘:
                    al = xStart < xEnd ? ‘end‘ : ‘start‘;
                    bl = yStart < yEnd ? ‘bottom‘ : ‘top‘;
                    tx = xStart;
                    ty = yStart;
                    break;
                case ‘end‘:
                    al = xStart < xEnd ? ‘start‘ : ‘end‘;
                    bl = yStart < yEnd ? ‘top‘ : ‘bottom‘;
                    tx = xEnd;
                    ty = yEnd;
                    break;
            }
            dd -= 4;
            if (xStart != xEnd) {
                tx -= (al == ‘end‘ ? dd : -dd);
            }
            else {
                al = ‘center‘;
            }

            if (yStart != yEnd) {
                ty -= (bl == ‘bottom‘ ? dd : -dd);
            }
            else {
                bl = ‘middle‘;
            }
            break;
        case ‘specific‘:
            tx = style.textX || 0;
            ty = style.textY || 0;
            al = ‘start‘;
            bl = ‘middle‘;
            break;
    }

    if (tx != null && ty != null) {
        _fillText(
            ctx,
            style.text,
            tx, ty,
            style.textFont,
            style.textAlign || al,
            style.textBaseline || bl
        );
    }
};

// Circle.js 的getRect
/**
 * 返回矩形区域，用于局部刷新和文字定位
 * @param {Object} style
 */
getRect : function (style) {
    if (style.__rect) {
        return style.__rect;
    }

    var lineWidth;
    if (style.brushType == ‘stroke‘ || style.brushType == ‘fill‘) {
        lineWidth = style.lineWidth || 1;
    }
    else {
        lineWidth = 0;
    }
    style.__rect = {
        x : Math.round(style.x - style.r - lineWidth / 2),
        y : Math.round(style.y - style.r - lineWidth / 2),
        width : style.r * 2 + lineWidth,
        height : style.r * 2 + lineWidth
    };

    return style.__rect;
}
};
    • 关于textPosition的具体设置，请移步API
    • getRect还是一个模板方法，用来获取图形所在的矩形区域。用Circle说明，通过一系列的计算，得到圆形左上角的xy坐标，获得原型的矩形宽高，返回。其中，__rect是缓存作用
    • 其中，al表示的是canvasAPI中的context.textAlign，bl指的是textBaseLine，tx,ty是文字的基准坐标，请看 http://www.w3school.com.cn/tags/canvas_textalign.asp 和 http://www.w3school.com.cn/tags/canvas_textbaseline.asp
    • 如果textPosition为inside,left,right,top,bottom（分别表示在图形的中央，左边，右边，上边，下边），根据rect的信息进行tx/ty/al/bl的赋值
    • 如果是start或者end，只有直线和折线配置这两个，同理，根据rect的信息分情况进行tx/ty/al/bl的设置
    • 最后，拿到了tx/ty/al/bl/font/text，调用真正的画图方法_fillText

      function _fillText(ctx, text, x, y, textFont, textAlign, textBaseline) {
    if (textFont) {
        ctx.font = textFont;
    }
    ctx.textAlign = textAlign;
    ctx.textBaseline = textBaseline;
    var rect = _getTextRect(
        text, x, y, textFont, textAlign, textBaseline
    );

    text = (text + ‘‘).split(‘\n‘);
    var lineHeight = require(‘../tool/area‘).getTextHeight(‘国‘, textFont);

    switch (textBaseline) {
        case ‘top‘:
            y = rect.y;
            break;
        case ‘bottom‘:
            y = rect.y + lineHeight;
            break;
        default:
            y = rect.y + lineHeight / 2;
    }

    for (var i = 0, l = text.length; i < l; i++) {
        ctx.fillText(text[i], x, y);
        y += lineHeight;
    }
}
/**
 * 返回矩形区域，用于局部刷新和文字定位
 *
 * @inner
 * @param {Object} style
 */
function _getTextRect(text, x, y, textFont, textAlign, textBaseline) {
    var area = require(‘../tool/area‘);
    var width = area.getTextWidth(text, textFont);
    var lineHeight = area.getTextHeight(‘国‘, textFont);

    text = (text + ‘‘).split(‘\n‘);

    switch (textAlign) {
        case ‘end‘:
        case ‘right‘:
            x -= width;
            break;
        case ‘center‘:
            x -= (width / 2);
            break;
    }

    switch (textBaseline) {
        case ‘top‘:
            break;
        case ‘bottom‘:
            y -= lineHeight * text.length;
            break;
        default:
            y -= lineHeight * text.length / 2;
    }

    return {
        x : x,
        y : y,
        width : width,
        height : lineHeight * text.length
    };
}

//以下是tool/area.js中方法

/**
 * 测算多行文本高度
 * @param {Object} text
 * @param {Object} textFont
 */
function getTextHeight(text, textFont) {
    var key = text+‘:‘+textFont;
    if (_textHeightCache[key]) {
        return _textHeightCache[key];
    }

    _ctx = _ctx || util.getContext();

    _ctx.save();
    if (textFont) {
        _ctx.font = textFont;
    }

    text = (text + ‘‘).split(‘\n‘);
    //比较粗暴
    var height = (_ctx.measureText(‘国‘).width + 2) * text.length;

    _ctx.restore();

    _textHeightCache[key] = height;
    if (++_textHeightCacheCounter > TEXT_CACHE_MAX) {
        // 内存释放
        _textHeightCacheCounter = 0;
        _textHeightCache = {};
    }
    return height;
}
/**
 * 测算多行文本宽度
 * @param {Object} text
 * @param {Object} textFont
 */
function getTextWidth(text, textFont) {
    var key = text+‘:‘+textFont;
    if (_textWidthCache[key]) {
        return _textWidthCache[key];
    }
    _ctx = _ctx || util.getContext();
    _ctx.save();

    if (textFont) {
        _ctx.font = textFont;
    }

    text = (text + ‘‘).split(‘\n‘);
    var width = 0;
    for (var i = 0, l = text.length; i < l; i++) {
        width =  Math.max(
            _ctx.measureText(text[i]).width,
            width
        );
    }
    _ctx.restore();

    _textWidthCache[key] = width;
    if (++_textWidthCacheCounter > TEXT_CACHE_MAX) {
        // 内存释放
        _textWidthCacheCounter = 0;
        _textWidthCache = {};
    }

    return width;
}
      • 先设置context的textAlign和textBaseLine
      • 关于area.getTextHeight和area.getTextWidth，主要是用了canvas的原生measureText方法，还有一个缓存技巧。关于measureText，请看 http://www.w3school.com.cn/tags/canvas_measuretext.asp
      • _getTextRect获取了需要画的问题的热点区域，仍旧返回的是x/y/width/height
      • 在_fillText，获取到热点区域后，对行高做一些特殊处理之后，调用fillText进行真真正的绘制了。
  • 至此，brush方法分析完毕。

总结

写这些东西，真是很费时间，关于变形的设置，和其他图形的详细实现，等机缘到了，再续吧。下篇将继续Painter的分析。

时间： 2024-10-30 12:15:28

ZRender源码分析4：Painter(View层)-中的相关文章

ZRender源码分析3：Painter(View层)-上

回顾 上一篇说到:ZRender源码分析2:Storage(Model层),这次咱看来看看Painter-View层 总体理解 Painter这个类主要负责MVC中的V(View)层,负责将Storage中的shape对象绘制到canvas中,包括了:更新.渲染.变化大小.导出.修改等操作. Painter这个类还是很明显的构造函数,然后把方法赋值到Painter.prototype上,无新奇之处,下面为示例代码.只有在Painter.js末尾有一个内部的createDom函数, 很明显,传入i

ZRender源码分析2：Storage(Model层)

回顾 上一篇请移步:zrender源码分析1:总体结构 本篇进行ZRender的MVC结构中的M进行分析 总体理解 上篇说到,Storage负责MVC层中的Model,也就是模型,对于zrender来说,这个model就是shape对象,在1.x表现的还不强烈,到了2.x, 在zr.addShape()的时候,传入的参数就必须是new出来的对象了详情请看这里 2.x相比1.x的变化,关于这个变化多说点吧,那就是从1.x升级到2.x的时候,因为方式变了,总不能改掉所有的代码,总不能像ext一样,

ZRender源码分析5：Shape绘图详解

回顾 上一篇说到:ZRender源码分析4:Painter(View层)-中,这次,来补充一下具体的shape 关于热区的边框 以圆形为例: document.addEventListener('DOMContentLoaded', function () { var canvasDom = document.getElementById('canvasId'), context = canvasDom.getContext('2d'); context.lineWidth = 50; cont

zg手册 之 python2.7.7源码分析（1）-- python中的对象

源代码主要目录结构 Demo: python 的示例程序 Doc: 文档 Grammar: 用BNF的语法定义了Python的全部语法,提供给解析器使用 Include: 头文件,在用c/c++编写扩展模块时使用 Lib: Python自带的标准库,用python编写的 Modules: 用c编写的内建模块的实现,zlib,md5 等 Objects: 内建对象类型的实现 list,dict 等 PC:      windows 平台相关文件 PCbuild: Microsoft Visual

ABP源码分析四十七：ABP中的异常处理

ABP 中异常处理的思路是很清晰的.一共五种类型的异常类. AbpInitializationException用于封装ABP初始化过程中出现的异常,只要抛出AbpInitializationException异常就可以,无须做额外处理.这类异常往往是需要维护人员介入分析的. 其他四个异常都在AbpController中被集中处理,处理分为两步:一,通过EventBus触发异常事件,相应的异常处理函数则处理异常.而针对AbpValidationException,UserFriendlyExce

8.源码分析---从设计模式中看SOFARPC中的EventBus？

我们在前面分析客户端引用的时候会看到如下这段代码: // 产生开始调用事件 if (EventBus.isEnable(ClientStartInvokeEvent.class)) { EventBus.post(new ClientStartInvokeEvent(request)); } 这里用EventBus调用了一下post方法之后就什么也没做了,就方法名来看是发送了一个post请求,也不知道发给谁,到底有什么用. 所以这一节我们来分析一下EventBus这个类的作用. 首先我们来看一下

zrender源码分析1：总体结构

开始 zrender(Zlevel Render) 是一个轻量级的Canvas类库,这里是GitHub的网址 点我, 类似的类库有Kinetic.JS.EaselJS. 但貌似都没有zrender好用(可能是更加符合国人的习惯),强大的图表工具echarts就是在zrender基础上建立, 用zrender和echarts做了两个关于canvas的两个可视化项目之后,忍不住看了下zrender的项目代码(也有需要修改源代码的缘故), 但是翻开之后,代码的结构比较清晰,注释也都是中文,比较容易读懂

Spring源码分析（十三）缓存中获取单例bean

摘要:本文结合<Spring源码深度解析>来分析Spring 5.0.6版本的源代码.若有描述错误之处,欢迎指正. 介绍过FactoryBean的用法后,我们就可以了解bean加载的过程了.前面已经提到过,单 例在Spring的同一个容器内只会被创建一次,后续再获取bean直接从单例缓存中获取,当然这里也只是尝试加载,首先尝试从缓存中加载,然后再尝试从singletonFactories中加载. 因为在创建单例bean的时候会存在依赖注人的情况,而在创建依赖的时候为了避免循环依赖, Sprin

ZRender源码分析6：Shape对象详解之路径

开始 说到这里,就不得不提SVG的路径操作了,因为ZRender完全的模拟了SVG原生的path元素的用法,很是强大. 关于SVG的Path,请看这里: Path (英文版) 或者 [MDN]SVG教程(5) 路径 [译] (中文版), 很明显的是canvas中的路径没有SVG的用着舒服,那到底ZRender是如何实现的呢,让我给你娓娓道来(不过要想继续进行下去,上面的SVG的PATH必须了解.). 示例 打开API,shape.path,可以看到,path的配置有MLHVCSQTZ等字母组成的