当前位置:首页 >> 网页制作

css添加一条属性能够绘制一个矩形框

添加一条属性,它能够绘制一个矩形框。它可以指定矩形边的颜色,边的宽度,边的样式,以及矩形区域。如:
picl:blue solid 2px rect(100px 300px 300px 100px);
picl为属性名称,blue为边的颜色,solid为边 的样式,2px为边的宽度,rect(100px 300px 200px 50px)为矩形区域。

步骤:

(1).通过在 css/CSSPropertyNames.in文件中增加一个属性名的关键字;
(2).使用perl命令(#perl makeprop.pl),生成对应的.cpp和.h文件,这两个文件包含了属性名和属性ID,以及属性名的查找规则;
(3).将(2)中生成 的两个文件拷贝到generated/ 目录下;
(4).在CSSStyleSelector.cpp, CSSParser.cpp两个文件中提供了属性ID对应的接口:(中间一些具体处理不详细阐述,这里只说明总体步骤)

a.在 CSSParser.cpp中的“bool CSSParser::parseValue(int propId, bool important)”函数中增加“case CSSPropertyPicl: ”以及对应的处理代码,它是网页上css样式中我们自定义属性“picl”的解析的入口;
说明:以此函数为起点,将picl中各种值进行解析,判 断值是否合法。如果合法,将其进行保存,保存后会更新css样式。我们所关心的是如何取出picl属性的各个值,以及怎样进行保存,我们不必去修改与样式 更新有关的代码,当解析完后,浏览器会更新css样式,丢弃无效的样式,只保留合法(有效)的样式。由于picl属性是复合属性,添加本条属性只需调用这 个文件中的“bool CSSParser::parseShorthand(int propId, const int *properties, int numProperties, bool important)”函数,它就会完成它里面对应的各种单一属性的解析。
b.如果属性是单一 属性,必须在CSSStyleSelector.cpp中的“void CSSStyleSelector::applyProperty(int id, CSSValue *value)”函数中添加对应的case语句,它是css样式执行的入口。由于我们添加的属性是一条复合属性,它在执行时会通过它里面的单一属性进行执 行。因此,在CSSStyleSelector.cpp中的“void CSSStyleSelector::applyProperty(int id, CSSValue *value)”函数中不必添加本条属性对应的case语句。
说明:我借助了border属性的方法来保存“边的颜 色,边的宽度,边的样式”,我们主要需要做的是对矩形值的处理,以及设置一个执行我们的“picl”属性的标志。我添加了一个单一属性:hic,它主要保 存矩形的四个值。在CSSStyleSelector.cpp中,“边的颜色,边的宽度,边的样式”这三个值由类似border属性处理方式进行了传递, 矩形的值通过“ case CSSPropertyHic: ”来传递,当“picl”属性的标志被激活时,则取出picl属性的各个值,做如下处理:
paintInfo.context->setStrokeColor(); 设置边的颜色;
paintInfo.context->setStrokeThickness(); 设置边的宽度;
paintInfo.context->setStrokeStyle(); 设置边边的样式;
paintInfo.context->drawLine() 画矩形的一条边,需要画四次。

修改的文件:
(1).webkit/WebCore/css/CSSPropertyNames.in 中,在文件末尾增加如下两行:
hic;
picl;
(2).webkit/WebCore/css/CSSParser.cpp 中,CSSParser::parseValue()函数中增加“case CSSPropertyPicl: ”以及对应的处理代码。如下:
case CSSPropertyPicl: {
const int properties4 = { CSSPropertyBorderWidth, CSSPropertyBorderStyle,
CSSPropertyBorderColor, CSSPropertyHic};
return parseShorthand(propId, properties, 4, important);
}

(3).webkit/WebCore /css/CSSStyleSelector.cpp中,CSSStyleSelector::applyProperty()函数中添加对应的 “case CSSPropertyHic: ”,这里取出矩形的四条边的值,并传送到下面。
(4).webkit/WebCore /rendering/RenderObject.h中添加hasHic(),getHicRect()两个函数的定义。
(5).webkit/WebCore /rendering/style/RenderStyle.h中添加如下几个函数:
Length hicLeft() const { return visual->hic.left(); }
Length hicRight() const { return visual->hic.right(); }
Length hicTop() const { return visual->hic.top(); }
Length hicBottom() const { return visual->hic.bottom(); }
LengthBox hic() const { return visual->hic; }
bool hasHic() const { return visual->hasHic; }
void setHasHic(bool b =true) { SET_VAR(visual, hasHic, b) }
void setHic(Length top, Length right, Length bottom, Length left);
(6).webkit/WebCore /rendering/style/RenderStyle.cpp中添加setHic()函数的实现;
(7).webkit/WebCore /rendering/style/StyleVisualData.h中添加:
LengthBox hic;
bool hasHic : 1; //hasHic
(8).webkit/WebCore/rendering/RendBox.h中添加:
virtual IntRect getHicRect(int tx, int ty);
(9).webkit/WebCore/rendering /RendBox.cpp中,RenderBox::paintBoxDecorations()函数中添加画矩形的实现,以及getHicRect() 函数的实现