赛贝尔曲线工具

作者：不正经 | 2024-05-17 00:03:43
踩
赛贝尔曲线工具
因为需要使用到赛贝尔曲线的相关工具。去做些特效或者路径什么的然后发现了一个工具同不错的就是赛贝尔曲线工具又因为感觉这个不错。于是我就....把他扒下来了。你们可以自行修改这个的相关参数调解canvas的宽与高活再右边添加不同选项。下载一个webStorm 那下面的复制粘贴一下你就可以使用了下面是代码
此代码进过了自己的一些修改添加的。里面又有赛贝尔函数，也有使用说明。大家只需要下载一个webStorm把这个页面。然后创建一个新的空工程，再创建一个html的页面。然后把下面的全部复制。放到刚刚创建好的html的页面上就可以了。具体如何创建可以webStrom的可以百度一下
因为是在之前的作者基础之上修改过了翻译了一下。同时添加了原网址，与使用方法的介绍。与赛贝尔函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
 
        /* CSS */
        body
        {
            font-family: arial, helvetica, sans-serif;
            font-size: 85%;
            margin: 10px 15px;
            color: #333;
            background-color: #ddd;
        }
 
        h1
        {
            font-size: 1.6em;
            font-weight: normal;
            margin: 0 0 0.3em 0;
        }
 
        h2
        {
            font-size: 1.4em;
            font-weight: normal;
            margin: 1.5em 0 0 0;
        }
 
        p
        {
            margin: 1em 0;
        }
 
        #canvas
        {
            display: inline;
            float: left;
            margin: 0 10px 10px 0;
            background-color: #fff;
            /*width: 750px;*/
            /*height: 1206px;*/
        }
 
        #code
        {
            display: block;
            width: auto;
            height: 100%;
            font-family: monospace;
            font-size: 1em;
            padding: 2px 4px;
            margin: 0;
            color: #555;
            background-color: #eee;
            border: 1px solid #999;
            overflow: auto;
        }
    </style>
