线路质量非常低，锯齿状或模糊的边缘

我正在图纸上的应用程序和线路质量似乎相比其他绘图应用程序是非常低，参差不齐。线路质量非常低，锯齿状或模糊的边缘

或者，它可能是其他应用程序正在做的事情不是我做的不同。

我迄今所做的就是用图形属性来绘制线条。我还收集了鼠标移动事件的鼠标位置分配到路径后面。总结它：

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但也可以同样是一个形状或雪碧 - 任何带有图形属性）。同时我跟踪simplePath字符串中的鼠标位置。

当鼠标向上是我清除线图形和显示的路径图形元素。路径是不是这个很重要，但我发现它看起来比已经拟定，该行稍微干净。这可能是因为它具有像素提示（它不是更清洁）。有时候会有文物。而且我还包括它以防我因某种原因需要使用路径。

下面是截图：

像素暗示版本看起来更清晰，但它仍然是远远低于线在其他应用程序绘制的质量和在某些情况下，使得它看起来更锯齿。有什么我失踪？

注：我的Graphics2D包括和canvas2d，因为我相信这可能不涉及到具体的语言或平台，但可能与一般的画图。

来源

2017-06-20 1.21 gigawatts

您可能想要为用户可能输入的曲折添加一些平滑处理。像这里的绿色贝塞尔曲线：http://delimiter.ru/temp/bezier.png – Organis

@Organis是的。这看起来很棒！这就是我想念的。我需要做什么？我从哪说起呢？ –

我会在几分钟后发布数学。 – Organis

绿线由Graphics.cubicCurveTo（...）方法制造。最初，你有用户提供的点A1，A2，A3 ......一个列表。为了使用三次曲线，还需要分别为每个Ak分别绘制2个控制点CFk（向前）和CBk（向后）控制点，以便从A1开始绘制大曲线，并且从Ak-1到Ak的每条曲线片段都将采用参数.cubicCurveTo（CFK-1，CBK，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和一个被排除在外，但我相信你自己看着办他们在你自己的。

对于矢量数学，你可以使用ru.delimiter.math.Vector2D类（笛卡尔和极坐标作品）从我的小有用的东西集合：https://bitbucket.org/thydmitry/ru.delimiter/src/9083fb46ce1c/classes/ru/delimiter/math/

附：也许你不需要走这么极端，用红线就可以，这是一个简单的.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]);

来源

2017-06-20 17:01:21 Organis

有多种原因：

阶段的质量。在Flash Player中，您可以将stage quality设置为LOW，MEDIUM，HIGH，BEST，8x8,8x8Linear，16x16和16x16Linear。这会影响线路/路径上是否应用了抗锯齿以及应用了多少次。提高质量有助于提高质量，但在8x8和更高质量的Flash播放器中存在错误（非嵌入字体的字体大小减少了25％，图形伪影，渐变填充色数减少）。
像素贴紧。如果你有一个1像素的行，最终定位在一个半像素上，它会在两行上反锯齿。通常，抗锯齿增加了质量，但在偏移单像素线的情况下，它会降低质量。设置像素捕捉有帮助。
使用curveTo和cubicCurveTo而不是@Organis建议的线条点。不知道如何做到这一点呢。

会尝试后的差异图像在每种情况下，当我得到一个机会。

来源

2017-07-13 21:02:39

线路质量非常低，锯齿状或模糊的边缘

回答

相关问题