Как сделать ластик с kineticjs

Question

Я был возиться с кинетиками, и я пытался создать инструмент для мыши, который позволяет стирать вещи на одном уровне. Я знаю, что могу сделать белые линии, если мой фон белый, чтобы дать эффект «ластик», но моя проблема в том, что мой фон - это изображение (они не стирают фоновое изображение), поэтому рисование белых линий просто не стирает его. Мне нужно уметь фактически стирать части линии координатами мыши. Есть ли кто, что сделал это или знает, как

Answer 1

«Есть ли кто, что сделал это»

Я боюсь, что не. Линия, которую вы выделили, является объектом. Его просто удалить как целый объект.

Если вы не пользуетесь случаем, как ластик, было бы трудно разделить линию на несколько частей, которые остаются в drawin и той части, которая этого не делает.

Как бы то ни было, если ваша линия представляет собой группу пикселей, которая будет намного проще, но группа пикселей не является строкой.

Answer 2

Да, вы можете рисовать линии свободной руки и использовать ластик в кинетическом режиме.

Однако решение является довольно сложным.

Предпосылка:

Я предполагаю, что во время возни вы научились слушать события мыши и сохранить эти mouseXY для того, чтобы пользователь мог «перетащить-дро» ломаную линию.

Решение:

Решение включает в себя использование пользовательских Kinetic.Shape, который дает вам большую гибкость, чем заранее определенных Kinetic объектов.

A Kinetic.Shape дает вам полный контекст холста для работы.

Вы можете использовать context.moveTo и несколько context.lineTo, чтобы позволить пользователю перетаскивать свободные линии.

С полным контекстом вы также можете использовать композитинг.

В частности, вы можете использовать композицию «destination-out», которая заставляет любую новую линию рисовать как ластик.

С «destination-out» ... любые ранее нарисованные линии «стираются» новой строкой.

Схема вашего решения:

• Попросите пользователя перетащить нарисовать ломаную линию на холсте, захватив все отдельные точки, как они тащат.
• Захват, был ли пользователь включен в режиме «рисования» или «стирания» при перетаскивании этой линии.
• Используйте обычную Kinetic.Shape, чтобы нарисовать линию или использовать композицию для стирания строки.
• В режиме «рисования» установите context.globalCompositeOperation = «source-over» и нарисуйте эту строку.
• В режиме «стереть» задайте контекст.globalCompositeOperation = "destination-out" перетаскивает ластик.

Одним из осложнений является то, что контекст Kinetic.Shape дает вам оболочку вокруг истинного контекста холста.

Он ограничивает вас одним context.beginPath, и вы можете использовать только один композитный режим для context.beginPath. Поскольку вам нужно иметь несколько режимов компоновки (рисование против стирания), вам нужно знать, как получить реальный контекстный холст вместо Kinetic.Shapes wrapped context.

Вот как:

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 3

Я знаю, что это очень поздно, но когда я искал резинку я нашел эту ссылку первую и я не нашел хорошее решение, так что я создал новую и ее: How to make an eraser with kineticjs 5.1.0 acting on multi-layer?