</head>
<body>
 
 
    <h1>赛贝尔曲线</h1>
 
    <canvas id="canvas" width="750" height="1206"  class="bezier"></canvas>
    <pre id="code">code</pre>
 
    <p>他演示展示了如何在画布元素上绘制B_zier曲线。拖动线条端点或控制点以更改曲线。</p>
 
    <p>更多的内容请前往:<br />
        <a href="http://blogs.sitepoint.com/html5-canvas-draw-bezier-curves/">如何使用塞北贝尔函数在canvas画出图形</a></p>
 
    <p>又或者是这个:<br />
        <a href="http://blogs.sitepoint.com/html5-canvas-draw-quadratic-curves/">如何使用塞北贝尔函数在canvas画出图形</a></p>
 
    <h2>Disclaimer (免责声明)</h2>
    <p>代码是由 <a href="http://twitter.com/craigbuckler">Craig Buckler</a> of <a href="http://optimalworks.net/">OptimalWorks.net</a> for <a href="http://sitepoint.com/">SitePoint.com</a>.</p>
 
    <p>代码可以在没有任何限制的情况下使用，但请不要期望24小时支持！请链接至sitepoint.com.</p>
 
    <p>！！我是之前抓下来的网址  如果你认为这个页面很好使用，这边是之前官方版本的网页 <a href="http://blogs.sitepointstatic.com/examples/tech/canvas-curves/bezier-curve.html">请点击这里</a></a>跳转到原创作者的网页.</p>
 
 
    <script>
 
        /*
 * Canvas curves example
 *
 * By Craig Buckler,		http://twitter.com/craigbuckler
 * of OptimalWorks.net		http://optimalworks.net/
 * for SitePoint.com		http://sitepoint.com/
 *
 * Refer to:
 * http://blogs.sitepoint.com/html5-canvas-draw-quadratic-curves/
 * http://blogs.sitepoint.com/html5-canvas-draw-bezier-curves/
 *
 * This code can be used without restriction.
 */
 
        (function() {
 
            var canvas, ctx, code, point, style, drag = null, dPoint;
 
            // define initial points
            function Init(quadratic) {
 
                point = {
                    p1: { x:100, y:250 },
                    p2: { x:400, y:250 }
                };
 
                if (quadratic) {
                    point.cp1 = { x: 250, y: 100 };
                }
                else {
                    point.cp1 = { x: 150, y: 100 };
                    point.cp2 = { x: 350, y: 100 };
                }
 
                // default styles
                style = {
                    curve:	{ width: 6, color: "#333" },
                    cpline:	{ width: 1, color: "#C00" },
                    point: { radius: 10, width: 2, color: "#900", fill: "rgba(200,200,200,0.5)", arc1: 0, arc2: 2 * Math.PI }
                }
 
                // line style defaults
                ctx.lineCap = "round";
                ctx.lineJoin = "round";
 
                // event handlers
                canvas.onmousedown = DragStart;
                canvas.onmousemove = Dragging;
                canvas.onmouseup = canvas.onmouseout = DragEnd;
 
                DrawCanvas();
            }
 
 
            // draw canvas
            function DrawCanvas() {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
 
                // control lines
                ctx.lineWidth = style.cpline.width;
                ctx.strokeStyle = style.cpline.color;
                ctx.beginPath();
                ctx.moveTo(point.p1.x, point.p1.y);
                ctx.lineTo(point.cp1.x, point.cp1.y);
                if (point.cp2) {
                    ctx.moveTo(point.p2.x, point.p2.y);
                    ctx.lineTo(point.cp2.x, point.cp2.y);
                }
                else {
                    ctx.lineTo(point.p2.x, point.p2.y);
                }
                ctx.stroke();
 
                // curve
                ctx.lineWidth = style.curve.width;
                ctx.strokeStyle = style.curve.color;
                ctx.beginPath();
                ctx.moveTo(point.p1.x, point.p1.y);
                if (point.cp2) {
                    ctx.bezierCurveTo(point.cp1.x, point.cp1.y, point.cp2.x, point.cp2.y, point.p2.x, point.p2.y);
                }
                else {
                    ctx.quadraticCurveTo(point.cp1.x, point.cp1.y, point.p2.x, point.p2.y);
                }
                ctx.stroke();
 
                // control points
                for (var p in point) {
                    ctx.lineWidth = style.point.width;
                    ctx.strokeStyle = style.point.color;
                    ctx.fillStyle = style.point.fill;
                    ctx.beginPath();
                    ctx.arc(point[p].x, point[p].y, style.point.radius, style.point.arc1, style.point.arc2, true);
                    ctx.fill();
                    ctx.stroke();
                }
 
                ShowCode();
            }
 
 
            // show canvas code
            function ShowCode() {
                if (code) {
                    code.firstChild.nodeValue =
                        "他演示展示了如何在画布元素上绘制B_zier曲线。拖动线条端点或控制点以更改曲线。\n"+
                        "canvas = document.getElementById(\"canvas\");\n"+
                        "ctx = canvas.getContext(\"2d\")\n"+
                        "ctx.lineWidth = " + style.curve.width +
                        ";\nctx.strokeStyle = \"" + style.curve.color +
                        "\";\nctx.beginPath();\n" +
                        "ctx.moveTo(" + point.p1.x + ", " + point.p1.y +");\n" +
                        (point.cp2 ?
                                "ctx.bezierCurveTo("+point.cp1.x+", "+point.cp1.y+", "+point.cp2.x+", "+point.cp2.y+", "+point.p2.x+", "+point.p2.y+");" :
                                "ctx.quadraticCurveTo("+point.cp1.x+", "+point.cp1.y+", "+point.p2.x+", "+point.p2.y+");"
                        ) +
                        "ctx.stroke();"+
                        "\n"+
                        "\n起始点坐标：(" + point.p1.x + ", " + point.p1.y +")"+
                        "\n起始点的参数坐标("+point.cp1.x +","+point.cp1.y +")"+
                        "\n终点的参数坐标("+point.cp2.x +","+point.cp2.y +")"+
                        "\n终点的坐标("+point.p2.x +","+point.p2.y +")"+
                        "\n"+
                        "\n三次赛贝尔的公式  传入的是anchorpoints=([{起始点坐标},{起始点的参数坐标x},{终点的参数坐标},{终点的坐标}])"+
                        "\n三次赛贝尔的公式  格式是bser([{x,y},{x,y},{x,y},{x,y}],speed)"+
                        "\n 传入的是anchorpoints(第一个数组是起始点的xy也就是ctx.moveTo后面的数组,第二个数组就是第四个参数是ctx.bezierCurveTo中的数组参数,最后一个单独的参数是速度是多少)"+
                        "\n下面的是三次赛贝尔的公式  格式是bser([{" + point.p1.x + "," + point.p1.y +"},{"+point.cp1.x +","+point.cp1.y +"},{"+point.cp2.x +","+point.cp2.y +"},{"+point.p2.x +","+point.p2.y +"}],100)"+
                        "\n   static bser(anchorpoints, pointsAmount) {\n" +
                        "        let points = [];\n" +
                        "        for (let i = 0; i < pointsAmount; i++) {\n" +
                        "            let point = MultiPointBezier(anchorpoints, i / pointsAmount);\n" +
                        "            points.push(point);\n" +
                        "        }\n" +
                        "        return points;\n" +
                        "        function MultiPointBezier(points_, t) {//t贞数\n" +
                        "            let len = points_.length;\n" +
                        "            let x = 0, y = 0;\n" +
                        "            let erxiangshi = function (start, end) {\n" +
                        "                let cs = 1, bcs = 1;\n" +
                        "                while (end > 0) {\n" +
                        "                    cs *= start;\n" +
                        "                    bcs *= end;\n" +
                        "                    start--;\n" +
                        "                    end--;\n" +
                        "                }\n" +
                        "                return (cs / bcs);\n" +
                        "            };\n" +
                        "            for (let i = 0; i < len; i++) {\n" +
                        "                let point = points_[i];\n" +
                        "                x +=/*Math.round()*/ point.x * Math.pow((1 - t), (len - 1 - i)) * Math.pow(t, i) * (erxiangshi(len - 1, i));//x弧度\n" +
                        "                y +=/*Math.round()*/ point.y * Math.pow((1 - t), (len - 1 - i)) * Math.pow(t, i) * (erxiangshi(len - 1, i));//y弧度\n" +
                        "            }\n" +
                        "            return { e: x, f: y };\n" +
                        "        }\n" +
                        "    }"
 
 
 
 
                    ;
 
 
 
 
                }
            }
 
 
            // start dragging
            function DragStart(e) {
                e = MousePos(e);
                var dx, dy;
                for (var p in point) {
                    dx = point[p].x - e.x;
                    dy = point[p].y - e.y;
                    if ((dx * dx) + (dy * dy) < style.point.radius * style.point.radius) {
                        drag = p;
                        dPoint = e;
                        canvas.style.cursor = "move";
                        return;
                    }
                }
            }
 
 
            // dragging
            function Dragging(e) {
                if (drag) {
                    e = MousePos(e);
                    point[drag].x += e.x - dPoint.x;
                    point[drag].y += e.y - dPoint.y;
                    dPoint = e;
                    DrawCanvas();
                }
            }
 
 
            // end dragging
            function DragEnd(e) {
                drag = null;
                canvas.style.cursor = "default";
                DrawCanvas();
            }
 
 
            // event parser
            function MousePos(event) {
                event = (event ? event : window.event);
                return {
                    x: event.pageX - canvas.offsetLeft,
                    y: event.pageY - canvas.offsetTop
                }
            }
 
 
            // start
            canvas = document.getElementById("canvas");
            code = document.getElementById("code");
            if (canvas.getContext) {
                ctx = canvas.getContext("2d");
                Init(canvas.className == "quadratic");
            }
 
        })();
 
        // static bser(anchorpoints, pointsAmount) {
        //     let points = [];
        //     for (let i = 0; i < pointsAmount; i++) {
        //         let point = MultiPointBezier(anchorpoints, i / pointsAmount);
        //         points.push(point);
        //     }
        //     return points;
        //     function MultiPointBezier(points_, t) {//t贞数
        //         let len = points_.length;
        //         let x = 0, y = 0;
        //         let erxiangshi = function (start, end) {
        //             let cs = 1, bcs = 1;
        //             while (end > 0) {
        //                 cs *= start;
        //                 bcs *= end;
        //                 start--;
        //                 end--;
        //             }
        //             return (cs / bcs);
        //         };
        //         for (let i = 0; i < len; i++) {
        //             let point = points_[i];
        //             x +=/*Math.round()*/ point.x * Math.pow((1 - t), (len - 1 - i)) * Math.pow(t, i) * (erxiangshi(len - 1, i));//x弧度
        //             y +=/*Math.round()*/ point.y * Math.pow((1 - t), (len - 1 - i)) * Math.pow(t, i) * (erxiangshi(len - 1, i));//y弧度
        //         }
        //         return { e: x, f: y };
        //     }
        // }
 
 
    </script>
</body>
</html>
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/不正经/article/detail/581009