View unanswered posts | View active topics It is currently 2019-11-15 9:13



Reply to topic  [ 18 posts ] 
 告警不设置SVG图片颜色 
Author Message
新手上路

Joined: 2018-03-27 9:47
Posts: 19
Post 告警不设置SVG图片颜色
如图所示,当注册的矢量图片是黑色的时候,告警颜色无法渲染


Attachments:
QQ截图20190103163211.png
QQ截图20190103163211.png [ 11.96 KiB | Viewed 3010 times ]
2019-01-03 16:34
Profile
TWaver开发组
User avatar

Joined: 2018-04-16 16:11
Posts: 164
Post Re: 告警不设置SVG图片颜色
lwz1988 wrote:
如图所示,当注册的矢量图片是黑色的时候,告警颜色无法渲染


您好!

我们测试的时候,并没有发现存在您所说的这种问题,不知道您使用的是什么版本的 twaver?

不知道您可否提供个小demo,方便我们定位一下问题所在。


2019-01-22 17:04
Profile
新手上路

Joined: 2018-03-27 9:47
Posts: 19
Post Re: 告警不设置SVG图片颜色
纯爱枫若情 wrote:
lwz1988 wrote:
如图所示,当注册的矢量图片是黑色的时候,告警颜色无法渲染


您好!

我们测试的时候,并没有发现存在您所说的这种问题,不知道您使用的是什么版本的 twaver?

不知道您可否提供个小demo,方便我们定位一下问题所在。



<script>
ALARM = {
critical: twaver.AlarmSeverity.add(161, 'ALARM_CRITICAL', 'critical', '#fc5043', '严重告警'),
major: twaver.AlarmSeverity.add(162, 'ALARM_MAJOR', 'major', '#ffa235', '主要告警'),
minor: twaver.AlarmSeverity.add(163, 'ALARM_MINOR', 'minor', '#efe034', '次要告警'),
normal: twaver.AlarmSeverity.add(164, 'ALARM_NORMAL', 'normal', '#42ccef', '提示告警')

};
var box, network;

function init() {
var img = new Image();
img.src = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub
3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTExOTQ4MTU0MjgzIiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIi
B4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjU1NzkiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiPjxkZW
ZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PC9zdHlsZT48L2RlZnM+PHBhdGggZD0iTTYzMS42MTYgODA0LjY3MiAzOTIuNTc2IDgwNC42NzIgMzkyLjU3NiA4OTEuMzkyIDE2NC45MjggODkxLjM5MiAx
NjQuOTI4IDk1Ni40MTYgODU5LjAwOCA5NTYuNDE2IDg1OS4wMDggODkxLjM5MiA2MzEuNjE2IDg5MS4zOTJaIiBwLWlkPSI1NTgwIj48L3BhdGg+PHBhdGggZD0iTTk0NS41MzYgNjcuNTg0IDc4LjQ
gNjcuNTg0Yy0zNS45MDQgMC02NS4wMjQgMjkuMDU2LTY1LjAyNCA2NS4wMjRsMCA2MDYuOTc2YzAgNTMuOTUyIDUyLjM1MiA2NS4wMjQgOTQuMjA4IDY1LjAyNGw4MDMuNDU2IDBjNzAuN
TI4IDAgOTkuNTg0LTI5LjEyIDk5LjU4NC02NS4wMjRMMTAxMC42MjQgMTMyLjYwOEMxMDEwLjU2IDk2LjY0IDk4MS41MDQgNjcuNTg0IDk0NS41MzYgNjcuNTg0ek0yNjYuNzUyIDY0Ny43NDQgM
TkyLjY0IDY0Ny43NDQgMTkyLjY0IDUxNi40MTZsNzQuMTEyIDBMMjY2Ljc1MiA2NDcuNzQ0ek00MTguMTc2IDY0NS43NiAzMzkuMzI4IDY0NS43NiAzMzkuMzI4IDQwOS4yOGw3OC44NDggMEw0
MTguMTc2IDY0NS43NnpNNTk4Ljk3NiA2NDkuOTg0IDUxNi43MzYgNjQ5Ljk4NCA1MTYuNzM2IDIwMy40NTZsODIuMTc2IDBMNTk4LjkxMiA2NDkuOTg0ek03ODYuNzUyIDY0Ny4zNmwtODEuNiA
wTDcwNS4xNTIgMzA1LjkybDgxLjYgMEw3ODYuNzUyIDY0Ny4zNnoiIHAtaWQ9IjU1ODEiPjwvcGF0aD48L3N2Zz4=';
img.onload = function () {
twaver.Util.registerImage('aaaa', img, img.width, img.height, true);
document.getElementById('cc').appendChild(image);
img.onload = null;
};


box = new twaver.ElementBox();

//画布:twaver.vector.Network;
network = new twaver.vector.Network(box);

document.body.appendChild(network.getView());
network.adjustBounds({x: 0, y: 0, width: 500, height: 500});

network.getAlarmLabel = function (element) {
var alarmSeverity = element.getAlarmState().getHighestNewAlarmSeverity();
if (alarmSeverity) {
return alarmSeverity.displayName;
}
};

var node = new twaver.Node({
name: 'node'
});
node.setImage('aaaa');
node.setSize(30, 30);
node.setLocation(50, 50);
box.add(node);
addAlarm(1, node.getId(), ALARM.critical, box.getAlarmBox());

}

