个人中心
gpt4 book ai didi

java - 如何从直线创建曲线？

转载 作者：塔克拉玛干 更新时间：2023-11-02 19:29:43 28 4
gpt4 key购买 nike

我在 Canvas 上有直线，由起点和终点 Point(x,y) 定义。

现在我希望用户单击线内的任意位置，同时拖动鼠标，线应该形成一条曲线。

我知道 Canvas 有 quadraticCurveTo() 和 bezierCurveTo() 方法。但是他们都需要1-2个控制点。如果我不向用户展示这些控制点，我从哪里获取这些控制点？我可以根据用户点击的位置来计算它们吗？

最佳答案

如何将直线拖成曲线

enter image description here

给定 3 个点(开始点、结束点和鼠标)，以下是计算将在这 3 个点之间绘制二次贝塞尔曲线的控制点的方法:

        // calc a control point
        var cpX = 2*mouseX -startX/2 -endX/2;
        var cpY = 2*mouseY -startY/2 -endY/2;

剩下的就像用户拖动鼠标时重新绘制曲线一样简单

        // draw a quad-curve
        ctx.beginPath();
        ctx.moveTo(startX, startY);
        ctx.quadraticCurveTo(cpX, cpY, endX, endY);
        ctx.stroke();

这是代码和 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>

关于java - 如何从直线创建曲线？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15975283/

28 4 0
文章推荐： java - Play Framework 2.0 json - 接收空 JsonNode 对象
文章推荐： java - 如何使用 mockito 测试 ehcache？
文章推荐： java - Spring AOP 通用类型
文章推荐： java - 如何与另一个类的 GUI 通信
塔克拉玛干
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com