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

好吧，我问了做图书馆的那个人，他给了我正确的答案。如果你需要它，这里是：

好吧，与其将点击事件绑定到画布元素，不如为每个新的 jCanvas 层设置一个点击事件。当您单击其中一个图层时，根据您创建的某些图层属性（例如 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 回答