Как перетащить фигуру по заданному пути - PullRequest
Новая
       27

Как перетащить фигуру по заданному пути

12 голосов
/ 13 сентября 2011

У меня есть этот простой фиктивный файл, который я использую для тестирования.Предполагаемый результат - перетащить красный круг вдоль пути.Дело в том, что я не могу понять, как связать обе фигуры. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />    
    <script src="raphael-min.js"></script>    
</head>
<body>    
<script type="text/javascript">    
// Creates canvas 320 × 200 at 10, 50
var r = Raphael(10, 50, 320, 200);

var p = r.path("M100,100c0,50 100-50 100,0c0,50 -100-50 -100,0z").attr({stroke: "#ddd"}),
    e = r.ellipse(104, 100, 4, 4).attr({stroke: "none", fill: "#f00"}),


/*var c = r.circle(100, 100, 50).attr({
    fill: "hsb(.8, 1, 1)",
    stroke: "none",
    opacity: .5
});*/


var start = function () {
    // storing original coordinates
    this.ox = this.attr("cx");
    this.oy = this.attr("cy");
    this.attr({opacity: 1});
},
move = function (dx, dy) {
    // move will be called with dx and dy
    this.attr({cx: this.ox + dx, cy: this.oy + dy});
},
up = function () {
    // restoring state
    this.attr({opacity: 1});
};
e.drag(move, start, up);    
</script>
</body>
</html>

Ответы [ 2 ]

28 голосов
/ 15 октября 2012

Вы не указали, как именно вы хотите, чтобы взаимодействие работало, поэтому я использовал то, что мне кажется наиболее естественным.

Мы можем предположить, что точка должна оставаться на пути, поэтому ее положение должно быть задано

p.getPointAtLength(l);

для некоторых l.Чтобы найти l, мы можем найти минимум local расстояния между кривой и положением курсора.Мы инициализируем поиск с помощью l0, где l0 - это значение l , в настоящее время определяющее местоположение точки.

См. Здесь JSfiddle для рабочего примера:

http://jsfiddle.net/fuzic/kKLtH/

Вот код: 

var searchDl = 1;
var l = 0;

// Creates canvas 320 × 200 at 10, 50
var r = Raphael(10, 50, 320, 200);

var p = r.path("M100,100c0,50 100-50 100,0c0,50 -100-50 -100,0z").attr({stroke: "#ddd"}),
    pt = p.getPointAtLength(l);
    e = r.ellipse(pt.x, pt.y, 4, 4).attr({stroke: "none", fill: "#f00"}),
    totLen = p.getTotalLength(),


start = function () {
    // storing original coordinates
    this.ox = this.attr("cx");
    this.oy = this.attr("cy");
    this.attr({opacity: 1});
},
move = function (dx, dy) {
    var tmpPt = {
        x : this.ox + dx, 
        y : this.oy + dy
    };
    l = gradSearch(l, tmpPt);
    pt = p.getPointAtLength(l);
    this.attr({cx: pt.x, cy: pt.y});
},
up = function () {
    this.attr({opacity: 1});
},
gradSearch = function (l0, pt) {
    l0 = l0 + totLen;
    var l1 = l0,
        dist0 = dist(p.getPointAtLength(l0 % totLen), pt),
        dist1,
        searchDir;

    if (dist(p.getPointAtLength((l0 - searchDl) % totLen), pt) > 
       dist(p.getPointAtLength((l0 + searchDl) % totLen), pt)) {
        searchDir = searchDl;
    } else {
        searchDir = -searchDl;
    }

    l1 += searchDir;
    dist1 = dist(p.getPointAtLength(l1 % totLen), pt);
    while (dist1 < dist0) {
        dist0 = dist1;
        l1 += searchDir;
        dist1 = dist(p.getPointAtLength(l1 % totLen), pt);
    }
    l1 -= searchDir;

    return (l1 % totLen);
},
dist = function (pt1, pt2) {
    var dx = pt1.x - pt2.x;
    var dy = pt1.y - pt2.y;
    return Math.sqrt(dx * dx + dy * dy);
};
e.drag(move, start, up);​
1 голос
/ 15 октября 2012

Объект круга имеет координаты x, y для его центра и радиус.Чтобы убедиться, что круг остается на линии, просто найдите пересечение центра круга и самой линии.

Для этого вам нужно будет сохранить начальную и конечную координаты вашей линии.Затем, используя уравнение линии: y = mx + b, вы можете найти наклон и y-точку пересечения.Когда у вас есть функция для линии, вы можете сгенерировать новые координаты для круга, вставив различные значения x.

Кроме того, подключив координаты x, y круга к вашей функции, вы можете проверить, находится ли круг на линии.

...