[英]Erase a path in paper.js?
I basically want to create a new path with the canvas globalCompositeOperation set to 'destination-out'. 我基本上想要创建一个新的路径,将canvas globalCompositeOperation设置为'destination-out'。 Is this possible? 这可能吗? If so, how? 如果是这样,怎么样?
I noticed that Item has a blendMode property: http://paperjs.org/reference/item#blendmode , but trying the different values does not provide the desired effect. 我注意到Item有一个blendMode属性: http : //paperjs.org/reference/item#blendmode ,但尝试不同的值并不能提供所需的效果。
http://jsfiddle.net/D8vMG/12/ http://jsfiddle.net/D8vMG/12/
In light of your recent comment, you would need to create layers, as described here: 根据您最近的评论,您需要创建图层,如下所述:
http://paperjs.org/tutorials/project-items/project-hierarchy/#removing-items-and-children http://paperjs.org/tutorials/project-items/project-hierarchy/#removing-items-and-children
and then you can add your paths to a layer and do something like this: 然后你可以将你的路径添加到图层并执行以下操作:
//add image to project as background
// ... your code here ...
var secondLayer = new Layer();
Whenever you create a new Layer, it becomes the active layer of the project, and then you can draw on top of the second layer all you want. 每当您创建一个新图层时,它就会成为项目的活动图层,然后您可以在第二个图层的顶部绘制所需的全部图层。
if you want a simple 'undo' button you can do: 如果你想要一个简单的“撤消”按钮,你可以这样做:
function onMouseDown(event) {
if (window.mode == "drawing") {
myPath = new Path();
myPath.strokeColor = 'black';
}
else if (window.mode == "undo") {
myPath.opacity = '0'; //this makes the last path used completely see through
// or myPath.remove(); // this removes the path.
//if you're intent on something that writes and erases, you could do
}
}
But what you are looking for is something like this: 但你要找的是这样的:
function onMouseDrag(event) {
if (window.mode == "drawing") {
myPath.add(event.point);
}
else if (window.mode == "erasing") {
myPath.removeSegment(0);
}
}
this erases the segments of the path from beginning to end. 这会从头到尾擦除路径的各个部分。 For the full functionality, you need something that identifies a path on click, (layer.getChildren() ? then select child). 对于完整功能,您需要一些标识点击路径的内容(layer.getChildren()?然后选择子项)。 Then using the point on mouse move you need to identify the segment index and remove it from the path using .removeSegment(index). 然后使用鼠标移动上的点,您需要识别段索引并使用.removeSegment(index)将其从路径中删除。
http://paperjs.org/reference/path#removesegment-index http://paperjs.org/reference/path#removesegment-index
Well, the simple solution would be to just create a path which is white. 那么,简单的解决方案就是创建一条白色的路径。 http://jsfiddle.net/D8vMG/11/ http://jsfiddle.net/D8vMG/11/
function onMouseDown(event) {
if (window.mode == "drawing") {
myPath = new Path();
myPath.strokeColor = 'black';
}
else if (window.mode == "erasing") {
myPath = new Path();
myPath.strokeColor = 'white';
myPath.strokeWidth = 10;
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.