paperjs选择项目并在鼠标单击时删除答案

【问题标题】：paperjs select items and delete on mouse clickpaperjs选择项目并在鼠标单击时删除
【发布时间】：2018-06-27 22:44:27
【问题描述】：

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

例如：-

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

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

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/

【问题讨论】：

您可能想尝试使用 paperjs 草图工具 - 它使这种事情变得更容易，也使控制台日志记录变得非常容易。您能否更具体地说明重叠的问题是什么？你试过什么？ jsfiddle 中没有鼠标处理代码（创建工具除外）。

标签： jquery paperjs

【解决方案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 处理。

【讨论】：

谢谢，这正是我想要的。