如何在画布上选择形状并返回其名称？答案

【问题标题】：How to select shape on canvas and return its name?如何在画布上选择形状并返回其名称？
【发布时间】：2013-03-07 20:16:43
【问题描述】：

我使用带有此功能的 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() 函数，该函数通过单击返回现有形状的名称。

【问题讨论】：

你有没有尝试过？
主要问题是一旦创建了一个形状，它可以被拖动（如draggable:true）但不能被选中。我发现选择形状的唯一方法是 $("canvas").setLayer("myAtom"+1,{ ..attributes.. })。
继续编辑您的问题，然后提及。让人们知道您的尝试很重要，这样他们才能进一步帮助您。

标签： jquery jcanvas

【解决方案1】：

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

好吧，与其将点击事件绑定到画布元素，不如为每个新的 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
    }
 }
});

-迦勒

【讨论】：