js和vue实现曲线运动

最新推荐文章于 2023-03-01 11:36:57 发布

洱海之月

最新推荐文章于 2023-03-01 11:36:57 发布

阅读量662

点赞数

分类专栏： html vue.js 文章标签： html javascript html5

本文链接：https://blog.csdn.net/Elegant_Kevin/article/details/111897623

版权

vue.js 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

html

3 篇文章 0 订阅

订阅专栏

效果图

1、HTML+JavaScript实现曲线运动。index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<div style="position:absolute;left:0;top:0;width:500px;height:300px;overflow:hidden;">
<svg id="root" width="500" height="300" viewBox="0 0 500 300" xmlns="http://www.w3.org/2000/svg">
<title>svg</title>
<path d="M20,100 c80 -200 280 200 380 0 h-400" fill="none" stroke-width="1" stroke="gray" stroke-dasharray="3,3" />
</svg>
</div>
<div id="dotMove" style="position:absolute;width:6px;height:6px;overflow:hidden;background-color:#FF0000;"></div>
</body>
<script type="text/javascript">
/*
参考维基百科
http://zh.wikipedia.org/wiki/%E8%B2%9D%E8%8C%B2%E6%9B%B2%E7%B7%9A
*/
function Point2D(x,y){
  this.x=x||0.0;
  this.y=y||0.0;
}
/*
 cp在此是四個元素的陣列:
 cp[0]為起始點，或上圖中的P0
 cp[1]為第一個控制點，或上圖中的P1
 cp[2]為第二個控制點，或上圖中的P2
 cp[3]為結束點，或上圖中的P3
 t為參數值，0 <= t <= 1
*/
function PointOnCubicBezier( cp, t )
{
  var  ax, bx, cx;
  var  ay, by, cy;
  var  tSquared, tCubed;
  var  result = new Point2D ;
  /*計算多項式係數*/
  cx = 3.0 * (cp[1].x - cp[0].x);
  bx = 3.0 * (cp[2].x - cp[1].x) - cx;
  ax = cp[3].x - cp[0].x - cx - bx;
  cy = 3.0 * (cp[1].y - cp[0].y);
  by = 3.0 * (cp[2].y - cp[1].y) - cy;
  ay = cp[3].y - cp[0].y - cy - by;
  /*計算位於參數值t的曲線點*/
  tSquared = t * t;
  tCubed = tSquared * t;
  result.x = (ax * tCubed) + (bx * tSquared) + (cx * t) + cp[0].x;
  result.y = (ay * tCubed) + (by * tSquared) + (cy * t) + cp[0].y;
  return result;
}
/*
 ComputeBezier以控制點cp所產生的曲線點，填入Point2D結構的陣列。
 呼叫者必須分配足夠的記憶體以供輸出結果，其為<sizeof(Point2D) numberOfPoints>
*/
function ComputeBezier( cp, numberOfPoints, curve )
{
  var  dt;
  var  i;
  dt = 1.0 / ( numberOfPoints - 1 );
  for( i = 0; i < numberOfPoints; i++)
    curve[i] = PointOnCubicBezier( cp, i*dt );
}
var cp=[
  new Point2D(20, 0), new Point2D(100, 200), new Point2D(300, -200), new Point2D(400, 0)
];
var numberOfPoints=100;
var curve=[];
ComputeBezier( cp, numberOfPoints, curve );

var i=0, dot=document.getElementById("dotMove");
setInterval(function (){
  var j = (i<100)?i:(199-i);
  dot.style.left=curve[j].x+'px';
  dot.style.top=100-curve[j].y+'px';
  if(++i==200)i=0;
}, 50);


</script>
</html>

2、VUE是实现点的曲线运。index.vue

<template>
    <body>
        <div style="position:absolute;left:0;top:0;width:500px;height:300px;overflow:hidden;">
        <svg id="root" width="500" height="300" viewBox="0 0 500 300" xmlns="http://www.w3.org/2000/svg">
            <title>svg</title>
            <path d="M20,100 c80 -200 280 200 380 0 h-400" fill="none" stroke-width="1" stroke="gray" stroke-dasharray="3,3" />
        </svg>
        </div>
        <div id="dotMove" style="position:absolute;width:6px;height:6px;overflow:hidden;background-color:#FF0000;"></div>
    </body>
