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

前端  /  管理员 发布于 7年前   240

添加一条属性，它能够绘制一个矩形框。它可以指定矩形边的颜色，边的宽度，边的样式，以及矩形区域。如：
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（） 函数的实现