Проверка наличия объекта вне холста (Raphael.js)

Question

В настоящее время я использую Raphael.js для перетаскивания круга вокруг холста. Однако я хотел бы запретить пользователю перетаскивать круг из холста. Мой код, как правило, выглядит следующим образом:

<script type="text/javascript" src="Javascript/raphael.js"></script>
    <script type="text/javascript">
        window.onload = function() {  
            //create canvas matching the image's dimensions
            var paper = new Raphael(document.getElementById('canvas_container'), <%=width%>, <%=height%>);

            //put the schematic image onto the canvas
            paper.image("<%=path%>",0,0,<%=width%>,<%=height%>);

            //create the marker on the canvas
            var c = paper.circle(<%=markerx%>, <%=markery%>, 5).attr({
                fill: "#800517",
                stroke: "none"

            });
            var start = function () {
                // storing original coordinates
                this.ox = this.attr("cx");
                this.oy = this.attr("cy");                    
            },
            move = function (dx, dy) {
                // move will be called with dx and dy
                if (this.ox + dx >= <%=width%> || this.oy + dy >= <%=height%>){
                    this.attr({cx: <%=width%>, cy: <%=height%>});
                }else{
                    this.attr({cx: this.ox + dx, cy: this.oy + dy});
                }
            },
            up = function () {
                // restoring state                    
            };

            c.drag(move, start, up);

        }
    </script> 

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

Answer 1

С оператором if вам не нужно ничего делать, если вы не хотите двигаться.Кроме того, не забывайте о радиусе окружности и не забывайте проверять, чтобы значение было маленьким, а не просто слишком большим:

                                                        // If the new position is
           if (this.ox + dx <= width - radius &&        // not too far right
               this.oy + dy <= height - radius &&       // and not too far down
               this.ox + dx >= 0 + radius &&            // and not too far left
               this.oy + dy >= 0 + radius)              // and not too far up
           {                                            // ... then move
                this.attr({cx: this.ox + dx, cy: this.oy + dy});  
           }                                            // else nothing

jsFiddle пример

Но мне нравится использовать min и max больше:

var nowX, nowY, w = ..., h=..., r=...,
move = function (dx, dy) {
    // move will be called with dx and dy
    // restrict movement of circle to within boundaries
        // You can combine the following 4 lines into 2 or even 1,
        //     but I left it as 4 for readability.
    nowX = Math.max(0 + r, this.ox + dx);
    nowY = Math.max(0 + r, this.oy + dy);
    nowX = Math.min(w - r, nowX);
    nowY = Math.min(h - r, nowY);    
    this.attr({cx: nowX, cy: nowY});
}

Итак, вот полный рабочий пример (jsFiddle)

window.onload = function() {
var nowX, nowY, w = 300, h=300, r=30, R = Raphael("canvas", w, h),   
    c = R.circle(100, 100, r).attr({
    fill: "hsb(.8, 1, 1)",
    stroke: "none",
    opacity: .5,
    cursor: "move"
});
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
    // restrict movement of circle to within boundaries
    nowX = Math.max(0 + r, this.ox + dx);
    nowY = Math.max(0 + r, this.oy + dy);
    nowX = Math.min(w - r, nowX);
    nowY = Math.min(h - r, nowY);    
    this.attr({cx: nowX, cy: nowY});
},
up = function () {
    // restoring state
    this.attr({opacity: .5});
};
c.drag(move, start, up);    
};​

Answer 2

Эй, ребята, мне удалось решить это. Я понял, что мне не следовало использовать this.attr для установки cx и cy, а вместо этого я должен был использовать c.attr для идентификации attr моего круга.