</template>
<script>
import jquery from 'jquery'
import { logger } from 'runjs/lib/common';
    export default {
        name: "konvaa",
        data() { 
            return {
                cp:[ { x:0, y:0 }, { x:0, y:0 }, { x:0, y:0 },{ x:0, y:0 } ],
                numberOfPoints:100,
                curve:[],
                i:0, 
                dot:null,
                k:0,
            }
        },
        mounted(){ //CSS界面渲染前执行
            this.dot=document.getElementById("dotMove");
            this.cp[0]=this.Point2D(20,0);
            this.cp[1]=this.Point2D(100,200);
            this.cp[2]=this.Point2D(300,-300);
            this.cp[3]=this.Point2D(400,0);
            this.ComputeBezier(this.cp,this.numberOfPoints,this.curve);

            if(this.timer){
                clearIntreval(this.timer);
            }else{
                this.timer=setInterval(()=>{
                this.abcd();
                },50);
            }
        },
        destroyed()
        {
            clearIntreval(this.timer)
        },
        created(){ //CSS界面渲染后执行
        },
        methods: {
            abcd(){
                var left=0,top=0;
                var j = (this.i<100)?this.i:(199-this.i);
                left = this.curve[j].x;
                top = 100-this.curve[j].y;

                //this.dot.style.left=this.curve[j].x+'px';
                //this.dot.style.top=100-curve[j].y+'px';
                console.info("left:"+left+"top:"+top);
                jquery('#dotMove').css("left", left + "px");
                jquery('#dotMove').css("top", top + "px");
                if(++this.i==200)this.i=0;
            },
            update()
            {
                this.$message({
                message: "加载",
                type: "success"
                });
            },
            Point2D(x,y){
                return { "x":x||0.0, "y":y||0.0 };
            },
            PointOnCubicBezier( cp, t )
            {
                var  ax, bx, cx;
                var  ay, by, cy;
                var  tSquared, tCubed;
                var  result = {"X":0, "y":0};
                /*計算多項式係數*/
                cx = 3.0 * (cp[1].x - cp[0].x);
                bx = 3.0 * (cp[2].x - cp[1].x) - cx;
                ax = cp[3].x - cp[0].x - cx - bx;
                cy = 3.0 * (cp[1].y - cp[0].y);
                by = 3.0 * (cp[2].y - cp[1].y) - cy;
                ay = cp[3].y - cp[0].y - cy - by;
                /*計算位於參數值t的曲線點*/
                tSquared = t * t;
                tCubed = tSquared * t;


                result.x = (ax * tCubed) + (bx * tSquared) + (cx * t) + cp[0].x;
                result.y = (ay * tCubed) + (by * tSquared) + (cy * t) + cp[0].y;
                return result;
            },
            ComputeBezier( cp, numberOfPoints, curve )
            {
                var  dt;
                var  i;
                dt = 1.0 / ( numberOfPoints - 1 );
                for( i = 0; i < numberOfPoints; i++) {
                    var item=this.PointOnCubicBezier( cp, i*dt );
                    this.curve.push(item); //向集合中添加item
                }
            }


        }
    }
</script>

3、html实现点的运动

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="D:/jquery-1.7.1/jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
        var guijipoints = [];
        var index = 0;
        $(document).ready(function () {
            var ps = [{ x: 0, y: 0 }, { x: 100, y: 200 }, { x: 200, y: 10 }, { x: 300, y: 400 }, { x: 400, y: 20 }, { x: 200, y: 500 }, { x: 500, y: 30 }, { x: 700, y: 300 }, { x: 800, y: 800 }, { x: 800, y: 800 }];
            guijipoints = CreateBezierPoints(ps, 1000);
            var moveobj = $("#move_div");
            setInterval(function () {
                var p = guijipoints[index];
                console.log(p.x);
                moveobj.css({ left: p.x, top: p.y });
                index++;
                if (index >= guijipoints.length) {
                    index = 0;
                }
            }, 1000 / 100);
            guijipoints.forEach(function (obj, i) {
                createDiv(obj.x, obj.y);
            });
        });

        function createDiv(x, y) {
            $("body").append('<div style="position: absolute; width: 2px; height: 2px; left:' + x + 'px;top:' + y + 'px; overflow: hidden; background-color: #FF0000"></div>');
        }

        //anchorpoints：贝塞尔基点
        //pointsAmount：生成的点数
        function CreateBezierPoints(anchorpoints, pointsAmount) {
            var points = [];
            for (var i = 0; i < pointsAmount; i++) {
                var point = MultiPointBezier(anchorpoints, i / pointsAmount);
                points.push(point);
            }
            return points;
        }

        function MultiPointBezier(points, t) {
            var len = points.length;
            var x = 0, y = 0;
            var erxiangshi = function (start, end) {
                var cs = 1, bcs = 1;
                while (end > 0) {
                    cs *= start;
                    bcs *= end;
                    start--;
                    end--;
                }
                return (cs / bcs);
            };
            for (var i = 0; i < len; i++) {
                var point = points[i];
                x += point.x * Math.pow((1 - t), (len - 1 - i)) * Math.pow(t, i) * (erxiangshi(len - 1, i));
                y += point.y * Math.pow((1 - t), (len - 1 - i)) * Math.pow(t, i) * (erxiangshi(len - 1, i));
            }
            return { x: x, y: y };
        }

    </script>

</head>

<body>
    <div id="move_div" style=" position: absolute; left: 0px; top: 0px; height: 10px; width: 10px; background-color: red; "></div>
</body>
</html>

洱海之月

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js和vue实现曲线运动

效果图1、HTML+JavaScript实现曲线运动。index.html<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="
复制链接

扫一扫