在画布中沿曲线路径绘制形状答案

【问题标题】：Drawing Shapes along a curved path in canvas在画布中沿曲线路径绘制形状
【发布时间】：2014-04-29 23:18:23
【问题描述】：

我一直在做一些谷歌搜索，但找不到答案（我想我问错了问题），但我想知道是否可以沿着路径绘制一组对象。

例如，是否可以使用 quadraticCurveTo() 绘制一条路径，然后沿着该曲线绘制一组圆？

提前致谢。

【问题讨论】：

你需要为此编写数学。

标签： javascript canvas kineticjs

【解决方案1】：

这个方程会沿着二次曲线给你一些间隔点。

在曲线的起点 T==0.00

在曲线的末端 T==1.00

function getQuadraticBezierXYatT(startPt,controlPt,endPt,T) {
    var x = Math.pow(1-T,2) * startPt.x + 2 * (1-T) * T * controlPt.x + Math.pow(T,2) * endPt.x; 
    var y = Math.pow(1-T,2) * startPt.y + 2 * (1-T) * T * controlPt.y + Math.pow(T,2) * endPt.y; 
    return( {x:x,y:y} );
}

所以你可以像这样沿着二次曲线绘制圆：http://jsfiddle.net/m1erickson/j79sK/

此代码示例使用 html 画布而不是 KineticJS 库，但您可以在此示例使用 context.arc 的位置轻松“新建”Kinetic.Circle

<!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; }
    canvas{border:1px solid red;}
</style>
<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    var startPoint={x:50,y:150};
    var controlPoint={x:125,y:20};
    var endPoint={x:200,y:150};

    ctx.beginPath();
    ctx.moveTo(startPoint.x,startPoint.y);
    ctx.quadraticCurveTo(controlPoint.x,controlPoint.y,endPoint.x,endPoint.y);
    ctx.stroke();

    for(var t=0;t<101;t+=5){
        var point=getQuadraticBezierXYatT(startPoint,controlPoint,endPoint,t/100);
        ctx.beginPath();
        ctx.arc(point.x,point.y,3,0,Math.PI*2);
        ctx.closePath();
        ctx.fillStyle=randomColor();
        ctx.fill();
    }

    function getQuadraticBezierXYatT(startPt,controlPt,endPt,T) {
        var x = Math.pow(1-T,2) * startPt.x + 2 * (1-T) * T * controlPt.x + Math.pow(T,2) * endPt.x; 
        var y = Math.pow(1-T,2) * startPt.y + 2 * (1-T) * T * controlPt.y + Math.pow(T,2) * endPt.y; 
        return( {x:x,y:y} );
    }

    function randomColor(){ 
        return('#'+Math.floor(Math.random()*16777215).toString(16));
    }

}); // end $(function(){});
</script>
</head>
<body>
    <button id="test">Test</button><br>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

【讨论】：

您的方法非常有趣，但您能否也为bezierCurveTo 推荐一种方法？

【解决方案2】：

是的...但是在原始 JavaScript 中执行此操作需要大量工作。解决它的最简单方法是使用 JavaScript 库来操作 HTML Canvas 元素 - 那里有几十个：Current State of Javascript Canvas Libraries?。

这是我的尝试：http://codepen.io/kaliedarik/pen/imxtf

（免责声明：我编写了 Scrawl.js）

【讨论】：