Question

我要创建一个选择项，并在需要时将其删除。

例如：-

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

我可以跟踪click事件，但是如果与其他项目重叠，会发生什么情况。

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选择项目并单击鼠标删除

1 个答案: