Estoy diseñando una interfaz gráfica para circuitos eléctricos y quiero comprobar el funcionamiento de una bombilla que he definido como un objeto. La definición del objeto bombilla es el siguiente:
/* Función para crear una bombilla */
joint.shapes.electrics.elements.define('electrics.light', {
attrs: {
'.input': {ref: '.body', 'ref-x': 1, 'ref-y': 0.5, magnet: true, port:
'in'},
'.output': {ref: '.body', 'ref-dx': -0.5, 'ref-y': 0.5, magnet: true,
port: 'out'},
circle: {r: 5, stroke: 'black', fill: 'transparent', 'stroke-width': 1},
image: {'xlink:href': 'Imágenes/bombilla.off.jpg'}}
}, {
markup: '<g class="rotatable"><g class="scalable"><image class="body"/>
</g><circle class="input"/><circle class="output"/></g>', },
{
operation: function(input) {
return input;
}});
Me gustaría saber cómo podría cambiar la imagen definida a este objeto "bombilla.off.jpg" a otra que tengo llamada "bombilla.on.jpg".
Un saludo.
He intentado probar tu programa pero no me hace nada jajaja supongo que estaré haciendo algo mal ya que no estoy muy metido en javascript y html. Aunque he averiguado una forma de modificar atributos de algunos objetos, por ejemplo, si quiero modificar una característica como puede ser la posición (voy a coger como objeto de referencia la bombilla definida arriba) seria algo tal que así:
var light = joint.shapes.basic.Generic.define('electrics.light', {
size: {width: 80, height: 40},
attrs: {
'.': {magnet: false},
'.body': {width: 50, height: 25},
'.input': {ref: '.body', 'ref-x': 1, 'ref-y': 0.5, magnet: true, port: 'in'},
'.output': {ref: '.body', 'ref-dx': -0.5, 'ref-y': 0.5, magnet: true, port: 'out'},
circle: {r: 5, stroke: 'black', fill: 'transparent', 'stroke-width': 1},
image: {'xlink:href': 'bombilla.off.jpg'}}
}, {
markup: '<g class="rotatable"><g class="scalable"><image class="body"/></g><circle class="input"/><circle class="output"/></g>',
}, {
operation: function(input) {
return input;
}});
**var light_off = (new light).position(50,0);**
graph.addCell(light_off);
He intentado utilizar la misma estructura pero cambiando la imagen, algo así:
var light_on = (new light).position(50,50).attr("xlink:href","bombilla.on.jpg") ;
graph.addCell(light_on);
Sin embargo no me genera el mismo objeto con la imagen cambiada, me genera dos objetos con la misma imagen. He intentado utilizar la estructura de la función que me has comentado arriba pero no se cómo podría ser para mi objeto. Un saludo :)