1

だから、私はたくさんのボタンを持っています.ユーザーがそれらの1つをラファエルの紙にドラッグして、ラファエルに最終的な座標で円またはある種の形状を描かせることができるようにしたいと思います. また、ドラッグする代わりにボタンをクリックする場合は、同じシンボルを事前設定された場所に配置する必要があります。

同様の質問があったことに気づき、それらを見ましたが、それらの例の一部が機能しないように見える理由がわかりません.

少し冗長で申し訳ありません - 私は Web 開発に非常に慣れていないため、すべての過負荷に少し圧倒されています。

これが私が使用しているJQueryです-

$(function() {
    var cnvH =$("#thisisthemainrow").height();
    var cnvW =$("#canvas").width();
    /*grabs height and width of container element*/

    var paper = new Raphael($("#canvas")[0],cnvW,cnvH); 
    insertSymbols(paper, cnvW, cnvH);
});
function insertSymbols(paper, cnvW, cnvH){
//symbol 1
    var x = 0;
    var y = 0;
    var isDragging = false;
    $("#symbol1")
         .mousedown(function() {
             $(window).mousemove(function() {
             isDragging = true;
             $(window).unbind("mousemove");
             });
         })
        .mouseup(function(e) {
            var wasDragging = isDragging;
            isDragging = false;
            $(window).unbind("mousemove");
            if (!wasDragging) {
                 x = cnvW/4;
                 y = cnvH/4;
            }
            else{
                x = e.pageX;
                y = e.pageY;
            }
        });
   if(x!=0 && y!=0){
       var foo = drawSymbol(paper, x, y, 50);
       foo.show();
   }

};
var drawSymbol=function(paper, x,y, radius){
    var circ=paper.circle(x,y,radius);
    circ.hide();
    return circ;

};

ボタン自体は、たとえば Twitter Bootstrap を使用して定義されます -

<button class="btn btn-large btn-block" type="button" id = "symbol1"><a href="#">Symbol 1</a></button>
4

0 に答える 0