function addAlarm(alarmID, elementID, alarmSeverity, alarmBox) {
var alarm = new twaver.Alarm(alarmID, elementID, alarmSeverity);
alarmBox.add(alarm);

}
</script>

twaver的版本是5.7.6


Last edited by wuzhiqin on 2019-03-06 16:57, edited 1 time in total.

影响排版



2019-01-28 10:39
Profile
新手上路

Joined: 2018-03-27 9:47
Posts: 19
Post Re: 告警不设置SVG图片颜色
这是我当初试验的demo,请帮忙看一下
Attachment:
svg-demo.zip [273.81 KiB]
Downloaded 121 times


2019-01-28 10:48
Profile
TWaver开发组
User avatar

Joined: 2018-04-16 16:11
Posts: 164
Post Re: 告警不设置SVG图片颜色
您好!

使用静态图片确实会存在无法给网元染色的问题。

建议使用矢量图,或者通过重载网元 UI 的方式进行染色。

参考矢量图的使用文档:

http://doc.servasoft.com/twaver-document-center/recommended/twaver-html5-guide/vector-and-data-binding/

重载,请参考 sdk 的 demo 中的示例。


2019-01-28 19:04
Profile
新手上路

Joined: 2018-03-27 9:47
Posts: 19
Post Re: 告警不设置SVG图片颜色
请问,有重载网元UI的相关代码么


2019-03-01 13:06
Profile
TWaver开发组
User avatar

Joined: 2018-04-16 16:11
Posts: 164
Post Re: 告警不设置SVG图片颜色
lwz1988 wrote:
请问,有重载网元UI的相关代码么


您好!

我这边还是建议您采用矢量图的方式,来设置网元的背景图。

因为如果您采用位图注册进去的话,只能达到下面这种效果:
Attachment:
企业微信截图_15516724821553.png
企业微信截图_15516724821553.png [ 9.07 KiB | Viewed 2142 times ]


我这边还是给您提供一下重载网元 UI 的相关代码吧:

Code:
var myNode = function(id) {
    myNode.superClass.constructor.call(this, id);
}

twaver.Util.ext(myNode, twaver.Node, {
    getVectorUIClass: function() {
        return myNodeUI;
    },
})

myNode.getVectorUIClass = function() {
    return myNodeUI;
}

myNodeUI = function(network, element) {
    myNodeUI.superClass.constructor.call(this, network, element);
}

twaver.Util.ext(myNodeUI, twaver.vector.NodeUI, {
    paint: function(ctx) {
        myNodeUI.superClass.paint.call(this, ctx);
        var rect = this.getZoomBodyRect();
        ctx.rect(rect.x, rect.y, rect.width, rect.height);
        ctx.fillStyle = "rgba(0, 255, 255, 0.5)";
        ctx.fill();
    },
})


然后用的时候,可以采用下面这种方式:
Code:
var node = new myNode({
    name: 'node'
});


主要是要重载一下 ui 里面的 paint 方法,调用一下原来的 paint 方法,然后再绘制一层类似蒙版的效果盖在上面。

但是这里面有个问题是,很难做到根据有像素的区域进行定点染色,因此空白的地方也染上了颜色。


2019-03-04 12:22
Profile
TWaver开发组
User avatar

Joined: 2018-04-16 16:11
Posts: 164
Post Re: 告警不设置SVG图片颜色
您好!

还有种简单直接的方式,直接重载一下默认 NodeUI 上的 paint 方法:

Code:
network.getElementUI(node).paint = function(ctx) {
    this.__proto__.paint.call(this, ctx);
   
    var rect = this.getZoomBodyRect();
    ctx.rect(rect.x, rect.y, rect.width, rect.height);
    ctx.fillStyle = "rgba(0, 255, 255, 0.5)";
    ctx.fill();
}


2019-03-04 16:23
Profile
新手上路

Joined: 2018-03-27 9:47
Posts: 19
Post Re: 告警不设置SVG图片颜色
wuzhiqin wrote:
您好!

还有种简单直接的方式,直接重载一下默认 NodeUI 上的 paint 方法:

Code:
network.getElementUI(node).paint = function(ctx) {
    this.__proto__.paint.call(this, ctx);
   
    var rect = this.getZoomBodyRect();
    ctx.rect(rect.x, rect.y, rect.width, rect.height);
    ctx.fillStyle = "rgba(0, 255, 255, 0.5)";
    ctx.fill();
}

好的,试试看吧,我这边SVG的图片都是用户自定义上传的


2019-03-04 17:15
Profile
新手上路

Joined: 2018-03-27 9:47
Posts: 19
Post Re: 告警不设置SVG图片颜色
lwz1988 wrote:
wuzhiqin wrote:
您好!

还有种简单直接的方式,直接重载一下默认 NodeUI 上的 paint 方法:

Code:
network.getElementUI(node).paint = function(ctx) {
    this.__proto__.paint.call(this, ctx);
   
    var rect = this.getZoomBodyRect();
    ctx.rect(rect.x, rect.y, rect.width, rect.height);
    ctx.fillStyle = "rgba(0, 255, 255, 0.5)";
    ctx.fill();
}

好的,试试看吧,我这边SVG的图片都是用户自定义上传的

我这里,后来自己也试了试,用注册图片的形式。如果是黑色的SVG图片,那么告警颜色就覆盖不了,如果是其他淡一点的颜色,是可以的。我觉得是不是跟颜色的深浅有关系呢


2019-03-04 17:51
Profile
新手上路

Joined: 2018-03-27 9:47
Posts: 19
Post Re: 告警不设置SVG图片颜色
lwz1988 wrote:
lwz1988 wrote:
wuzhiqin wrote:
您好!

还有种简单直接的方式,直接重载一下默认 NodeUI 上的 paint 方法:

Code:
network.getElementUI(node).paint = function(ctx) {
    this.__proto__.paint.call(this, ctx);
   
    var rect = this.getZoomBodyRect();
    ctx.rect(rect.x, rect.y, rect.width, rect.height);
    ctx.fillStyle = "rgba(0, 255, 255, 0.5)";
    ctx.fill();
}

好的,试试看吧,我这边SVG的图片都是用户自定义上传的

我这里,后来自己也试了试,用注册图片的形式。如果是黑色的SVG图片,那么告警颜色就覆盖不了,如果是其他淡一点的颜色,是可以的。我觉得是不是跟颜色的深浅有关系呢


Attachments:
QQ截图20190305094417.png
QQ截图20190305094417.png [ 22.99 KiB | Viewed 2096 times ]
2019-03-05 9:45
Profile
TWaver开发组
User avatar

Joined: 2018-04-16 16:11
Posts: 164
Post Re: 告警不设置SVG图片颜色
您好!

不知道您的图片,能不能发给我这边测试一下。

就像我之前说的那样,我这边进行测试的时候,都发现静态图片是无法染色的。

我猜想是不是跟您设置图片的时候的使用方式或者跟您用的图片有关呢。


2019-03-05 11:13
Profile
新手上路

Joined: 2018-03-27 9:47
Posts: 19
Post Re: 告警不设置SVG图片颜色
wuzhiqin wrote:
您好!

不知道您的图片,能不能发给我这边测试一下。

就像我之前说的那样,我这边进行测试的时候,都发现静态图片是无法染色的。

我猜想是不是跟您设置图片的时候的使用方式或者跟您用的图片有关呢。


我这个demo里面有三张SVG图片,我在代码里,是通过这三张SVG的base64编码来注册的(由于项目中这些SVG是用户上传,后台会把SVG转成base64的格式传输到前台),注册之后,颜色浅的图片,是可以正常展示告警颜色,


Attachments:
svg-demo.zip [282.6 KiB]
Downloaded 149 times
2019-03-05 11:41
Profile
TWaver开发组
User avatar

Joined: 2018-04-16 16:11
Posts: 164
Post Re: 告警不设置SVG图片颜色
您好!

