1

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

4

3 回答 3

1

是的，您既可以在 KineticJS 中绘制手绘线，也可以使用手绘橡皮擦。

然而，解决方案相当复杂。

先决条件：

我假设在您乱搞的过程中，您已经学会了如何监听鼠标事件并保存那些 mouseXY，以便让用户“拖动”绘制一条折线。

解决方案：

该解决方案涉及使用自定义 Kinetic.Shape，它为您提供比预定义 Kinetic 对象更大的灵活性。

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

您可以使用context.moveToand multiplecontext.lineTo让用户拖动手绘线。

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

具体来说，您可以使用“destination-out”合成，这会使绘制的任何新线充当橡皮擦。

使用“destination-out”...任何先前绘制的线都被新线“擦除”。

您的解决方案概述：

  • 通过在拖动时捕获所有单个点，让用户在画布上拖动绘制一条折线。
  • 捕获用户在拖动该线时是处于“绘制”还是“擦除”模式。
  • 使用自定义 Kinetic.Shape 绘制线条或使用合成擦除线条。
  • 在“draw”模式下，设置 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
});
于 2013-10-08T15:21:42.803 回答
0

“有没有人做过这个”

恐怕没有。您绘制的线是一个对象。将其作为一个整体移除很简单。

如果您不想使用橡皮擦之类的用例，则很难将线条分成几个部分，这些部分保留在绘图中，而那部分则没有。

但是，如果您的线是一组像素会容易得多，但一组像素不是一条线。

于 2013-10-08T09:41:02.883 回答
0

我知道已经很晚了，但是当我搜索橡皮擦时，我首先找到了这个链接，但我没有找到一个好的解决方案，所以我创建了一个新的，她是： 如何使用 kineticjs 5.1.0 制作橡皮擦作用于多层？

于 2014-07-17T16:06:09.100 回答