css怎么添加一條屬性能夠繪制一個(gè)矩形框

這篇文章主要介紹“css怎么添加一條屬性能夠繪制一個(gè)矩形框”，在日常操作中，相信很多人在css怎么添加一條屬性能夠繪制一個(gè)矩形框問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”css怎么添加一條屬性能夠繪制一個(gè)矩形框”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

添加一條屬性，它能夠繪制一個(gè)矩形框。它可以指定矩形邊的顏色，邊的寬度，邊的樣式，以及矩形區(qū)域。如：
picl:blue solid 2px rect(100px 300px 300px 100px);
picl為屬性名稱，blue為邊的顏色，solid為邊 的樣式，2px為邊的寬度，rect(100px 300px 200px 50px)為矩形區(qū)域。

步驟：

（1）.通過(guò)在 css/CSSPropertyNames.in文件中增加一個(gè)屬性名的關(guān)鍵字；
（2）.使用perl命令(#perl makeprop.pl)，生成對(duì)應(yīng)的.cpp和.h文件，這兩個(gè)文件包含了屬性名和屬性ID，以及屬性名的查找規(guī)則;
（3）.將（2）中生成 的兩個(gè)文件拷貝到generated/ 目錄下；
（4）.在CSSStyleSelector.cpp， CSSParser.cpp兩個(gè)文件中提供了屬性ID對(duì)應(yīng)的接口:(中間一些具體處理不詳細(xì)闡述，這里只說(shuō)明總體步驟)

a.在 CSSParser.cpp中的“bool CSSParser::parseValue(int propId, bool important)”函數(shù)中增加“case CSSPropertyPicl: ”以及對(duì)應(yīng)的處理代碼，它是網(wǎng)頁(yè)上css樣式中我們自定義屬性“picl”的解析的入口；
說(shuō)明：以此函數(shù)為起點(diǎn)，將picl中各種值進(jìn)行解析，判 斷值是否合法。如果合法，將其進(jìn)行保存，保存后會(huì)更新css樣式。我們所關(guān)心的是如何取出picl屬性的各個(gè)值，以及怎樣進(jìn)行保存，我們不必去修改與樣式 更新有關(guān)的代碼，當(dāng)解析完后，瀏覽器會(huì)更新css樣式，丟棄無(wú)效的樣式，只保留合法（有效）的樣式。由于picl屬性是復(fù)合屬性，添加本條屬性只需調(diào)用這 個(gè)文件中的“bool CSSParser::parseShorthand(int propId, const int *properties, int numProperties, bool important)”函數(shù)，它就會(huì)完成它里面對(duì)應(yīng)的各種單一屬性的解析。
b.如果屬性是單一 屬性，必須在CSSStyleSelector.cpp中的“void CSSStyleSelector::applyProperty(int id, CSSValue *value)”函數(shù)中添加對(duì)應(yīng)的case語(yǔ)句，它是css樣式執(zhí)行的入口。由于我們添加的屬性是一條復(fù)合屬性，它在執(zhí)行時(shí)會(huì)通過(guò)它里面的單一屬性進(jìn)行執(zhí) 行。因此，在CSSStyleSelector.cpp中的“void CSSStyleSelector::applyProperty(int id, CSSValue *value)”函數(shù)中不必添加本條屬性對(duì)應(yīng)的case語(yǔ)句。
說(shuō)明：我借助了border屬性的方法來(lái)保存“邊的顏 色，邊的寬度，邊的樣式”，我們主要需要做的是對(duì)矩形值的處理，以及設(shè)置一個(gè)執(zhí)行我們的“picl”屬性的標(biāo)志。我添加了一個(gè)單一屬性：hic，它主要保 存矩形的四個(gè)值。在CSSStyleSelector.cpp中，“邊的顏色，邊的寬度，邊的樣式”這三個(gè)值由類似border屬性處理方式進(jìn)行了傳遞， 矩形的值通過(guò)“ case CSSPropertyHic: ”來(lái)傳遞，當(dāng)“picl”屬性的標(biāo)志被激活時(shí)，則取出picl屬性的各個(gè)值，做如下處理：
paintInfo.context->setStrokeColor(); 設(shè)置邊的顏色；
paintInfo.context->setStrokeThickness(); 設(shè)置邊的寬度；
paintInfo.context->setStrokeStyle(); 設(shè)置邊邊的樣式；
paintInfo.context->drawLine(） 畫矩形的一條邊，需要畫四次。

修改的文件：
(1).webkit/WebCore/css/CSSPropertyNames.in 中，在文件末尾增加如下兩行：
hic;
picl;
(2).webkit/WebCore/css/CSSParser.cpp 中,CSSParser::parseValue()函數(shù)中增加“case CSSPropertyPicl: ”以及對(duì)應(yīng)的處理代碼。如下：
case CSSPropertyPicl: {
const int properties4 = { CSSPropertyBorderWidth, CSSPropertyBorderStyle,
CSSPropertyBorderColor, CSSPropertyHic};
return parseShorthand(propId, properties, 4, important);
}

(3).webkit/WebCore /css/CSSStyleSelector.cpp中，CSSStyleSelector::applyProperty()函數(shù)中添加對(duì)應(yīng)的 “case CSSPropertyHic: ”，這里取出矩形的四條邊的值，并傳送到下面。
(4).webkit/WebCore /rendering/RenderObject.h中添加hasHic(),getHicRect()兩個(gè)函數(shù)的定義。
(5).webkit/WebCore /rendering/style/RenderStyle.h中添加如下幾個(gè)函數(shù)：
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()函數(shù)的實(shí)現(xiàn)；
(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()函數(shù)中添加畫矩形的實(shí)現(xiàn)，以及getHicRect（） 函數(shù)的實(shí)現(xiàn)

到此，關(guān)于“css怎么添加一條屬性能夠繪制一個(gè)矩形框”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！