1

我有来自本教程的 JavaScript/JQuery 代码

当我使用 1.5.2 版本的 JQuery 时，这段代码工作得很好。但是当我使用最新版本的 JQuery (1.9.1) 时，这段代码不起作用。需要更改此代码才能在最新的 JQuery 中工作。

这是一个带有 JQuery 1.5.2 的版本

这是一个带有 JQuery 1.9.1 的版本

如您所见，Jquery 1.5.2 有效，但 1.9.1 无效。

var canvas, ctx;
var circles = [];
var selectedCircle;
var hoveredCircle;

// -------------------------------------------------------------

// objects :

function Circle(x, y, radius){
    this.x = x;
    this.y = y;
    this.radius = radius;
}

// -------------------------------------------------------------

// draw functions :

function clear() { // clear canvas function
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}

function drawCircle(ctx, x, y, radius) { // draw circle function
    ctx.fillStyle = 'rgba(255, 35, 55, 1.0)';
    ctx.beginPath();
    ctx.arc(x, y, radius, 0, Math.PI*2, true);
    ctx.closePath();
    ctx.fill();
}

function drawScene() { // main drawScene function
    clear(); // clear canvas

    ctx.beginPath(); // custom shape begin
    ctx.fillStyle = 'rgba(255, 110, 110, 0.5)';
    ctx.moveTo(circles[0].x, circles[0].y);
    for (var i=0; i<circles.length; i++) {
        ctx.lineTo(circles[i].x, circles[i].y);
    }
    ctx.closePath(); // custom shape end
    ctx.fill(); // fill custom shape

    ctx.lineWidth = 5;
    ctx.strokeStyle = 'rgba(0, 0, 255, 0.5)';
    ctx.stroke(); // draw border

    for (var i=0; i<circles.length; i++) { // display all our circles
        drawCircle(ctx, circles[i].x, circles[i].y, (hoveredCircle == i) ? 25 : 15);
    }
}

// -------------------------------------------------------------

// initialization

$(function(){
    canvas = document.getElementById('scene');
    ctx = canvas.getContext('2d');

    var circleRadius = 15;
    var width = canvas.width;
    var height = canvas.height;

    var circlesCount = 7; // we will draw 7 circles randomly
    for (var i=0; i<circlesCount; i++) {
        var x = Math.random()*width;
        var y = Math.random()*height;
        circles.push(new Circle(x,y,circleRadius));
    }

    // binding mousedown event (for dragging)
    $('#scene').mousedown(function(e) {
        var canvasPosition = $(this).offset();
        var mouseX = e.layerX || 0;
        var mouseY = e.layerY || 0;
        for (var i=0; i<circles.length; i++) { // checking through all circles - are mouse down inside circle or not
            var circleX = circles[i].x;
            var circleY = circles[i].y;
            var radius = circles[i].radius;
            if (Math.pow(mouseX-circleX,2) + Math.pow(mouseY-circleY,2) < Math.pow(radius,2)) {
                selectedCircle = i;
                break;
            }
        }
    });

    $('#scene').mousemove(function(e) { // binding mousemove event for dragging selected circle
            var mouseX = e.layerX || 0;
            var mouseY = e.layerY || 0;
        if (selectedCircle != undefined) {
            var canvasPosition = $(this).offset();

            var radius = circles[selectedCircle].radius;
            circles[selectedCircle] = new Circle(mouseX, mouseY,radius); // changing position of selected circle
        }

        hoveredCircle = undefined;
        for (var i=0; i<circles.length; i++) { // checking through all circles - are mouse down inside circle or not
            var circleX = circles[i].x;
            var circleY = circles[i].y;
            var radius = circles[i].radius;
            if (Math.pow(mouseX-circleX,2) + Math.pow(mouseY-circleY,2) < Math.pow(radius,2)) {
                hoveredCircle = i;
                break;
            }
        }
    });

    $('#scene').mouseup(function(e) { // on mouseup - cleaning selectedCircle
        selectedCircle = undefined;
    });

    setInterval(drawScene, 30); // loop drawScene
});
4

2 回答 2

2

jQuery 不再盲目地将对象的所有属性Event从真实事件对象复制到 jQuery 提供的对象中，所以这些行：

var mouseX = e.layerX || 0;
var mouseY = e.layerY || 0;

...在and处理程序0中失败（总是返回mouseXand mouseY），因为jQuery 事件对象没有and 。mousedownmousemovelayerXlayerY

不过， jQuery 使原始事件对象可用作originalEvent，因此修复了它：

var mouseX = e.originalEvent.layerX || 0;
var mouseY = e.originalEvent.layerY || 0;

更新了 JSBin | 来源

或者兼容多个版本：

var mouseX = e.layerX || e.originalEvent.layerX || 0;
var mouseY = e.layerY || e.originalEvent.layerY || 0;

更新了 JSBin | 来源

于 2013-03-09T10:30:53.403 回答
1

改变：

e.layerX
e.layerY

到

e.originalEvent.layerX
e.originalEvent.layerY

那工作:)

( http://jsbin.com/ukagas/3/edit )

于 2013-03-09T10:31:58.227 回答