|
Paddy
TWaver开发组
Joined: 2017-02-22 10:01
Posts: 487
|
 关于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>
|
