raphaeljs中的線寬

在SVG或raphaeljs中創建1px權重的線是真的嗎？raphaeljs中的線寬

後續代碼

var p = Paper.path("M1 1 L50 1"); 
p.attr("stroke", "#D7D7D7"); 
p.attr("stroke-width", "1"); 
p.attr("opacity", 0.5);

畫線，它看起來像的2px或3px的。任何選擇？

來源

2011-11-07 Neir0

類似於http：//計算器。com/questions/7589650/drawing-grid-with-jquery-svg-produce-2px-lines-instead-of-1 –

當我研究一個類似的問題時，我來到這裏：我有一個raphael畫布左移-0.5px在CSS中。原因是爲上述情況實施的renderfix（）。在這裏找到更多：https://github.com/DmitryBaranovskiy/raphael/issues/614 –

當SVG線位於它們明顯正確的座標上時，它們實際上位於像素之間，因此當您指定M1 1 L50 1時，它會在像素的頂部和半部分上繪製半像素，使其看起來像一個厚的，半透明線。

要解決這個問題，你需要在半個像素處繪製，或者將你的元素轉換半個像素，即。 element.translate(0.5, 0.5)

你可以看到模糊和銳利的線條在這裏： http://jsfiddle.net/k8AKy/

來源

2011-11-07 15:10:22 Duopixel

你也應該使用Paper.renderfix()功能，因爲你不知道你的用戶將會使用的瀏覽器。

從documentation

修復火狐和IE9關於像素渲染的問題。如果紙張在迴流之後依賴於其他元素，則它可能會移動一半像素，導致線條失去其清晰度。該方法修復了的問題。

來源

2011-11-08 23:06:36 Chasbeen

此鏈接會將你點什麼有整數座標腳麻爲什麼+0.5固定邊緣模糊（漂亮圖片 !!）：

比較：

blurred

與+0.5：

enter image description here

你能避免+0.5由：

 
SVG_Area.setAttribute("viewBox", "0.5 0.5 " + width + " " + height);

或包裝：

 
function fiXY(x) { return parseInt(x) + 0.5; } 

var rect = document.createElementNS(SVGobj.svgNS, "rect"); 
rect.setAttribute("x", fiXY(x)); 
rect.setAttribute("y", fiXY(y));

或：

 
SVG_Area.setAttribute("shape-rendering", "crispEdges");

在你SVG圖像中的所有形狀，這效果....

來源

2013-01-17 19:38:19 gavenkoa

也看看http://stackoverflow.com/questions/7051703/blurring-borders-in-svg-raphael-js/ – gavenkoa

raphaeljs中的線寬

回答

相關問題