约束在三角形内 [英] constrain within a triangle

问题描述

我正在寻找可与jquery UI配合使用的通用代码段(javascript)，以限制div在三角形内的移动(拖动).

I am looking for a generic piece of code (javascript) that would work with jquery UI to constrain movement(drag) of a div within an triangle.

类似于此(http://stackoverflow.com/questions/8515900/how-to-constrain-movement-within-the-area-of-a-circle)，但是一个三角形，而不是一个圆形.

similar to this (http://stackoverflow.com/questions/8515900/how-to-constrain-movement-within-the-area-of-a-circle) but a triangle, and not a circle.

我希望将三角形定义为像这样的网状svg ...

I would prefer the triangle to be defined as a rapheal svg like this...

(function() {
  Raphael.fn.triangle = function (cx, cy, r) {
  r *= 1.75;
  return this.path("M".concat(cx, ",", cy, "m0-", r * .58, "l", r * .5, ",", r * .87, "-", r, ",0z"));
};

var paper = Raphael(document.getElementById("triangle"), "100%", "100%");
        var triangle = paper.triangle(100,100,90);
        triangle.attr("fill", "#444444");
        triangle.attr("stroke", "#444444");



$( "#draggable" ).draggable({ containment: "#triangle svgnode", scroll: false });

期待解决方案.

我想指出，如果更容易的话，可拖动元素也可以是svg节点.

I would like to note that the draggable element could also be a svg node if that is easier.

推荐答案

请参见此答案，其中显示了如何限制jQuery可拖动到任意路径.

See this answer which shows how to constrain a jquery draggable to an arbitrary path.

窍门是在drag事件中更改ui.position变量，以限制运动.

The trick is to alter the ui.position variables within the drag event, to constrain the movement.

这篇关于约束在三角形内的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！