在SVG中模糊边界(Raphael.js)

Question

我正在开发一个基于Web的编辑器,可以拖动和调整元素大小.我有一个关于显示1px边框和元素的问题:而不是像素到像素的显示(例如1px实线),我有一个模糊的线.

我发现如果我在最后使用.5(例如10.5,124.5)和整数尺寸的coords,一切都是像素完美的.

这是一个例子.在改变它的坐标之前的元素:

之后(每个末尾的".5"和整数大小):

问题是我如何强迫Raphael.js以锐利的方式展示一切？

Answer 1

我不确定如何在Raphael中做到这一点,但一小部分CSS可以帮助你:

.your_lines {
     shape-rendering: crispEdges;
}

基本上它会关闭线条的抗锯齿,而不是水平或垂直的线条可能看起来不太漂亮.

但是你可能最好坚持在线的坐标上添加.5,因为浏览器会按照它们的要求进行操作:线条位于精确坐标上,线条两侧绘制笔划,此处半像素和半像素那里.