Question

我正在尝试制作一个弯曲的滑块，可以在其中单击并沿路径拖动圆圈。这工作正常但是当我拖动圆圈后将其拖动到某个位置时，它会回到它的原始位置

＆＃13;

var s=Snap('svg');
animateAlongPath = function (path, element) {
 var len = Snap.path.getTotalLength(path);
    var move = function(dx) {
        var movePoint=Snap.path.getPointAtLength(path, dx);
        this.attr({ cx: movePoint.x, cy: movePoint.y });
}


element.drag(move)
}  
var path=s.path('M10 200 q 120 -120 140 0 t 140 0').attr({
    fill:'none',
    stroke:'black'
});
var circle=s.circle(10,200,5);
animateAlongPath(path,circle)

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js"></script>
<svg width="500" height="500" ></svg>

＆＃13;

示例图片

enter image description here

Answer 1

要回答该特定问题，因为您在拖动时使用'dx'而不是'x'。所以'dx'（与拖动开始的差异）每次都会自然重置。

因此，对于移动函数，您需要使用x参数，例如

   @Transactional
    public static Result list(int page, String filter, String sortby, String order) {

        EntityManager em = JPA.em();

        FullTextEntityManager fullTextEntityManager = org.hibernate.search.jpa.Search.getFullTextEntityManager(em);

        QueryBuilder qb = fullTextEntityManager.getSearchFactory().buildQueryBuilder().forEntity(User.class).get();
        Query luceneQuery = qb
                        .keyword()
                        .onFields("firstname", "lastname", "email")
                        .matching(filter)
                        .createQuery();
        // wrap Lucene query in a javax.persistence.Query
        javax.persistence.Query jpaQuery = fullTextEntityManager.createFullTextQuery(luceneQuery, User.class);
        // execute search
        List result = jpaQuery.getResultList();

        Page<User> userPage = new Page<>(result,1,1,1);

        //Page<User> userPage = User.page(page, 30, sortby, order, filter);
        return ok(views.html.admin.customers.list.render(userPage, filter, sortby, order));
    }

jsfiddle

然而，你很可能不希望最终得到这个，因为你注意到它并不总是匹配。

我认为这是因为屏幕上的'x'或'dx'不会在曲线上翻转（由于使用曲线长度），它只能在直线上工作。

这超出了这个问题的范围，但我已经回答了类似的问题，这可能对SO question on dragging along line有所帮助，特别是如果你看看gradsearch func（我没想出来，我认为它是在原来的问题）。

第二次拖动时，捕捉拖动位置恢复正常

1 个答案: