1

このチュートリアルから取得した JavaScript/JQuery コードがあります

JQuery の 1.5.2 バージョンを使用すると、このコードは問題なく動作します。しかし、最新バージョンの 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;

jQuery イベント オブジェクトにandがないため、 andハンドラーで失敗します (常にand0の両方で返されます) 。mouseXmouseYmousedownmousemovelayerXlayerY

ただし、 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 に答える