Question

我正在搞乱kineticjs，我正在尝试构建一个鼠标工具，让你可以在一个层上擦除东西。我知道如果我的背景为白色可以制作白线以产生“橡皮擦”效果，但我的问题是我的背景是图像（它们不会擦除背景图像），因此绘制白线根本不会擦除它。我需要能够通过鼠标坐标实际擦除部分线条。是否有人这样做或知道如何

Answer 1

是的，你可以在KineticJS中绘制手绘线并使用手绘橡皮擦。

然而，解决方案非常复杂。

<强>先决条件：

我假设你在搞乱时已经学会了如何听鼠标事件并保存那些mouseXY，以便让用户“拖动”绘制折线。

解决方案：

解决方案涉及使用自定义Kinetic.Shape，它比预定义的Kinetic对象具有更大的灵活性。

Kinetic.Shape为您提供了完整的画布上下文。

您可以使用context.moveTo和多个context.lineTo让用户拖动手绘线。

使用完整的上下文，您还可以使用合成。

具体来说，您可以使用“目的地输出”合成，这会导致绘制任何新行作为橡皮擦。

使用“目的地输出”...任何先前绘制的线条都会被新线“删除”。

您的解决方案概要：

让用户通过在拖动时捕获所有单个点来在画布上拖动绘制折线。
在拖动该行时捕获用户是处于“绘制”还是“擦除”模式。
使用自定义Kinetic.Shape绘制线条或使用合成来擦除线条。
在“绘制”模式下，设置context.globalCompositeOperation =“source-over”并绘制该行。
在“擦除”模式下，设置context.globalCompositeOperation =“destination-out”拖动橡皮擦。

一个复杂因素是Kinetic.Shape为您提供的上下文是一个真正的画布上下文的包装器。

它将您限制为一个context.beginPath，并且每个context.beginPath只能使用1个复合模式。由于您需要具有多种合成模式（绘图与橡皮擦），您需要知道如何获得真正的上下文画布而不是Kinetic.Shapes包装上下文。

以下是：

var sketchpad = new Kinetic.Shape({

    drawFunc: function(context) {

        // get a true canvas context, not a "wrapped" context
        context=this.getContext()._context;

        // save the context state
        context.save();

        // then you can use multiple beginPath's 
        // and therefore have multiple composites.

        context.beginPath();
        context.globalCompositeOperation="source-over";
        // draw a polyline using your saved line-points
        context.stroke();

        context.beginPath();
        context.globalCompositeOperation="destination-out";
        // draw a polyline which acts like an eraser
        context.stroke();


        // restore the context state
        context.restore();

    },
    stroke: 'black',
    strokeWidth: 4
});

Answer 2

“有没有人这样做过”

我担心没有。您绘制的线是一个对象。它很容易将其作为整个对象删除。

如果你不使用像橡皮擦这样的情况，那么就很难将线分成留在画图中的几个部分而不是那个部分。

然而，如果你的线是一组容易得多的像素，但像素组不是一条线。

Answer 3

我知道它已经很晚了但是当我搜索一个橡皮擦时，我发现了这个链接，我没有找到一个好的解决方案，所以我创建了一个新的她是： How to make an eraser with kineticjs 5.1.0 acting on multi-layer?

如何用kineticjs制作橡皮擦

3 个答案: