如何用dynamicjs制作橡皮

Question

我搞砸了dynamicjs，并试图构建一个鼠标工具，该工具可让您在单个层上擦除内容。 我知道如果我的背景是白色可以产生“橡皮擦”效果，但是我可以画白线，但是我的问题是我的背景是图像（它们不会擦除背景图像），因此绘制白线根本不会擦除它。 我需要能够通过鼠标坐标实际擦除线的一部分。 有没有做过或知道如何做的人

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

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