1

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 :)

3
  • creo que tu objeto bombilla es muy complejo para que lo quieres hacer, puedes ver este ejemplo a ver si te funciona Commented el 19 abr. 2018 a las 14:24
  • ¿Estás utilizando jointJS?
    – Kiko_L
    Commented el 19 abr. 2018 a las 14:26
  • Si, estoy usando la librería joint.js, jquery.js, lodash, js, y backbone.js Commented el 19 abr. 2018 a las 16:33

1 respuesta 1

2

Se me ha presentado un problema parecido y he encontrado una solución poniendo un id al objeto y luego asignando una imagen nueva cada vez que quieras mediante un script. Ejemplo:

<script type="text/javascript">
  var n-anterior = 1;
  function changeImage(n){
    $("#changeable-image").attr("xlink:href", "changeable-img" + n + ".jpg");
    n-anterior = n;
  }
</script>

<div class="column col-lg-2 col-md-2 col-sm-2 col-xs-2" style="display: flex; flex-direction: column; justify-content: center; z-index: 1; height: 100% !important;">
    <div style="padding-top: 10%; padding-bottom: 10%" onclick="changeImage(1);">
      <img src="ico1.png" width="50px">
    </div>
    <div style="padding-top: 10%; padding-bottom: 10%" onclick="changeImage(2);">
      <img src="ico2.png" width="50px">
    </div>
    <div style="padding-top: 10%; padding-bottom: 10%" onclick="changeImage(3);">
      <img src="ico3.png" width="50px">
    </div>
    <div style="padding-top: 10%; padding-bottom: 10%" onclick="changeImage(4);">
      <img src="ico4.png" width="50px">
    </div>
  </div>

<svg height="100%" width="100%" style="position: absolute; top: 0; left: 0; z-index: 0;">
    <clipPath id="id1">
      <polygon points="" style="fill: grey; stroke: grey; stroke-width: 1;"/>
    </clipPath>
    <image id="changeable-image"
      clip-path="url(#id1)"
      xlink:href="changeable-img1.jpg"
      x="0"
      y="0"
      preserveAspectRatio="xMidYMin slice">
    </image>
  </svg>

Luego ya lo modificas según quieras, en mi caso lo necesitaba cada vez que hacía clic en un icono. A lo mejor no es una solución porque no sé en qué lenguaje lo estás haciendo pero al menos espero que sirva de ayuda por si te da alguna idea. Saludos :)

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.