您反映的问题确实是存在的,如果您没有把 svg 转换成 base64 再注册,而是直接注册的话,是不会染色的。

这是我们框架内部的染色机制的问题,我这边已经向我们的框架开发人员反馈了。

目前使用的话,就像您说的那样,尽量不要用黑色的 svg 图片,如果要用的话,就采用我之前提供的重载 UI 的方法,去染色一下。

由此给您带来不便,敬请谅解!


2019-03-06 18:19
Profile
新手上路

Joined: 2018-03-27 9:47
Posts: 19
Post Re: 告警不设置SVG图片颜色
wuzhiqin wrote:
您好!

您反映的问题确实是存在的,如果您没有把 svg 转换成 base64 再注册,而是直接注册的话,是不会染色的。

这是我们框架内部的染色机制的问题,我这边已经向我们的框架开发人员反馈了。

目前使用的话,就像您说的那样,尽量不要用黑色的 svg 图片,如果要用的话,就采用我之前提供的重载 UI 的方法,去染色一下。

由此给您带来不便,敬请谅解!

好的,我跟用户说一下


2019-03-07 9:55
Profile
TWaver开发组
User avatar

Joined: 2018-04-16 16:11
Posts: 164
Post Re: 告警不设置SVG图片颜色
lwz1988 wrote:
wuzhiqin wrote:
您好!

您反映的问题确实是存在的,如果您没有把 svg 转换成 base64 再注册,而是直接注册的话,是不会染色的。

这是我们框架内部的染色机制的问题,我这边已经向我们的框架开发人员反馈了。

目前使用的话,就像您说的那样,尽量不要用黑色的 svg 图片,如果要用的话,就采用我之前提供的重载 UI 的方法,去染色一下。

由此给您带来不便,敬请谅解!

好的,我跟用户说一下


您好,无法给黑色的 svg 图片染上颜色的问题,我们公司相关技术人员,已经给出了实现的技术方案。

您可以通过重载一下这个方法解决:

Code:
twaver.Defaults.PIXEL_FILTER_FUNCTION = function(sourceColor, filterColor) {
    if (sourceColor.r === 0 && sourceColor.g === 0 && sourceColor.b === 0) {
        return filterColor;
    }
    if (!filterColor) {
        return sourceColor;
    }
    var brightness =
        sourceColor.r * 0.3 + sourceColor.g * 0.59 + sourceColor.b * 0.11;
    return {
        r: Math.floor((filterColor.r * brightness) / 255),
        g: Math.floor((filterColor.g * brightness) / 255),
        b: Math.floor((filterColor.b * brightness) / 255)
    };
};


2019-04-08 14:39
Profile
新手上路

Joined: 2018-03-27 9:47
Posts: 19
Post Re: 告警不设置SVG图片颜色
wuzhiqin wrote:
lwz1988 wrote:
wuzhiqin wrote:
您好!

您反映的问题确实是存在的,如果您没有把 svg 转换成 base64 再注册,而是直接注册的话,是不会染色的。

这是我们框架内部的染色机制的问题,我这边已经向我们的框架开发人员反馈了。

目前使用的话,就像您说的那样,尽量不要用黑色的 svg 图片,如果要用的话,就采用我之前提供的重载 UI 的方法,去染色一下。

由此给您带来不便,敬请谅解!

好的,我跟用户说一下


您好,无法给黑色的 svg 图片染上颜色的问题,我们公司相关技术人员,已经给出了实现的技术方案。

您可以通过重载一下这个方法解决:

Code:
twaver.Defaults.PIXEL_FILTER_FUNCTION = function(sourceColor, filterColor) {
    if (sourceColor.r === 0 && sourceColor.g === 0 && sourceColor.b === 0) {
        return filterColor;
    }
    if (!filterColor) {
        return sourceColor;
    }
    var brightness =
        sourceColor.r * 0.3 + sourceColor.g * 0.59 + sourceColor.b * 0.11;
    return {
        r: Math.floor((filterColor.r * brightness) / 255),
        g: Math.floor((filterColor.g * brightness) / 255),
        b: Math.floor((filterColor.b * brightness) / 255)
    };
};

好的,我来试一下


2019-04-10 9:40
Profile
新手上路

Joined: 2018-03-27 9:47
Posts: 19
Post Re: 告警不设置SVG图片颜色
试过了,可以,谢谢了


2019-04-10 10:29
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 18 posts ] 

Who is online

Users browsing this forum: No registered users and 2 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:  
cron