globalCompositeOperation с KineticJS

Как я могу использовать globalCompositeOperation с KineticJS? Я видел пару примеров, когда создается пользовательская функция, но все они кажутся устаревшими и больше не работают.

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

Кажется, что лучше использовать композит, чем пытаться использовать fillImagePattern. Любые идеи очень приветствуются.

Спасибо, - Крис

Источник

1 ответ

Решение

Вот как использовать globalCompositeOperation в KineticJS, чтобы сделать "раскрытие"

введите описание изображения здесьвведите описание изображения здесь

Метод таков:

  • Создайте 2 кинетических слоя: фоновый слой и верхний слой.
  • Поместите изображение на фоновый слой.
  • Добавьте прямоугольник, который полностью заполняет верхний слой.
  • Добавьте пользовательскую форму (круг) на верхнем слое.
  • Пользовательский круг использует композицию "назначение-выход", чтобы "показать" изображение под

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

Вот код и скрипка: http://jsfiddle.net/m1erickson/QcnHa/

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Prototype</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.5.min.js"></script>

<style>
#container{
  border:solid 1px #ccc;
  margin-top: 10px;
  width:400px;
  height:400px;
}
</style>        
<script>
$(function(){

    var stage = new Kinetic.Stage({
        container: 'container',
        width: 400,
        height: 400
    });
    var layerBk = new Kinetic.Layer();
    stage.add(layerBk);
    var layer = new Kinetic.Layer();
    layer.setDraggable("true");
    stage.add(layer);


    var img=new Image();
    img.onload=function(){
        start();
    }
    img.src="koolaidman.png";


    function start(){

        var image=new Kinetic.Image({
            x:0,
            y:0,
            width:300,
            height:300,
            image:img
        });
        layerBk.add(image);

        var rect = new Kinetic.Rect({
            x: -300,
            y: -300,
            width: 1000,
            height: 1000,
            fill: 'skyblue',
            stroke: 'lightgray',
            strokeWidth: 3
        });
        layer.add(rect);

        var revealOutline=new Kinetic.Circle({
            x:120,
            y:120,
            radius:78,
            stroke:"black",
            strokeWidth:4
        });
        layer.add(revealOutline);

        var thumb=new Kinetic.Polygon({
            points:[200,125, 200,115, 250,100, 250,140],
            fill:"green",
            stroke:"black"
        });
        layer.add(thumb);

        var reveal = new Kinetic.Shape({
          drawFunc: function(canvas) {
            var context = canvas.getContext();
            context.save();
            context.beginPath();
            context.globalCompositeOperation="destination-out";
            context.arc(120,120,75,0,Math.PI*2,false);
            context.closePath();
            canvas.fillStroke(this);
            context.restore();
          },
          dragBoundFunc: function(pos) { return(pos); },
          fill: '#00D2FF',
          stroke: 'black',
          strokeWidth:4,
          draggable:true
        });
        reveal.on("mousedown",function(){
            console.log("reveal: "+getX());
        });
        layer.add(reveal);


        layerBk.draw();
        layer.draw();
    }


}); // end $(function(){});

</script>       
</head>

<body>
    <p>Drag the green grabber to move the reveal</p>
    <div id="container"></div>
</body>
</html>
Источник
Другие вопросы по тегам