我正在尝试使用画布创建绘图区域.我在绘制曲线时让线条看起来很光滑时遇到了麻烦,而且我的算法中的线条粗细也有变化,看起来很糟糕,因为尺寸跳跃也很多,你可以看到尺寸变化的地方.我确实在stackoverflow上找到了这个链接,但这是一个原生的iPhone应用程序,我无法搞清楚.
这是我目前的JS代码.这是在jsFiddle上运行的
var xStart,
xEnd,
yStart,
yEnd,
paint,
ctx;
$(document).ready(function (){
ctx = $('canvas')[0].getContext("2d");
ctx.strokeStyle = '#000';
ctx.lineJoin="round";
ctx.lineCap="round";
ctx.lineWidth = 1;
$('canvas').bind('mousedown mousemove mouseup mouseleave touchstart touchmove touchend', function(e){
var orig = e.originalEvent;
if(e.type == 'mousedown'){
e.preventDefault(); e.stopPropagation();
xStart = e.clientX - $(this).offset().left;
yStart = e.clientY - $(this).offset().top;
xEnd = xStart;
yEnd = yStart;
paint = true;
draw(e.type);
}else if(e.type == 'mousemove'){
if(paint==true){
xEnd = e.clientX - $(this).offset().left;
yEnd = e.clientY - $(this).offset().top; …
Run Code Online (Sandbox Code Playgroud) 我正在研究一个记录笔画的应用程序,你用指点设备绘制它.
在上图中,我画了一个笔画,其中包含453个数据点.我的目标是在保持原始笔划形状的同时大幅减少数据点的数量.
对于那些感兴趣的人,上面描绘的笔画坐标可以作为GitHub的要点.
事实上,Adobe Illustrator可以很好地实现我想要实现的目标.如果我在Illustrator中绘制类似的笔触(使用书法笔刷),则生成的形状将简化为我们在下面看到的内容.绘制笔划时,它看起来与我的应用程序非常相似.释放鼠标按钮后,曲线将简化为我们在此处看到的内容:
我们可以看到,笔划只有14个数据点.虽然还有其他控制点可以定义贝塞尔样条曲线的倾斜度(或者它们正在使用的任何样条曲线).在这里,我们可以看到一些控制点:
我已经研究过像Ramer-Douglas-Peucker算法这样的算法,但这些算法似乎只从输入集中删除了点.如果我没有弄错的话,我正在寻找的方法也必须在集合中引入新的点来实现所需的曲线.
我遇到过类似iPhone平滑草图绘制算法的问题.但那些似乎专注于从一小组输入点创建平滑曲线.我觉得我有相反的情况.
可能重复:
iPhone平滑的草图绘制算法
我想开发一个支持草图绘制的iPhone应用程序.
我在touchesMoved中使用了这样的代码:
UIGraphicsBeginImageContext(self.view.frame.size);
[drawImage.image drawInRect:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height)];
CGContextSetLineCap(UIGraphicsGetCurrentContext(), kCGLineCapRound);
CGContextSetLineWidth(UIGraphicsGetCurrentContext(), 5.0);
CGContextSetRGBStrokeColor(UIGraphicsGetCurrentContext(), 0.0, 0.0, 1.0, 1.0);
CGContextBeginPath(UIGraphicsGetCurrentContext());
CGContextMoveToPoint(UIGraphicsGetCurrentContext(), points.pointB.x, points.pointB.y);
CGContextAddLineToPoint(UIGraphicsGetCurrentContext(), points.pointA.x, points.pointA.y);
CGContextStrokePath(UIGraphicsGetCurrentContext());
drawImage.image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
Run Code Online (Sandbox Code Playgroud)
看到:
曲线不够平滑.
我尝试过使用catforge.net/project /curve/files
看到:
这次曲线更平滑但有2个问题:
Catmull-Rom Spline使用许多三次贝塞尔曲线段和二次贝塞尔曲线段来形成曲线.当触摸结束时,不能确定二次贝塞尔曲线段.在用户将手指从屏幕上移开之前,我无法绘制二次线段.我只能在用户绘图时绘制立方体段,这样他会感到有些延迟.当手指快速移动时,曲线滞后于手指.
该算法过多地校正了角落,因此用户无法绘制具有尖角的星形.
我非常希望为用户提供非常好的绘图环境,例如Autodesk的"Sketch Book"应用程序.(见下图)
看到:
该应用程序提供平滑的曲线,它还允许我绘制一个尖角的星.
我怎么能在iPhone上这样做?我可以使用哪种算法来实现"Sketch Book"这样的高质量?我的参考代码?
谢谢!!
是否有任何iOS库可以提供用户可以在屏幕上绘制的自定义控件,并且可以将其导出为图像文件?
我正在研究一个应用程序,我必须绘制一条平滑的线,所以我按照这个链接平滑线平滑的草图绘制算法,我按照答案kyoji
.但现在我不知道如何实现撤消重做功能.
请帮忙
我可以绘制曲线,但不是很平滑.事实上,它完全分散注意力和波浪状.任何人都可以帮助我或建议一种使曲线平滑的方法吗?
提前致谢.
我有一个任务 - 画出平滑的曲线
输入:点集(实时添加)
当前解决方案:我使用每个4点绘制qubic Bezier曲线(1 - strart,2和3rd - 控制点,4 end).每条曲线的终点是下一条曲线的起点.
问题:在曲线连接处我经常有"断裂"(角度)
你能告诉我,如何更顺利地连接我的积分?
谢谢!
我使用uigraphics cgcontext在触摸上绘制线条...但我的线条不平滑我的意思是边缘不光滑所以任何人都可以建议我如何画出流畅的线条.这里是我用来画线的代码:
/* touchesBegan */
UITouch *touch = [touches anyObject];
lastPoint = [touch locationInView:imagevw];
/* touchesMoved */
CGFloat width = [mySlider value];
UIGraphicsBeginImageContext(imagevw.frame.size);
[imagevw.image drawInRect:CGRectMake(0, 0, imagevw.frame.size.width,imagevw.frame.size.height)];
CGContextSetLineCap(UIGraphicsGetCurrentContext(), kCGLineCapRound);
CGContextSetLineWidth(UIGraphicsGetCurrentContext(), width);
UITouch *touch = [touches anyObject];
mouseSwiped = YES;
CGPoint currentPoint = [touch locationInView:imagevw];
CGContextBeginPath(UIGraphicsGetCurrentContext());
CGContextMoveToPoint(UIGraphicsGetCurrentContext(), lastPoint.x, lastPoint.y);
CGContextAddLineToPoint(UIGraphicsGetCurrentContext(), currentPoint.x, currentPoint.y);
CGContextStrokePath(UIGraphicsGetCurrentContext());
imagevw.image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
lastPoint = currentPoint;
/* touchesEnded */
/* same here */
CGContextMoveToPoint(UIGraphicsGetCurrentContext(), lastPoint.x, lastPoint.y);
CGContextAddLineToPoint(UIGraphicsGetCurrentContext(), lastPoint.x, lastPoint.y);`
Run Code Online (Sandbox Code Playgroud)
这是我的代码,我可以画线自由,但它不是那么平滑显示像素我的意思是边缘不平滑
这可能与此问题重复,但我不知道如何在我的应用程序中应用此方法,以及我应该在cocos2d-x中使用哪种方法来绘制Bezier曲线.我的应用程序应该允许用户在触摸画布时绘制线条和曲线.我怎样才能做到这一点?
下面的代码在 UIImageView 上绘制点之间的直线。绘图渲染速度快,看起来不错,但可能会更好,所以我想修改代码以创建平滑的曲线。在过去的六周里,我在 Swift 中研究了许多示例,但成功率为零。
我必须修改以下代码的哪些部分(以及如何)来实现这一点?有人告诉我调用下面的代码片段而不是 CGContextAddLineToPoint() (在下面的 // 2 处)应该可以解决问题,但我不清楚如何调用它以及它如何与当前代码完全相关。
片段:
func drawQuadLineWithPoints(firstPoint: CGPoint, secondPoint: CGPoint, thirdPoint: CGPoint, inContext: CGContext) {
CGContextMoveToPoint(context, 0.5 * (firstPoint.x + secondPoint.x), 0.5 * (firstPoint.y + secondPoint.y));
CGContextAddQuadCurveToPoint(context, secondPoint.x, secondPoint.y, 0.5 * (secondPoint.x + thirdPoint.x), 0.5 * (secondPoint.y + thirdPoint.y));
}
Run Code Online (Sandbox Code Playgroud)
代码:
override func touchesBegan(touches: NSSet, withEvent event: UIEvent) {
swiped = false
if let touch = touches.anyObject() as? UITouch {
lastPoint = touch.locationInView(self.view)
}
}
func drawLineFrom(fromPoint: CGPoint, toPoint: CGPoint) {
// 1 …
Run Code Online (Sandbox Code Playgroud)