Question

我正在开发一个基于Web的编辑器，可以拖动和调整元素大小。我有一个关于显示1px边框和元素的问题：而不是像素到像素的显示（例如1px实线）我得到了模糊线。

我发现，如果我在末尾使用带有.5的坐标（例如10.5,124.5）和整数尺寸，那么一切都是像素完美的。

以下是示例。在改变它的坐标之前的元素：

之后（每个结尾处的“.5”和整数）：

问题是如何强迫Raphael.js以锐利的方式显示所有内容？

Answer 1

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

.your_lines {
     shape-rendering: crispEdges;
}

基本上它会关闭线条的抗锯齿，非水平或垂直的线条可能看起来不太漂亮。

但是你可能最好坚持在线的坐标上添加.5，因为浏览器会按照它们的要求进行操作：线条位于精确坐标上，线条两边都画有笔画，这里半像素那里有一半像素。

Answer 2

这个链接带你指出整数坐标出了什么问题，为什么 +0.5 是固定边缘模糊（带有漂亮的图片 !!）：

您可以通过以下方式避免 +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图像中的所有形状产生影响....

Answer 3

根据@ gavenkoa的回答，您可以使用 Raphael 执行此操作：

var paper = Raphael('#container');
if (Raphael.svg) {
    paper.setViewBox(0.5, 0.5, paper.width, paper.height);
}

请注意Raphael.svg检查，因为您不将0.5px班次应用于IE＆lt; = 8（使用VML）。

在SVG中模糊边界（Raphael.js）

3 个答案: