paperjs select 项并在鼠标单击时删除

Question

我想创建 select 项并在需要时将其删除。

例如：-

我在一个canvas上有一条直线和一个矩形，如果用户要删除它怎么办？

我可以跟踪点击事件，但如果与其他项目重叠会怎样。

HTML

jquery/paperjs

$(document).ready(function(){

paper.install(window)
paper.setup('myCanvas')
var tool = new Tool();
tool.minDistance = 10

project.currentStyle = {
        strokeColor: 'red',
        fillColor: '#ff0000',
        strokeWidth: 3
    };


 var from = new Point(20, 20);
var to = new Point(80, 80);
var path = new Path.Line(from, to);


var rectangle = new Rectangle(new Point(100, 100), new Point(150, 150));
var path = new Path.Rectangle(rectangle);
path.fillColor = '#e9e9ff';
//path.selected = true;

})

http://jsfiddle.net/nak7zbpw/1/

Answer 1

我不太确定您要做什么 - 代码不处理点击事件，我不确定重叠的哪些方面与您有关。

但这里有一些可能有用的东西。

rectangle.onClick = function (e) {
    // do what you need to do, like delete the item
}

如果矩形没有填充颜色，则您无法点击它的内部，因此您必须执行如下操作：

view.onClick = function (e) {
    if (rectangle.contains(e.point)) {
        // do what you need to do
    }
}

您还可以设置颜色并使 alpha 非常低，这样它就不会显示。

您绘制的最后一个项目位于图层的顶部，因此如果多个项目共享同一点，则点击该项目。你如何处理这取决于你。如果它不在层的顶部，您可以使用 rectangle.hitTest(e.point)。或者您可以使用 layer.hitTestAll(e.point) 或 group.hitTestAll(e.point) 如果您希望保留所有逻辑以在一个地方检查项目的命中率。

我可能会做一些事情，比如在点击时选择项目，然后显示垃圾桶或其他东西。如果他们单击垃圾桶，则删除所选项目。这样他们就可以更改选择的内容，直到它正确为止。但是如果你想一步完成，那么你只需要决定如何处理它。

这里 sketch 显示了一些 onClick 处理。

paperjs select 项并在鼠标单击时删除

paperjs select items and delete on mouse click

jquery

paperjs