首页 文章

线条质量非常低，边缘锯齿或模糊

提问于
浏览 次
0

我正在使用绘图应用程序，与其他绘图应用程序相比，线条质量似乎非常低且呈锯齿状 .

或者可能是其他应用程序正在做一些与我正在做的事情不同的事情 .

到目前为止我所做的是使用graphics属性绘制线条 . 我还收集鼠标移动事件上的鼠标位置，以便稍后分配给路径 . 总结一下：

mouseDownHandler：使用

mouseDownPoint.x = event.stageX;
mouseDownPoint.y = event.stageY;
drawCommands.push(GraphicsPathCommand.MOVE_TO);
simplePath = "M " + mouseDownPoint.x + " " + mouseDownPoint.y;

MouseMoveHandler：

line.graphics.lineStyle(lineWeight, lineColor, lineAlpha, pixelHinting);
line.graphics.moveTo(previousPoint.x, previousPoint.y);
scaledPoint = new Point(localPoint.x/scaleX, localPoint.y/scaleY);
line.graphics.lineTo(scaledPoint.x, scaledPoint.y);
previousPoint.x = scaledPoint.x;
previousPoint.y = scaledPoint.y;
simplePath += " L " + scaledPoint.x + " " + scaledPoint.y;

MouseUpHandler：

myPath.data = simplePath;

当我绘制时，我更新了一行（它是一个UIComponent，但也可以是一个Shape或Sprite - 任何具有graphics属性的东西） . 同时我跟踪simplePath字符串中的鼠标位置 .

当鼠标按下时，我清除线条图形并显示路径图形元素 . 路径对此并不重要，但我注意到它看起来比绘制的线稍微干净一些 . 这可能是因为它有像素提示（它不是更清洁） . 有时会有文物 . 而且我包括它以防我出于某种原因需要使用路径 .

这是屏幕截图：

without pixel hinting

with pixel hinting

像素暗示的版本看起来更加清晰，但它仍然远低于其他应用程序中线条画的质量，在某些情况下，它使它看起来更加锯齿状 . 有什么我想念的吗？

注意：我包括graphics2d和canvas2d，因为我认为这可能与特定语言或平台无关，但可能与绘制图形有关 .

actionscript-3 flash graphics graphics2d

2 回答

  • 0

    绿线由 Graphics.cubicCurveTo(...) 方法生成 . 最初，您有一个用户提供的点A1，A2，A3 ... An的列表 . 为了使用三次曲线，你还需要为每个Ak分别绘制2个控制点CFk（向前）和CBk（向后），这样你就可以从A1开始绘制那条大曲线，从Ak-1到Ak的每个曲线片都需要参数 .cubicCurveTo(CFk-1, CBk, Ak);

    对于每个Ak（A1和An除外），您可以按如下方式计算CFk和CBk：

    (vector)AForward = (vector)(Ak+1 - Ak-1)
(vector)AForward.length = (vector)(Ak+1 - Ak).length / 3

CFk = Ak + (point)AForward

(vector)ABackward = (vector)(Ak-1 - Ak+1)
(vector)ABackward.length = (vector)(Ak-1 - Ak).length / 3

CBk = Ak + (point)ABackward

    然后，有A1和An被遗漏，但我相信你可以自己解决它们 .

    对于矢量数学，您可以使用 ru.delimiter.math.Vector2D class（适用于笛卡尔坐标和极坐标）来自我的一些有用的东西：https://bitbucket.org/thydmitry/ru.delimiter/src/9083fb46ce1c/classes/ru/delimiter/math/

    P.S. 也许你不需要走极端，用红线就行了，这很简单 .curveTo(Ak, (Ak + Ak+1)/2);

    UPD ：一种简单的算法，用于将曲线刻入由点阵列提供的锯齿形 .

    function middle(A:Point, B:Point):Point
{
    return new Point((A.x + B.x) / 2, (A.y + B.y) / 2);
}

function drawTo(target:Point):void
{
    graphics.lineTo(target.x, target.y);
}

function bendTo(control:Point, target:Point):void
{
    graphics.curveTo(control.x, control.y, target.x, target.y);
}

// This should contain at least 2 points before you start drawing.
var PP:Vector.<Point>;

// Go to the start position.
graphics.lineStyle(0, 0xFF0000);
graphics.moveTo(PP[0].x, PP[0].y);

// Draw a straight line to the center of the first zigzag segment.
drawTo(middle(PP[0], PP[1]));

// For each 3 consequent points A,B and C, connect
// the middle of AB and the middle of BC with a curve.
for (var i:int = 2; i < PP.length; i++)
{
    bendTo(PP[i - 1], middle(PP[i - 1], PP[i]));
}

// Connect the center of the last zigzag segment with the end point.
drawTo(PP[PP.length - 1]);
    回复于
  • 3

    原因有很多：

    • 舞台质量 . 在Flash Player中，您可以将stage quality设置为LOW，MEDIUM，HIGH，BEST，8x8,8x8Linear，16x16和16x16Linear . 这会影响是否在线/路径上应用抗锯齿以及应用了多少次 . 提高质量有助于8x8和更高质量的Flash Player中存在错误（非嵌入字体的字体大小减少了25％，图形伪影，渐变填充颜色数减少） .

    • Pixel snapping . 如果您的1px线最终位于半个像素上，则它会在两条线上反锯齿 . 通常抗锯齿可以提高质量，但在偏移单像素线的情况下会降低质量 . 设置像素对齐有帮助 .

    • 使用curveTo和cubicCurveTo而不是@Organis建议的线点 . 不知道该怎么做 .

    当我有机会时，会尝试在每种情况下发布差异图像 .

    回复于

相关问题