Clip à la forme de l'image dans le tissu js

J'essayais de mettre en œuvre comme site Web similaire.Clip à la forme de l'image dans le tissu js

Même j'ai essayé réponse suivante après, mais ce ne sont pas working.Does quelqu'un a la solution ou du violon. Fabric.js Clip Canvas (or object group) To Polygon

J'ai créé l'exemple suivant mais il ne fonctionne pas de manière similaire. S'il vous plaît laissez-moi savoir quel est le problème

<html> 
<head> 
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> 
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 
<script type="text/javascript" src="fabric.min.js"></script> 

<style> 
    body{ background-color: ivory; } 
    canvas{border: 1px solid red; } 
</style> 

<script> 
    $(function(){ 

     var canvas = new fabric.Canvas('canvas'); 
     var group = []; 

     fabric.loadSVGFromURL("http://fabricjs.com/assets/2.svg",function(objects,options) { 

      var loadedObjects = new fabric.Group(group); 

      loadedObjects.set({ 
        left: 100, 
        top: 100 

      }); 

      canvas.add(loadedObjects); 
      shape = canvas.item(0); 
      canvas.remove(shape); 
      canvas.clipTo = function(ctx) { 
       shape.render(ctx); 
      }; 
      canvas.renderAll(); 

     },function(item, object) { 
       object.set('id',item.getAttribute('id')); 
       group.push(object); 
     }); 



      }); // end $(function(){}); 
</script> 

</head> 

<body> 
    <canvas id="canvas" width="300" height="300"></canvas> 
</body> 
</html>

Source

2016-02-23 Bhupendra Jadeja

vous souhaitez effectuer un clip par IMAGE ou par PATH? – AndreaBogazzi

je veux couper par image –

http://stackoverflow.com/questions/35463613/fabric-js-how-to-mask-an-image/35477758#35477758 – AndreaBogazzi

Bonjour, vous cherchez quelque chose comme ceci sur mon exemple?

charge une image (t-shirt)
Ajouter un objet i-texte
manipuler objet texte (modifier, déplacer vers le haut/bas/gauche/droite) sur le t-shirt

petit extrait:

fabric.Image.fromURL(myImg, function(myImg) { 
    var img1 = myImg.scale(scaleFactor).set({ left: 0, top: 0 }); 

    var text = new fabric.Text('the_text_sample\nand more', { 
       fontFamily: 'Arial', 
       fontSize:20, 
      }); 

    text.set("top",myImg.height*scaleFactor-myImg.height*scaleFactor+150); 
    text.set("left",myImg.width*scaleFactor/2-text.width/2); 

    var group = new fabric.Group([ img1,text ], { left: 10, top: 10 }); 
    canvas.add(group); 
console.log(canvas._objects[0]._objects[1].text); 
});

exemple en direct: https://jsfiddle.net/tornado1979/zrazuhcq/

L'espoir aide, bonne chance.

Source

2016-02-29 11:36:16

Clip à la forme de l'image dans le tissu js

Répondre

Questions connexes