Discussion :

[cortex59]

bonjour,

je voudrais afficher du texte de couleur sur un fond. les couleurs seront choisie par les utilisateurs.
Le texte s'affiche et change de couleur, mais la couleur de fond ne s'affiche pas!!!
j'aurai besoin d'aide svp


voici mon code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
 
 /******************************************************************************
* Textback Class
******************************************************************************/
 
Textback.prototype = new DynamicComponent();
Textback.parent = DynamicComponent.prototype;
Textback.prototype.constructor = Textback;
 
/******************************************************************************
* Constructor
******************************************************************************/
function Textback()
{
}
 
/******************************************************************************
* Initialize object
* svgId -> Id of SVG node
* objectName -> global variable name of the object
******************************************************************************/
Textback.prototype.init = function(svgId, objectName)
{
    Textback.parent.init.call(this, svgId, objectName, false);
    this.m_SizeFont = GetVisioPropAsInt(this.m_SvgNode, "FontSize");   
 
    removeAllChildExceptNodeName(this.m_SvgNode, "text");
    this.m_txtParentElem = getChildNodeFromName(this.m_SvgNode, "text");
    removeAllChild(this.m_txtParentElem);
    this.m_txtElem = createTextNode(this.m_txtParentElem, "");
}
 
/******************************************************************************
* Callback for refresh event
******************************************************************************/
Textback.prototype.OnRefresh = function()
{
    // Get the value
    var value = this.m_arrayValueDefinition[0].getValue();				
    var coltext = colortext;
    var red = Math.round((coltext & 0x000000FF) >> 0);
    var green = Math.round((coltext & 0x0000FF00) >> 8);
    var blue = Math.round((coltext & 0x00FF0000) >> 16);
    var fill = "fill:rgb("+ red +","+ green+","+blue+")";
 
    var size = "font-size:"+this.m_SizeFont;
    var fontType = "font-family:Arial Unicode MS"
    this.m_txtParentElem.setAttribute("style", fill+";"+size+";"+fontType);
 
 
    var colback = colorback;
    var red = Math.round((colback & 0x000000FF) >> 0);
    var green = Math.round((colback & 0x0000FF00) >> 8);
    var blue = Math.round((colback & 0x00FF0000) >> 16);
    var back = "back:rgb("+ red +","+ green+","+blue+")";
 
    this.m_txtParentElem.style.background="back";
 
 
 
    // Change text value to reflect the read value
    var st = value;
    this.m_txtElem.nodeValue = st;
}

le PB vien de cette ligne de code :

this.m_txtParentElem.style.background="back";

mais comment la modifier???
merci d'avance pour votre aide

[Sheriff]

salut !
et si tu enlevais les guillemets?

a plus

[cortex59]

bonjour,

je vien d'essayer sans les guillemets mais toujours pas de couleur de fond...

a votre avis cela peu venir de la declaration du texte??

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
    removeAllChildExceptNodeName(this.m_SvgNode, "text");
    this.m_txtParentElem = getChildNodeFromName(this.m_SvgNode, "text");
    removeAllChild(this.m_txtParentElem);
    this.m_txtElem = createTextNode(this.m_txtParentElem, "");

quelqu'un a des idées??

merci

[E.Bzz]

Bonjour,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
var back = "rgb("+ red +","+ green+","+blue+")";
this.m_txtParentElem.style.backgroundColor=back;

A+

[cortex59]

Re bonjour,

cela ne fonctionne toujours pas!!!
J'ai l'impresion que sa doit etre dans la declaration

j'espere que vous avez encore des idéés
merci

[SpaceFrog]

le code d'Ebzz m'a pourtant l'air plus que correct ... peut on en voir l'implémentation ?

[cortex59]

l'implementtation c'est a dire le code??

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
 
 
/******************************************************************************
* Textback Class
******************************************************************************/
 
Textback.prototype = new DynamicComponent();
Textback.parent = DynamicComponent.prototype;
Textback.prototype.constructor = Textback;
 
 
 
/******************************************************************************
* Constructor
******************************************************************************/
function Textback()
{
}
 
/******************************************************************************
* Initialize object
* svgId -> Id of SVG node
* objectName -> global variable name of the object
******************************************************************************/
Textback.prototype.init = function(svgId, objectName)
{
    Textback.parent.init.call(this, svgId, objectName, false);
    this.m_SizeFont = GetVisioPropAsInt(this.m_SvgNode, "FontSize");   
 
 //   removeAllChildExceptNodeName(this.m_SvgNode, "text");
    this.m_txtParentElem = getChildNodeFromName(this.m_SvgNode, "text");
 
    // get "rect" elem
    this.m_rectElem = getChildNodeFromName(this.m_SvgNode, "rect");
 
    removeAllChild(this.m_txtParentElem);
    this.m_txtElem = createTextNode(this.m_txtParentElem, "");
 
 
}
 
 
 
 
/******************************************************************************
* Callback for refresh event
******************************************************************************/
Textback.prototype.OnRefresh = function()
{
    // Get the value
    var value = this.m_arrayValueDefinition[0].getValue();				
    var coltext = colortext;
    var red = Math.round((coltext & 0x000000FF) >> 0);
    var green = Math.round((coltext & 0x0000FF00) >> 8);
    var blue = Math.round((coltext & 0x00FF0000) >> 16);
    var fill = "fill:rgb("+ red +","+ green+","+blue+")";
 
 
    var size = "font-size:"+this.m_SizeFont;
    var fontType = "font-family:Arial Unicode MS"
    this.m_txtParentElem.setAttribute("style", fill+";"+size+";"+fontType);
 
 
    var colback = colorback;
    red = Math.round((colback & 0x000000FF) >> 0);
    green = Math.round((colback & 0x0000FF00) >> 8);
    blue = Math.round((colback & 0x00FF0000) >> 16);
    var back = "rgb("+ red +","+ green+","+blue+")";
 
this.m_rectElem.style.backgroundColor = back;
 
 
    // Change text value to reflect the read value
    var st = value;
    this.m_txtElem.nodeValue = st;
}

