繪製DOM「僞」線

我正在創建一個「diff-/ offset」顯示，我想在文本中的某些地方繪製一些「線」來顯示「diff」出現的位置。基本上，我想從這個獲得：繪製DOM「僞」線

enter image description here

本或類似的東西：

enter image description here

我知道的canvas元素，我可以用畫線，但我怎麼可能將這樣的圖像放在正確的位置？

有沒有像這樣的方法的「簡單」的CSS解決方案？

我可以遵循哪些最佳實踐？例如，任何工具提示插件/腳本必須使用類似的東西指向某個地方。

我很感謝任何幫助提示。原來鏈接到我的jsfiddle： http://jsfiddle.net/bKng6/

來源

2012-05-10 Andre Meinhold

純CSS：我不這麼認爲。 – HerrSerker

我不確定這是你想要的，但我有這個函數使用純JS和DOM：http://jsfiddle.net/JjarF/2/ – Mageek

我不知道什麼是預期的行爲，你的應用程序應該做的（談論與最終用戶的交互）。你沒有提到如何跨瀏覽器的解決方案。任何方式，我不認爲純粹的CSS（也CSS3）會解決它沒有一些JavaScript代碼片段。所以，我想補充tucuxi和FelipeAls's sugestions。

基本上，大約行了，有些事情要記住它的發展過程：

那裏有很多的解決方案，以劃清界線。正如Canvas所說，它可以成爲一種選擇，但我相信它不是最簡單的選擇。
tucuxi建議的工作示例是通過CSS annitations完成的，這是一個不錯的選擇，比canvas更簡單，可以通過改進完成FelipeAls's提出的相同設計。
如果您預期的與最終用戶的視覺交互接近FelipeAls的建議，默認情況下帶有2px邊框寬度的div加右邊框和邊框寬度設置爲0將解決您的線條疑問。我製作了樣本right here。在建議的示例中，我使用DOM相對位置來測量正確的行位置。雖然我使用jQuery來完成，但您始終可以在純JS或另一個基於DOM的庫（如Mootools）中執行此操作。

我真的很希望它能幫助你。

來源

2012-09-08 20:49:14 Miere

基本上可以畫任何你想要通過追加跨度你容器
DEMO
選擇一種顏色，就像你在做油漆用鼠標繪製。

來源

2012-05-10 11:11:29 skafandri

你想要標記的地方，將該行的右側包裹在一個範圍內。使用border-bottom和border-left屬性。

來源

2012-05-10 11:13:53

我想你應該更好地使用工具提示。我能用CSS想到的所有方式對我來說似乎都很難理解。

在這一個例如請看：http://jquerytools.org/demos/tooltip/index.html

我糾正自己：也許你可以得到你想要使用之前創建使用::一個元素是什麼。我不確定這是否是更好的選擇，取決於您的需求。

來源

2012-05-10 11:20:48 Cmorales

您可以使用jQuery的offset（）和width()/height()調用通過JavaScript查找偏移和尺寸。一旦你有源和目的地的框，這是一個繪製它們之間的線的問題。您可以使用純HTML + CSS，通過創建非常薄的彩色div並根據需要旋轉它們（如果使用正交線，就像在圖片中做的那樣，不需要旋轉）。

提供的jQuery元素e，你可以得到它的邊框（左，上，寬度和高度）使用：

function box(e) { 
    var b = e.offset(); 
    b.width = e.width(); 
    b.height = e.height(); 
    return b; 
}

看到這個working example，根據原來的小提琴和@ Mageek的評論。

來源

2012-09-07 13:15:48 tucuxi

通過結合：

絕對定位徵求意見（放置在HTML代碼接近被添加或刪除文本，以便它相對於放置到它）上僞由2個邊界
「箭頭」 :after
一個視覺提示文本被添加或與僞:before除去並生成內容「 - 」在CSS
目視隱藏文本屏幕閱讀器用戶那不知道什麼是增加了或刪除，因爲信息主要通過使用CSS中的顏色和生成的內容來傳達（只有VoiceOver會讀取它，而且我甚至不確定在這種情況下，因爲屏幕閱讀器傾向於忽略單個字符的原因，他們經常被濫用作爲使用HTML列表項應該已被使用的明文形式的列表的項目符號點）

它可能在純HTML/CSS中產生結果。它會很容易中斷（如果每行添加一個單詞，右側的評論將會在另一個上面），但是對於JS和:hover事件（對於有遠見的鍵盤用戶，加上:focus和tabindex，而不是忘記觸摸事件！）可以避免這種情況。
儘管如此，它仍然支持最多200％的縮放文本（Firefox中僅限「縮放文本」的第6級）。問題的關鍵在於修改的次數以及它們在文本中的接近程度，正確和絕對定位的評論長度。

==>DEMO in fiddle

snapshot of diff styled in pure HTML/CSS

來源

2012-09-07 21:17:56 FelipeAls

繪製DOM「僞」線

回答

相關問題