Question

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

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

提前致谢。

Answer 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/

enter image description here

此代码示例使用html canvas而不是KineticJS库，但您可以在此示例执行Kinetic.Circle

的位置轻松“新建”context.arc

<!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>

Answer 2

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

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

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

沿着画布中的弯曲路径绘制形状

2 个答案: