web-dev-qa-db-fra.com

Comment sélectionner un objet Fabric.js par programme

Je souhaite sélectionner par programme l'objet Fabrics.js. Qu'est-ce que je dois faire? Par exemple, j'ajoute deux objets comme celui-ci:

var canvas = new fabric.Canvas('canvas');
canvas.add(new fabric.Rect({
    left: 100,
    top: 100,
    width: 75,
    height: 50,
    fill: 'green',
    stroke: 'black',
    strokeWidth: 3,
    padding: 10
  }));

 canvas.add(new fabric.Circle({
    left: 200,
    top: 200,
    radius: 30,
    fill: 'gray',
    stroke: 'black',
    strokeWidth: 3
  }));

et j'ai deux boutons en cliquant sur le bouton nommé

  1. sélectionner un rectangle
  2. sélectionner le deuxième objet

En cliquant sur le bouton de sélection du rectangle, il doit sélectionner la forme du rectangle et en cliquant sur le bouton de sélection du deuxième objet, il doit sélectionner le deuxième cercle d'objet.

Voici le Jsfiddle pour solution de contournement.

J'ai gogglé et marre, ici je cherche un point par où commencer.

[~ # ~] modifier [~ # ~]

J'aime avoir l'ID pour chaque objet, il devrait être possible de sélectionner l'objet en utilisant cet ID, pourquoi je le demande, tout en utilisant les choses collaboratives, nous ne pouvons pas dire avec certitude que tous les nœuds connectés auront l'élément en même index, donc un identifiant unique sera utile.

javascriptcanvasfabricjs
27
Thirumalai murugan

Oui, vous pouvez définir l'identifiant de chaque élément en ajoutant le code ci-dessous dans all.js

Dans la version 1.3.0 de fabric.js build: Dans la déclaration d'objet, ajoutez

 var object = {
   id:   this.id,
   remaining properties in all.js
  }

Vous pouvez maintenant définir l'identifiant de l'objet avec:

canvas.getActiveObject().id=your id value;

Vous pouvez récupérer l'ID d'objet avec:

Myid= canvas.getActiveObject().get('id');
21
John

Vous souhaitez utiliser:

 canvas.setActiveObject(canvas.item(0));

Dans les boutons, cliquez sur événement

Le nombre correspond à l'ordre dans lequel l'objet a été ajouté au canevas.

Vois ici:

http://jsfiddle.net/ThzXM/1/

69
Dan Brown

Pour trouver le numéro d'objet tissu (numéro d'article) de l'objet sélectionné, utilisez:

canvas.on({
    'object:selected': selectedObject
});

function selectedObject(e) {
    var id = canvas.getObjects().indexOf(e.target);
}

var id est le même nombre si vous définissez l'objet par programmation comme dans la réponse de Dan Brown:

canvas.setActiveObject(canvas.item(id)); //id = 0, 1, 2 etc.
8
Dradge

ajoutez un identifiant à vos objets.

var canvas = new fabric.Canvas('canvas');

canvas.add(new fabric.Rect({
    id: 123,
    left: 100,
    top: 100,
    width: 75,
    height: 50,
    fill: 'green',
    stroke: 'black',
    strokeWidth: 3,
    padding: 10
}));

canvas.add(new fabric.Circle({
    id: 456,
    left: 200,
    top: 200,
    radius: 30,
    fill: 'gray',
    stroke: 'black',
    strokeWidth: 3
}));

function removeSpot(canvas, id) {
    canvas.forEachObject(function(obj) {
        if (obj.id && obj.id === id) canvas.remove(obj);
    });
}

// remove rect
removeSpot(canvas, 123);

// remove circle
removeSpot(canvas, 456);
0
Brad