Zones de découpage multiples sur la toile Fabric.js
Pour faire Photo Collage Makerj'utilise le tissu js qui a pour objet de détourage basé sur la fonctionnalité. Cette fonctionnalité est grande, mais l'image à l'intérieur de l'écrêtage de la région ne sera pas redimensionnée, déplacée ou de rotation. Je tiens à position fixe de l'écrêtage de la région et de l'image peut être placée à l'intérieur de l'fixe l'écrêtage de la zone que l'utilisateur veut.
J'ai googlé et de trouver très près de la solution
var canvas = new fabric.Canvas('c');
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.rect(10,10,150,150);
ctx.rect(180,10,200,200);
ctx.closePath();
ctx.stroke();
ctx.clip();
Détourage multiples Domaines sur le tissu js toile
où l'image d'une région de coupure est apparue dans une autre région de coupure. Comment puis-je éviter cela ou est-il une autre façon d'accomplir cela en utilisant tissu de js.
source d'informationauteur ep4f
Vous devez vous connecter pour publier un commentaire.
Ceci peut être accompli avec Tissu à l'aide de la
clipTo
de la propriété, mais vous avez de "renverser" les transformations de l'échelle et la rotation), dans leclipTo
fonction.Lorsque vous utilisez le
clipTo
bien dans le Tissu, la mise à l'échelle et la rotation sont appliquées après l'écrêtage, ce qui signifie que la saturation est mis à l'échelle et rotation de l'image. Vous avez pour contrer cela en appliquant exactement inverse des transformations dans leclipTo
propriété de la fonction.Ma solution consiste à avoir un
Fabric.Rect
servir comme "espace réservé" pour le clip de la région (ce qui a des avantages parce que vous pouvez utiliser en Tissu pour déplacer l'objet et donc le clip de la région.Veuillez noter que ma solution utilise la Lo Tableau De Bord utilité de la bibliothèque, en particulier pour les
_.bind()
(voir le code pour le contexte).Exemple De Violon
Répartition
1. Initialiser Tissu
D'abord, nous voulons que notre toile, bien sûr:
2. Clip Région
Nous donner ces
Rect
objets un nom de propriété,clipFor
de sorte que leclipTo
fonctions peuvent trouver celui par qui ils veulent être tondus:Il n'existe pas de ont être un objet réel à l'image de la région, mais il le rend plus facile à gérer, car vous êtes en mesure de le déplacer à l'aide de Tissu.
3. L'Écrêtage De La Fonction
Nous définissons la fonction qui sera utilisée par les images
clipTo
propriétés séparément, afin d'éviter la duplication de code:Depuis le
angle
propriété de l'objet Image est stockée en degrés, nous allons l'utiliser pour le convertir en radians.findByClipName()
est une fonction de commodité, qui est à l'aide de Lo Tableau De Bordpour trouver la avec laclipFor
bien pour l'Image de l'objet à traiter (par exemple, dans l'image ci-dessous,name
sera'pug'
):Et c'est la partie qui fait le travail:
NOTE: Voir ci-dessous pour et explication de l'utilisation de
this
dans la fonction ci-dessus.4.
fabric.Image
objet à l'aide declipByName()
Enfin, l'image peut être instancié et d'utiliser le
clipByName
fonction comme ceci:Ce n'
_.bind()
faire?Noter que la référence est enveloppé dans le
_.bind()
fonction.Je suis en utilisant
_.bind()
pour les deux raisons suivantes:Image
objet declipByName()
clipTo
propriété est passé le contexte de canevas, pas l'objet.Fondamentalement,
_.bind()
vous permet de créer une version de la fonction qui utilise l'objet que vous spécifiez commethis
contexte.Sources
J'ai tordu la solution par @natchiketa que le positionnement du clip de la région n'a pas été correctement positionnés et a tous déglingués lors de la rotation. Mais tout semble être bon maintenant. Découvrez cette modification de violon:
http://jsfiddle.net/PromInc/ZxYCP/
Le seul réel des modifications ont été apportées dans le clibByName fonction de l'étape 3 du code fourni par @natchiketa. C'est la mise à jour de la fonction:
Deux petites captures que j'ai trouvé:
quelques pixels. J'ai essayé de compenser le positionnement, mais alors sur
rotation, il ajoute de 2 pixels vers le bas et à droite. Donc
J'ai opté pour il suffit de retirer complètement.
Mise à jour Promlnc réponse.
Vous devez le remplacer afin d'contexte des transformations afin d'effectuer le bon niveau d'écrêtage.
Sinon vous aurez tort coupées de l'objet lors de la mise à l'échelle sans garder le ratio d'aspect (en changeant une seule dimension).
Code (69-72):
Remplacer:
Voir ceci:
http://jsfiddle.net/ZxYCP/185/
Bon résultat:
Mise à JOUR 1:
J'ai développé la fonctionnalité de clip par polygone.
http://jsfiddle.net/ZxYCP/198/
Cela peut être fait beaucoup plus facilement. Tissu rendre méthode de clip par un autre des objets de contexte.
Caisse violon. J'ai vu cela sur un commentaire ici.
Avec la dernière mise à jour sur le tissu 1.6.0-rc.1, vous êtes en mesure de fausser l'image par maintenez la touche maj enfoncée et faites glisser l'axe du milieu.
J'ai de la difficulté sur la façon de renverser l'inclinaison de sorte que la saturation de la zone restent les mêmes. J'ai essayé le code suivant pour essayer de la renverser en arrière, mais ne fonctionne pas.
Démo:
http://jsfiddle.net/uimos/bntepzLL/5/
Mise à jour précédente, les gars réponses.
Maintenant nous sommes en mesure à l'échelle de la zone de fenêtrage sans doute.
Que j'ai testé tous les violons ci-dessus, ils ont un bug. C'est quand on va retourner les valeurs X et Y ensemble de détourage, les frontières seront mauvais. Aussi, afin de ne pas faire tous les calculs pour placer des images dans la bonne position, vous devez spécifier originX='center' et originY='center' pour eux.
Voici un écrêtage de la fonction de mise à jour de code original de @natchiketa
Veuillez vérifier les mises à jour violon