0

次のフィドルでは、画像をクリックしてドラッグできますが、青い境界線から出ることができません。赤と緑の長方形をクリックすると、画像を回転できます。ただし、回転したオブジェクトをクリックしてドラッグすると、画像はマウスに追従しません。マウスを回転させても画像が追従するようにしたいです。

http://jsfiddle.net/n3Sn5/

この問題は move 関数内で発生していると思います

move = function (dx, dy)
{
  nowX = Math.min(boundary.attr("x")+boundary.attr("width")-this.attr("width"), this.ox + dx);
  nowY = Math.min(boundary.attr("y")+boundary.attr("height")-this.attr("height"), this.oy + dy);
  nowX = Math.max(boundary.attr("x"), nowX);
  nowY = Math.max(boundary.attr("y"), nowY);

  this.attr({x: nowX, y: nowY });
}

注意すべきことの 1 つは、回転したオブジェクトをクリック アンド ドラッグするときに、マウス クリックを放した後に画像を回転させると、マウス クリックを放したときの位置にスナップし、境界にも従うことです。

以前は、回転した画像をマウスでドラッグすることができましたが、境界の四角形を追加することで、より複雑なアプローチを使用する必要がありました。

誰かが私が何を変える必要があるかについて考えを持っているなら、私はとても感謝しています! ありがとう！

4

2 に答える 2

1

必要な出力は、少し異なる方法で実現できます。http://jsfiddle.net/6BbRL/でフィドルを確認してください。デモ用の基本的な部分を維持するために、コードをトリミングしました。

var paper = Raphael(0, 0, 475, 475),
    boxX = 100,
    boxY = 100,
    boxWidth = 300,
    boxHeight = 200,
    // EDITED
    imgWidth = 50,
    imgHeight = 50,

    box = paper.rect(boxX, boxY, boxWidth, boxHeight).attr({fill:"#ffffff"}),
    // EDITED
    html5 = paper.image("http://www.w3.org/html/logo/downloads/HTML5_Badge_512.png",boxX+boxWidth-imgWidth,boxY+boxHeight-imgHeight,imgWidth,imgHeight)
        .attr({cursor: "move"}),

    elementCounterClockwise = paper.rect(180, 0, 50, 50).attr({fill:"#ff5555", cursor:"pointer"}),
    elementClockwise = paper.rect(250, 0, 50, 50).attr({ fill: "#55ff55", cursor: "pointer" }),

    boundary = paper.rect(50,50,400,300).attr({stroke: '#3333FF'}),

    transform,
    // EDITED
    xBound = {min: 50 + imgWidth/2, max: 450 - imgWidth/2},
    yBound = {min: 50 + imgHeight/2, max: 350 - imgHeight/2};

start = function (x, y) {
    // Find min and max values of dx and dy for "html5" element and store them for validating dx and dy in move()
    // This is required to impose a rectagular bound on drag movement of "html5" element.
    transform = html5.transform();
}

move = function (dx, dy, x, y) {
    // To restrict movement of the dragged element, Validate dx and dy before applying below.
    // Here, dx and dy are shifts along x and y axes, with respect to drag start position.
    // EDITED 
    var deltaX = x > xBound.max && xBound.max - x || x < xBound.min && xBound.min - x || 0;
        deltaY = y > yBound.max && yBound.max - y || y < yBound.min && yBound.min - y || 0;
    this.attr({transform: transform + 'T'+ [dx + deltaX, dy + deltaY]});     
}

up = function () {
};

html5.drag(move, start, up);

elementClockwise.click(function() {
  html5.animate({transform: '...r90'}, 100);
})

elementCounterClockwise.click(function() {
  html5.animate({transform: '...r-90'}, 100);
})

「...」を使用して既存の変換状態 (Raphael API) に変換を追加することは、ローテーションの問題にとって重要です。一方、要素をドラッグして平行移動するには絶対平行移動が必要であり、要素の平行移動中に要素の回転状態を無視します。

//メモを編集

ドラッグ境界が改善され、更新されました。ただし、マウスの位置と画像の中心の違いを組み込むには問題が残ります。

于 2013-06-03T17:37:10.130 に答える
0

回転とドラッグの問題を解決できます。回転を保存して、オブジェクトを移動した後に適用する必要があります。

elementClockwise.node.onclick = function()
{
    html5.animate({'transform': html5.transform() +'r90'}, 100, onAnimComplete);
}

elementCounterClockwise.node.onclick = function()
{
    html5.animate({'transform': html5.transform() +'r-90'}, 100, onAnimComplete);

}

function onAnimComplete(){
    default_transform = html5.transform();
}

現在、境界を機能させることはできませんが、後で試してみます。

http://jsfiddle.net/n3Sn5/2/

于 2013-06-03T16:20:34.247 に答える