Question

我使用带有此功能的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++;

正如您所看到的，每个形状都有自己独特的名称。我想创建一个函数，用鼠标点击后返回所选形状的名称。我可以成功编辑NAME已知的形状的属性，如下所示：

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

但不知道如何实现shapeSelect（）函数，该函数通过单击返回现有形状的NAME。

Answer 1

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

好吧，不是将click事件绑定到canvas元素，而是为每个新的jCanvas层设置一个click事件。单击其中一个图层时，根据您创建的某个图层属性（例如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
    }
 }
});

-Caleb

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

1 个答案: