0

この関数で jCanvas ライブラリを使用して、キャンバスにいくつかの図形を描画します。

var factoryCounter = 1;

$(".atom").click(function() {
    //get element by tag id
    var AtomId = jQuery(this).attr("id");
    var elementRef = "#el" + factoryCounter;
    $("canvas")
    .drawImage({
        source:'images/' + AtomId + '.png',
        layer: true,
        name: "myAtom" + factoryCounter,    //I need this value
          fillStyle: "#36b",
          strokeStyle: '#36b',
          strokeWidth: 0.3,
          x: 36, y: 28,
          width: 45, height: 35,
          radius: 100,
          ccw: true,
          draggable: true,
            click: function(layer) {
                            console.log("name")  //here I need to return "name", but don't know how.

        }                   
    });
    factoryCounter++;

ご覧のとおり、各形状には固有の名前があります。マウスでクリックした後、選択した形状の名前を返す関数を作成したいと思います。次のように、名前がわかっている形状の属性を正常に編集できます。

      $("canvas").setLayer("myAtom" + 2, {
    fillStyle: "#36b",
    width: 100, height: 200,
    rotate: 30
    })
         .drawLayers();
    });

しかし、それをクリックして既存の形状の名前を返す shapeSelect() 関数を実装する方法がわかりません。

4

1 に答える 1

0

よし、図書館をやっている人に聞いたら、彼は正しい答えを教えてくれた。必要な場合は、次の場所にあります。

クリック イベントを canvas 要素にバインドするのではなく、新しい jCanvas レイヤーごとにクリック イベントを設定します。これらのレイヤーの 1 つをクリックすると、作成したレイヤー プロパティ (layer.selected など) に基づいて、コールバック関数の動作が切り替わります。基本的な考え方は次のとおりです。

    $("canvas").drawImage({
// image properties here...
layer: true,
name: "someLayer",
selected: false,
click: function(layer) {
    if (layer.selected === false) {
        layer.selected = true;
        // do something with the layer name
    } else if (layer.selected === true) {
        layer.selected = false;
        // deselect the layer
    }
 }
});

-カレブ

于 2013-03-05T13:33:36.870 に答える