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

這篇文章主要介紹“css怎么添加一條屬性能夠繪制一個矩形框”，在日常操作中，相信很多人在css怎么添加一條屬性能夠繪制一個矩形框問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”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（） 函數的實現

到此，關于“css怎么添加一條屬性能夠繪制一個矩形框”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！