centrer mon texte dans le rectangle

Version imprimable

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:

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

01/04/2008, 00h43
Sheriff

salut !
et si tu enlevais les guillemets?
:?
a plus

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:

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

Bonjour,

Code:

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

:?

A+

01/04/2008, 10h22
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
01/04/2008, 16h35
SpaceFrog

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

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

Code:

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

01/04/2008, 17h03
le_chomeur

Citation:

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

le code complet de ta page . . . :roll:

Code:

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 ?

01/04/2008, 17h10
SpaceFrog

Testé et approuvé par SpacFrog :

Code:

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

bonjour,
Code:

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:

1 2 onload="document.body.style.backgroundColor='rgb(201,10,251)';"
je l'ai inserer a la place de :
Code:

1 2 this.m_rectElem.style.backgroundColor = back;
mais j'ai pas compris.

merci

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

Code:

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;
}

02/04/2008, 09h24
SpaceFrog

cette ligen de code :

Code:

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

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:

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

et pas par le DOM avec style.backgroundColor
02/04/2008, 14h00
cortex59

centrer le texte dans le rectangle

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
02/04/2008, 14h09
SpaceFrog

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

voilà ce qu'en dit google :

Code:

text-anchor="middle"
02/04/2008, 15h42
cortex59

merci pour ta solution elle fonctionne trop bien
02/04/2008, 15h55
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 ... :roll: