View unanswered posts | View active topics It is currently 2021-04-21 9:52



Reply to topic  [ 1 post ] 
 关于svg在ie下无效的问题。 
Author Message
TWaver开发组
User avatar

Joined: 2017-02-22 10:01
Posts: 476
Post 关于svg在ie下无效的问题。
有两种解决办法:
1.注册图片时指定width和height。
Code:
function registerNormalImage(network, url, name, width, height) {
        var image = new Image();
        image.src = url;
        image.onload = function() {
          if(width && height)
            twaver.Util.registerImage(name, image, width, height);
          else
            twaver.Util.registerImage(name, image, image.width, image.height);
          image.onload = null;
          network.invalidateElementUIs();
        };
      }

2.重写registerImage方法。
Code:
function registerImage(url, network, svg) {
        var self = this;
        var image = new Image();
        image.src = url;
        var views = arguments;
        if (twaver.Util.isIE && url.substr(url.length - 4) === '.svg') {
            image.style.visibility = 'hidden';
            network.getView().appendChild(image);
            image.onload = function() {
              setTimeout(function() {
                twaver.Util.registerImage(self.getImageName(url), image, image.clientWidth, image.clientHeight,true);
                image.onload = null;
                for (var i = 1; i < views.length; i++) {
                    var view = views[i];
                    if (view.invalidateElementUIs) {
                        view.invalidateElementUIs();
                    }
                    if (view.invalidateDisplay) {
                        view.invalidateDisplay();
                    }
                }
                image && network.getView() && network.getView().removeChild(image);
              }, 200);
            };
        }else{
            image.onload = function () {
                twaver.Util.registerImage(self.getImageName(url), image, image.width, image.height, svg === true);
                image.onload = null;
                for (var i = 1; i < views.length; i++) {
                    var view = views[i];
                    if (view.invalidateElementUIs) {
                        view.invalidateElementUIs();
                    }
                    if (view.invalidateDisplay) {
                        view.invalidateDisplay();
                    }
                }
            };
        }
    }

完整代码:
Code:
<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8">
    <title>TWaver HTML5</title>
    <script type="text/javascript" src="../js/twaver.js"></script>
    <script type="text/javascript">
      var box = new twaver.ElementBox();
      var network = new twaver.vector.Network(box);

      function init() {
        initCanvas();
        initBox();
        // registerImage('../img/boy.svg',this.network);
        registerNormalImage(network, "../img/boy.svg", 'boy', 32, 32);
      }

      function initCanvas() {
        document.body.appendChild(network.getView());
        network.getView().style.background = '#E9E9E9';
        network.adjustBounds({
          x: 0,
          y: 30,
          width: 1300,
          height: 600
        });
      }

      function initBox() {
        var node1 = new twaver.Node();
        node1.setName('TWaver');
        node1.setImage('boy');
        node1.setLocation(100, 100);
        addAlarm("alarm 0",node1.getId(),twaver.AlarmSeverity.CRITICAL,box.getAlarmBox());
        box.add(node1);
       
      }
      function addAlarm(alarmID, elementID, alarmSeverity, alarmBox) {
        var alarm = new twaver.Alarm(alarmID, elementID, alarmSeverity);
        alarmBox.add(alarm);
      }
      function getImageName(url) {
        var index = url.lastIndexOf('/');
        var name = url;
        if (index >= 0) {
            name = url.substring(index + 1);
        }
        index = name.lastIndexOf('.');
        if (index >= 0) {
            name = name.substring(0, index);
        }
        return name;
    }
      function registerImage(url, network,svg) {
        var self = this;
        var image = new Image();
        image.src = url;
        var views = arguments;
        if (twaver.Util.isIE && url.substr(url.length - 4) === '.svg') {
            image.style.visibility = 'hidden';
            network.getView().appendChild(image);
            image.onload = function() {
              setTimeout(function() {
                twaver.Util.registerImage(self.getImageName(url), image, image.clientWidth, image.clientHeight,true);
                image.onload = null;
                for (var i = 1; i < views.length; i++) {
                    var view = views[i];
                    if (view.invalidateElementUIs) {
                        view.invalidateElementUIs();
                    }
                    if (view.invalidateDisplay) {
                        view.invalidateDisplay();
                    }
                }
                image && network.getView() && network.getView().removeChild(image);
              }, 200);
            };
        }else{
            image.onload = function () {
                twaver.Util.registerImage(self.getImageName(url), image, image.width, image.height, svg === true);
                image.onload = null;
                for (var i = 1; i < views.length; i++) {
                    var view = views[i];
                    if (view.invalidateElementUIs) {
                        view.invalidateElementUIs();
                    }
                    if (view.invalidateDisplay) {
                        view.invalidateDisplay();
                    }
                }
            };
        }
    }
    function registerNormalImage(network, url, name, width, height) {
        var image = new Image();
        image.src = url;
        image.onload = function() {
          if(width && height)
            twaver.Util.registerImage(name, image, width, height);
          else
            twaver.Util.registerImage(name, image, image.width, image.height);
          image.onload = null;
          network.invalidateElementUIs();
        };
      }
    </script>
  </head>

  <body onload="init()">
  </body>

</html>


2018-01-19 16:16
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 1 post ] 

Who is online

Users browsing this forum: No registered users and 11 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to: