PIXI 根据点走地图（8）
先了解下数学公式例如：
图已知:a、b两点的坐标, c到a的距离d 。求c点的坐标。
求 cy 可以根据d / a到b距离 = a到c垂直距离 / a 到 b的垂直距离。
首先求a到b的距离
r = sqrt((x1- x2)*(x1 - x2) +(y1 - y2)*(y1 - y2));
cy = (d*(y2-y1))/r + y1;
同理可得
cx = (d*(x2-x1))/r + x1;
思路也是根据这个公式来进行的借用下。
下图，运动坐标点，红色是运动物体，虚点是路径
1、定义坐标点：A、B、C、D ...取到每个坐标点的值
var pointArr = [ {x: 342, y: 702}, {x: 171, y: 532}, {x: 335, y: 415}, {x: 172, y: 285} ];
2、 指定变量，例如:AB两点假定距离为200（每段距离固定）， 行走的步数为 500
// 假设两点之间距离步数 var targetStep = 200; // 行走步数 var walkingStep = 500;
3、计算500属于地图上那个一段
/** * * @param stepNum 已走步数 * @param val 区间值固定值 200 */ function sectionVal(stepNum, val){ return stepNum%val==0?stepNum/val:Math.ceil(stepNum/val) }
4、返回两点距离
/** * * @param pointA 起始点 * @param pointB 第二个点 * @returns {number} 两点距离 */ function pointDist(pointA, pointB){ // return Math.sqrt((x1- x2)*(x1 - x2) +(y1 - y2)*(y1 - y2)); return Math.sqrt((pointA.x- pointB.x)*(pointA.x - pointB.x) +(pointA.y - pointB.y)*(pointA.y - pointB.y)); }
5、两点之间，d点的距离
function posPoint(walkCount, r){ var nextPos = walkCount / (targetStep / r); return nextPos }
例如：
a点到b点假定为：200步；
a点到b点实际为100长
走100步， ab实际位置应该：100/(200/100)
function posPoint(walkCount, r){ var nextPos = walkCount / (targetStep / r); return nextPos }
6、根据ab点上行走实际步数d，
function nextDis(pointA, pointB, d, r){ cx = (d*(pointB.x-pointA.x))/r + pointA.x; cy = (d*(pointB.y-pointA.y))/r + pointA.y; return { x: cx, y: cy } }
// TODO 开始行走步数 300 // =========属于那个区间？========= var sectionVal = sectionVal(walkingStep, targetStep); console.log(sectionVal); // 2 var idx = 1; // 开始执行动画 startSpeed(targetStep); function startSpeed(step){ var r = pointDist(pointArr[idx-1], pointArr[idx]); // var d = posPoint(200, r); // 行走步数、 r两点距离 返回：直线的距离 if(idx != sectionVal){ var d = posPoint(step, r); // 行走步数、 r两点距离 返回：直线的距离 var movePoint = nextDis(pointArr[idx-1], pointArr[idx], d, r); //d 距离; r两点之间距离 $('.sportPoint').animate({ left: movePoint.x, top: movePoint.y },2000, 'linear',function(){ idx++; startSpeed(targetStep); }); }else{ var residualValue = walkingStep%targetStep == 0? targetStep : walkingStep%targetStep; var d1 = posPoint(residualValue, r); var movePoint1 = nextDis(pointArr[idx-1], pointArr[idx], d1, r); //d 距离; r两点之间距离 $('.sportPoint').animate({ left: movePoint1.x, top: movePoint1.y },2000, 'linear',function(){ // alert('end') }); } }
------------------------------------------------
初始步数，从指定步数移动点
首先，根据初始步数，知道该步数在那一个路线上（1区间）。例如100步数
ab 两点距离为100， 200ab两点的目标步数
var step = 100/(200/100 ); // 50是 100步，在ab两点行走的距离d;
知道，ab两点距离及d 能求出d点的坐标。就是该点。
从d点坐标执行下个点移动，也就是当前点，
举例
100在第一区间，值为 1 ，在数组中表示为 [ 0 ] , [ 1 ], 找到区间中间坐标点。开始向下个点移动 [ 1 ] ,也就是值 1；
先这样理解这。
在PIXI表现也是一样的。创建舞台添加进舞台上，让坐标点移动。
实现上 。。。。。想到那就写到那。。。不是很好。但实现上可以运行参考。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>地图坐标</title>
<script src="jquery-2.1.4.min.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
.bg{
background: url(map.jpg) no-repeat;
width: 500px;
height: 800px;
position: relative;
font-size: 30px;
}
.pointA{
position: absolute;
top: 702px;
left:342px;
border: 1px solid blue;
display: inline-block;
}
.pointB{
position: absolute;
top: 532px;
left:171px;
border: 1px solid blue;
display: inline-block;
}
.pointC{
position: absolute;
top: 419px;
left:335px;
border: 1px solid blue;
display: inline-block;
}
.pointD{
position: absolute;
top: 288px;
left:176px;
border: 1px solid blue;
display: inline-block;
}
.sportPoint{
width: 5px;
height: 5px;
border: 2px solid red;
background: red;
position: absolute;
border-radius: 50%;
display: inline-block;
top: 702px;
left:342px;
}
</style>
</head>
<body>
<div class="bg">
<span class="pointA"><b>A</b></span>
<span class="pointB"><b>B</b></span>
<span class="pointC"><b>C</b></span>
<span class="pointD"><b>D</b></span>
<span class="sportPoint"></span>
</div>
<script>
var pointArr = [
{x: 342, y: 702},
{x: 171, y: 532},
{x: 335, y: 415},
{x: 172, y: 285}
];
// 共600步 ,每一段 200
// 假设两点之间距离步数
var targetStep = 200;
// 行走步数
var walkingStep = 500;
//0. 计算步数属于那个区间
/**
*
* @param stepNum 已走步数
* @param val 区间值固定值 200
*/
function sectionVal(stepNum, val){
return stepNum%val==0?stepNum/val:Math.ceil(stepNum/val)
}
/**
*
* @param pointA 起始点
* @param pointB 第二个点
* @returns {number} 两点距离
*/
function pointDist(pointA, pointB){
// return Math.sqrt((x1- x2)*(x1 - x2) +(y1 - y2)*(y1 - y2));
return Math.sqrt((pointA.x- pointB.x)*(pointA.x - pointB.x) +(pointA.y - pointB.y)*(pointA.y - pointB.y));
}
// 2、知道"距离"求下个点坐标
function posPoint(walkCount, r){
var nextPos = walkCount / (targetStep / r);
return nextPos
}
// 3、根据距离，知坐标点
function nextDis(pointA, pointB, d, r){
cx = (d*(pointB.x-pointA.x))/r + pointA.x;
cy = (d*(pointB.y-pointA.y))/r + pointA.y;
return {
x: cx,
y: cy
}
}
// TODO 开始行走步数 300
// =========属于那个区间？=========
var sectionVal = sectionVal(walkingStep, targetStep);
console.log(sectionVal); // 2
var idx = 1;
// 开始执行动画
startSpeed(targetStep);
function startSpeed(step){
var r = pointDist(pointArr[idx-1], pointArr[idx]);
// var d = posPoint(200, r); // 行走步数、 r两点距离 返回：直线的距离
if(idx != sectionVal){
var d = posPoint(step, r); // 行走步数、 r两点距离 返回：直线的距离
var movePoint = nextDis(pointArr[idx-1], pointArr[idx], d, r); //d 距离; r两点之间距离
$('.sportPoint').animate({
left: movePoint.x,
top: movePoint.y
},2000, 'linear',function(){
idx++;
startSpeed(targetStep);
});
}else{
var residualValue = walkingStep%targetStep == 0? targetStep : walkingStep%targetStep;
var d1 = posPoint(residualValue, r);
var movePoint1 = nextDis(pointArr[idx-1], pointArr[idx], d1, r); //d 距离; r两点之间距离
$('.sportPoint').animate({
left: movePoint1.x,
top: movePoint1.y
},2000, 'linear',function(){
// alert('end')
});
}
}
// 从指定点开始移动，假设B点
</script>
</body>
</html>
