如何从直线创建曲线？ [英] How to create curves from straight lines?
问题描述
我在画布上有直线，由开始和结束定义 Point（x，y）。
I have straight lines on a canvas, that are defined by start and end Point(x,y).
现在我想让用户点击该行内的任意位置，而拖动鼠标时，该行应该形成一个曲线。
Now I want the user to click anywhere within the line, and while dragging the mouse, the line should be formed to a curve.
我知道 quadraticCurveTo（）和 bezierCurveTo（） c $ c> Canvas 。但他们都需要1-2个控制点。如果我不向用户呈现这些控制点，我从哪里获取这些控制点？
I know there are quadraticCurveTo() and bezierCurveTo() methods for a Canvas. But they all require 1-2 control points. From where do I take these controlpoints if I do not present them to the user? Can I calculate them based on where the user clicks?
推荐答案
如何将直线拖到曲线上
How to drag a straight line into a curve
>
给定3个点（开始，结束和鼠标），下面是如何计算控制点，它将在这3个点之间绘制一个二次贝塞尔曲线：
Given 3 points (start, end and mouse), here is how you calculate the control point that will draw a Quadratic Bezier curve between these 3 points:
// calc a control point
var cpX = 2*mouseX -startX/2 -endX/2;
var cpY = 2*mouseY -startY/2 -endY/2;
其余部分与用户拖动鼠标时重绘曲线一样简单
And the rest is as simple as redrawing the curve whenever the user drags the mouse
// draw a quad-curve
ctx.beginPath();
ctx.moveTo(startX, startY);
ctx.quadraticCurveTo(cpX, cpY, endX, endY);
ctx.stroke();
这里是代码和小提琴： http://jsfiddle.net/m1erickson/pp7Zy/
Here is code and a Fiddle: http://jsfiddle.net/m1erickson/pp7Zy/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; padding:10px; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
// get the position of the canvas
// relative to the window
var canvasOffset=$("#canvas").offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;
// set the start and end points
var startX=25;
var startY=50;
var endX=275;
var endY=200;
// some vars for the mouse position
var mouseX;
var mouseY;
var isDragging=false;
// set curve color and stroke-width
ctx.strokeStyle="blue"
ctx.fillStyle="red"
ctx.lineWidth=5;
// draw the startpoint, endpoint and line
// just to get the user some reference points
ctx.beginPath();
ctx.moveTo(startX,startY);
ctx.lineTo(endX,endY);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(startX,startY);
ctx.arc(startX,startY, 10, 0, 2 * Math.PI, false);
ctx.moveTo(endX,endY);
ctx.arc(endX,endY, 10, 0, 2 * Math.PI, false);
ctx.fill();
// when the user drags the mouse draw a quad-curve
// between the 2 points and the mouse position
function handleMouseMove(e){
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
// calc a control point
var cpX = 2*mouseX -startX/2 -endX/2;
var cpY = 2*mouseY -startY/2 -endY/2;
ctx.clearRect(0,0,canvas.width,canvas.height);
// draw a quad-curve
ctx.beginPath();
ctx.moveTo(startX, startY);
ctx.quadraticCurveTo(cpX, cpY, endX, endY);
ctx.stroke();
// draw the Start, End and Control points
ctx.beginPath();
ctx.moveTo(startX,startY);
ctx.arc(startX,startY, 10, 0, 2 * Math.PI, false);
ctx.moveTo(cpX,cpY);
ctx.arc(cpX,cpY, 10, 0, 2 * Math.PI, false);
ctx.moveTo(endX,endY);
ctx.arc(endX,endY, 10, 0, 2 * Math.PI, false);
ctx.fill();
}
$("#canvas").mousedown(function(e){isDragging=true;});
$("#canvas").mouseup(function(e){isDragging=false;});
$("#canvas").mousemove(function(e){if(isDragging){handleMouseMove(e);}});
}); // end $(function(){});
</script>
</head>
<body>
<p>Drag mouse to create quadratic bezier</p>
<p>that goes through the mouse position</p>
<canvas id="canvas" width=400 height=400></canvas>
</body>
</html>
这篇关于如何从直线创建曲线？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