merci

[le_chomeur]

l'implementtation c'est a dire le code??

le code complet de ta page . . .

[SpaceFrog]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
var colback = colorback;
    red = Math.round((colback & 0x000000FF) >> 0);
    green = Math.round((colback & 0x0000FF00) >> 8);
    blue = Math.round((colback & 0x00FF0000) >> 16);
alert(red +  ',' + blue +',' + green);
    var back = "rgb("+ red +","+ green+","+blue+")";

là il te dit quoi ?


sinon essaye de lui attribuer la couleur après insertion dans la page ?

[SpaceFrog]

Testé et approuvé par SpacFrog :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<body onload="document.body.style.backgroundColor='rgb(201,10,251)';">

[cortex59]

bonjour,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
alert(red +  ',' + blue +',' + green);  m'achiche ceci 122,90,203

Est ce que vous pouvez m'expliquer ce code (desolé j'ai pascompris):

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
onload="document.body.style.backgroundColor='rgb(201,10,251)';"

je l'ai inserer a la place de :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
this.m_rectElem.style.backgroundColor = back;

mais j'ai pas compris.

merci

[cortex59]

merci a tous pour vos reponse.
voici le code qui fonctionnepour cela

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
 
/*********************************************************
* Textback Class
********************************************************/
 
Textback.prototype = new DynamicComponent();
Textback.parent = DynamicComponent.prototype;
Textback.prototype.constructor = Textback;
 
/*********************************************************
* Constructor
*********************************************************/
function Textback()
{
}
/*********************************************************
* Initialize object
* svgId -> Id of SVG node
* objectName -> global variable name of the object
*******************************************************/
Textback.prototype.init = function(svgId, objectName)
{
    Textback.parent.init.call(this, svgId, objectName, false);
    this.m_SizeFont = GetVisioPropAsInt(this.m_SvgNode, "FontSize");   
 
 //   removeAllChildExceptNodeName(this.m_SvgNode, "text");
    this.m_txtParentElem = getChildNodeFromName(this.m_SvgNode, "text");
 
    // get "rect" elem
    this.m_rectElem = getChildNodeFromName(this.m_SvgNode, "rect");
 
    removeAllChild(this.m_txtParentElem);
    this.m_txtElem = createTextNode(this.m_txtParentElem, "");
}
 
/********************************************************
* Callback for refresh event
*********************************************************/
Textback.prototype.OnRefresh = function()
{
    // Get the value
    var value = this.m_arrayValueDefinition[0].getValue();				
    var coltext = colortext;
    var red = Math.round((coltext & 0x000000FF) >> 0);
    var green = Math.round((coltext & 0x0000FF00) >> 8);
    var blue = Math.round((coltext & 0x00FF0000) >> 16);
    var fill = "fill:rgb("+ red +","+ green+","+blue+")";
 
    var size = "font-size:"+this.m_SizeFont;
    var fontType = "font-family:Arial Unicode MS"
    this.m_txtParentElem.setAttribute("style", fill+";"+size+";"+fontType);
 
    var colback = colorback;
    red = Math.round((colback & 0x000000FF) >> 0);
    green = Math.round((colback & 0x0000FF00) >> 8);
    blue = Math.round((colback & 0x00FF0000) >> 16);
    var back = "fill:rgb("+ red +","+ green+","+blue+")";
 
    var colcontour = colorcontour;
    red = Math.round((colcontour & 0x000000FF) >> 0);
    green = Math.round((colcontour & 0x0000FF00) >> 8);
    blue = Math.round((colcontour & 0x00FF0000) >> 16);
    var contour = "stroke:rgb("+ red +","+ green+","+blue+")";
 
    this.m_rectElem.setAttribute("style", back+ "; contour");
 
    // Change text value to reflect the read value
    var st = value;
    this.m_txtElem.nodeValue = st;
}

[SpaceFrog]

cette ligen de code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

onload="document.body.style.backgroundColor='rgb(201,10,251)';"

c'est juste pour te montrer la syntaxe d'une modification dynamique de backroundColor en rgb par javascript...
donc pas à mettre dans ton code


Que le alert te retourne les trois nombres et plutot bon signe ! c'étauit juste pour vérifier les valeurs que tu donnais à ton RGB ...

Le souci provient à mon avis de la compatibilité entre javascript et ton truc de fill du svg .. !!

Il faut passer par svg:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 var fill = "fill:rgb("+ red +","+ green+","+blue+")";

et pas par le DOM avec style.backgroundColor

[cortex59]

bonjour

maitenance que les couleur fonctionnent, et que le texte s'affiche correctement, je voudrai centrer mon texte dans le rectangle.

par contre la je n'est aucune idée sur la question.
quelqu'un pour me suggerer une fonction?

merci

[SpaceFrog]

à priori ça ne relève toujours pas de javascritp mais d'une syntaxe spécifique à svg ...

voilà ce qu'en dit google :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

text-anchor="middle"

[cortex59]

merci pour ta solution elle fonctionne trop bien

[SpaceFrog]

Et dire que je ne connais rien à svg !!!!

il y a un truc qui s'appelle google et qui donne plein de réponses quand on se donne la peine de l'interroger ...