Использовать глобальные композитные операции на KineticJS 4.7.2

На этот вопрос ответили с помощью KineticJS 4.6.0, обеспечивающего эту скрипку

Но... есть идеи, как это сделать на последней версии kineticjs?

Я попробовал ту же скрипку с kineticjs 4.7.2: http://jsfiddle.net/qNtSg/ Я только что изменил drawFunc с новым API

drawFunc: function (context) {
    ... 
    context.fillStrokeShape(this);
}

композитинг не работает

Источник

2 ответа

Решение

Kinetic.Shape изменился в последних версиях.

Теперь Shape drawFunc получает оболочку контекста, а не холст.

Тем не менее, обернутый контекст по-прежнему не поддерживает globalCompositeOperation,

Поэтому вам все еще нужно "обмануть", получая фактический контекст HTML (вместо обернутого контекста).

Вот как получить фактический HTML-контекст:

drawFunc: function(context) {
    var ctx=this.getContext()._context;
    ....

Итак, вот пересмотренный код и скрипка: http://jsfiddle.net/m1erickson/h3DGB/

        var reveal = new Kinetic.Shape({
          drawFunc: function(context) {
            var ctx=this.getContext()._context;
            ctx.save();
            ctx.beginPath();
            ctx.globalCompositeOperation="destination-out";
            ctx.arc(120,120,75,0,Math.PI*2,false);
            ctx.closePath();
            ctx.fill();
            ctx.restore();
          },
          dragBoundFunc: function(pos) { return(pos); },
          fill: '#00D2FF',
          stroke: 'black',
          strokeWidth:4,
          draggable:true
        });
Источник

Очень вдохновляющий ответ. Мои требования были немного другими, но я мог сделать это, читая это. Оставьте комментированную скрипку, чтобы внести свой вклад). Я делаю здесь, потому что я не могу комментировать еще из-за репутации ниже 50:)

Спасибо MarkE за вдохновение снова, Глупая вещь не может отправлять скрипку без кода

Макси

<html>
  <head>
    <style>
      body {
        margin: 20px;
        padding: 20px;
      }
    </style>
  </head>
  <body>
 </body>
</html>

Глупая вещь не может опубликовать скрипку без кода

http://jsfiddle.net/L7eLR/

Источник
Другие вопросы по тегам