Отверстие в прямоугольнике по пути SVG в KineticJS

globalCompositeOperation with KineticJS описывает, как сделать отверстие в прямоугольнике по кругу. Вместо круга я хотел бы использовать путь SVG, чтобы сделать отверстие, такие как:Отверстие в прямоугольнике по пути SVG в KineticJS

м 876.30799 492,53209 с -0,29484 -69,69962 -36,64554 33,8121 -67,84069 70,49382 3,60444 27,60835 34,32996 46,34894 60,8096 40,13747 10.35153 -2.31261 21.0251 - 4.39193 30.54799 -9.18203 10.45071 -6.35814 19.46448 -14.76346 29.73686 -21.39213 10.83886 -8.06083 21.32637 -16.94052 29.19035 -28.02964 -1.53049 -9.55445 -13.2442 -8.25504 -20.39998 -9.87533 -12.44629 -2.06296 -25.58989 -5.04642 -34.93228 -14.14783 -10.44361 -7.80509 -20,00756 -17,00681 -27,11185 -28,00433 г

Как я могу осуществить отверстие, т.е. context.globalCompositeOperation="destination-out";, в new Kinetic.Path({ data: path });?

EDIT: Я только что нашел обновленную версию круглого отверстия здесь:

use globalcompositeoperations on KineticJS 4.7.2

Теперь это просто вопрос о том, что делает его работу на пути SVG;)

источник

2014-01-27 Oldrich Svec

Использование SVG рисование, чтобы выявить скрытое изображение, довольно сложно.

Вот шаги, необходимые:

Создайте фоновый слой с изображением
Создать приоритетную слой
Создайте прямоугольник покрытия на переднем плане, чтобы скрыть фоновое изображение
создать Kinetic .Path с данными SVG
Преобразование этого пути SVG к изображению с использованием path.toImage
Создайте Kin etic.Shape, который рисует SVG-изображение, используя композицию «destination-out» для отображения фона
Kinetic.Shape не перетаскивается, поэтому создайте еще один Kinetic.Path с теми же данными SVG, чтобы действовать как дескриптор, Kinetic.Shape. Когда этот путь-манипулятор перетаскивается, переместите отображающую фигуру в те же координаты.

Демо: http://jsfiddle.net/m1erickson/7Yvt5/

Этот пример использует простой SVG прямоугольник, но вы можете использовать любой SVG рисунок, что вам нужно.

enter image description here

Вот пример кода:

<!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-v5.0.1.min.js"></script> 

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

    var stage = new Kinetic.Stage({ 
     container: 'container', 
     width: 300, 
     height: 300 
    }); 
    var bklayer = new Kinetic.Layer(); 
    stage.add(bklayer); 
    var layer = new Kinetic.Layer(); 
    stage.add(layer); 

    var path; 
    var reveal; 
    var cutoutImage; 
    //var pathData="M 0,0 L50,0 50,50 0,50 z"; 
    var pathData="M 0,0 L50,0 50,50 0,50 z"; 

    var img=new Image(); 
    img.onload=function(){ 
     start(); 
    } 
    img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/KoolAidMan.png"; 

    function start(){ 

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

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

     // path filled 
     var path = new Kinetic.Path({ 
      x: 0, 
      y: 0, 
      data:pathData, 
      fill: 'green', 
     }); 
     layer.add(path); 

     // turn the path into an image 
     cutoutImage=path.toImage({ 
      callback: function(img){ 
       reveal = new Kinetic.Shape({ 
        sceneFunc: function(context) { 
         var ctx=this.getContext()._context; 
         var pos=this.pos; 
         ctx.save(); 
         ctx.globalCompositeOperation="destination-out"; 
         ctx.drawImage(this.image,pos.x,pos.y); 
         ctx.restore(); 
        }, 
       }); 
       reveal.pos={x:0,y:0}; 
       reveal.image=img; 
       reveal.position(path1.position()); 
       layer.add(reveal); 
       // remove the original path 
       path.remove(); 
       layer.draw(); 
      } 
     }); 


     // draggable path 
     path1 = new Kinetic.Path({ 
      x: 0, 
      y: 0, 
      data:pathData, 
      stroke: 'red', 
      draggable:true 
     }); 
     path1.on("dragmove",function(){ 
      reveal.pos=this.position(); 
      layer.draw(); 
     }); 
     layer.add(path1); 

     layer.draw(); 

    } // end start 


    function addReveal(img){ 
     reveal = new Kinetic.Shape({ 
      sceneFunc: function(context) { 
       var ctx=this.getContext()._context; 
       var pos=this.pos; 
       ctx.save(); 
       ctx.globalCompositeOperation="destination-out"; 
       ctx.drawImage(this.image,pos.x,pos.y); 
       ctx.restore(); 
      }, 
     }); 
     reveal.pos={x:0,y:0}; 
     reveal.image=img; 
     reveal.position(path1.position()); 
     layer.add(reveal); 
     layer.draw(); 
    } 


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

</script>  
</head> 

<body> 
    <div id="container"></div> 
</body> 
</html>

источник

2014-01-28 08:47:04 markE

Совершенная. Большое спасибо. –

Отверстие в прямоугольнике по пути SVG в KineticJS

ответ

Смежные вопросы