Page Index Toggle Pages: 1 Send TopicPrint
Hot Topic (More than 10 Replies) Node text is always bold (Read 7200 times)
Al
Junior Member
**
Offline


I Love MindFusion!

Posts: 56
Joined: Sep 3rd, 2014
Node text is always bold
Nov 5th, 2014 at 9:45am
Print Post  
Hi,
I have tried setting a specific font as below but my text always appears bold

Code (Javascript)
Select All
var Font = MindFusion.Drawing.Font;
diagramNode.setFont(new Font("Arial", 8 * 25.44 / 72, false, false));
 

  

mindfusion2.png (Attachment deleted)
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: Node text is always bold
Reply #1 - Nov 5th, 2014 at 11:19am
Print Post  
Hi,

It doesn't look bold in our test page. Check if you aren't assigning a bold font later on.

  

Untitled_013.png ( 37 KB | 138 Downloads )
Untitled_013.png
Back to top
 
IP Logged
 
Al
Junior Member
**
Offline


I Love MindFusion!

Posts: 56
Joined: Sep 3rd, 2014
Re: Node text is always bold
Reply #2 - Nov 5th, 2014 at 12:29pm
Print Post  
It is strange, you can see from my screenshot that the text 'Closed' just above the mindfusion diagram is different to the node text - and they are both arial(8).

In the console when I run
Code (Javascript)
Select All
diagram.elements[0].item.font
 



I get

Code (Javascript)
Select All
a.Font {name: "Arial", size: 2.8266666666666667, bold: false, italic: false, toString: function}function}
 



So it is definitely set correctly on my node. I can't see that anything else could affect this.
  
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: Node text is always bold
Reply #3 - Nov 5th, 2014 at 1:49pm
Print Post  
In what browser are you seeing this?
  
Back to top
 
IP Logged
 
Al
Junior Member
**
Offline


I Love MindFusion!

Posts: 56
Joined: Sep 3rd, 2014
Re: Node text is always bold
Reply #4 - Nov 5th, 2014 at 3:15pm
Print Post  
Chrome(38),  IE looks a bit better but I'm still not certain that it is right.
  

chrome38.png (Attachment deleted)
IE11.png (Attachment deleted)
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: Node text is always bold
Reply #5 - Nov 6th, 2014 at 9:03am
Print Post  
Chrome does not show it bold for me, but with hardware acceleration it might depend on how the video card handles font scaling applied for diagram's MeasureUnit. To avoid scaling try setting MeasureUnit to Pixel or Point, and specify larger values for node and font sizes.
  
Back to top
 
IP Logged
 
Al
Junior Member
**
Offline


I Love MindFusion!

Posts: 56
Joined: Sep 3rd, 2014
Re: Node text is always bold
Reply #6 - Nov 6th, 2014 at 9:33am
Print Post  
Please show me how - is this on the canvas element or a property of diagram.xxxx ?
  
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: Node text is always bold
Reply #7 - Nov 6th, 2014 at 10:25am
Print Post  
It's a Diagram property inherited from base MindFusion.Drawing.Canvas class:

Code
Select All
var GraphicsUnit = MindFusion.Drawing.GraphicsUnit;
diagram.setMeasureUnit(GraphicsUnit.Pixel); 

  
Back to top
 
IP Logged
 
Al
Junior Member
**
Offline


I Love MindFusion!

Posts: 56
Joined: Sep 3rd, 2014
Re: Node text is always bold
Reply #8 - Nov 6th, 2014 at 2:48pm
Print Post  
It definitely gets smaller using point, both versions seem to have some weird spacing though & all other text on my page using the same font displays just fine.
  

apprNoPoint.png (Attachment deleted)
apprPoint.png (Attachment deleted)
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: Node text is always bold
Reply #9 - Nov 7th, 2014 at 9:01am
Print Post  
It seems Chrome applies some anti-aliasing and the text looks bolder when drawing text on non-white background:

Code
Select All
<html>

<body>

<div style="font:10pt Arial">
test test
</div>

<canvas ID="myCanvas">

<script>
var c=document.getElementById("myCanvas");
 var ctx=c.getContext("2d");

 ctx.fillStyle="gray"
 ctx.fillRect(0, 0, 200, 200)

 ctx.font="10pt Arial";
 ctx.fillStyle="white"
 ctx.fillText("test test",10,50);

</script>

 </body>

 </html> 



The div and canvas texts look the same in IE, but canvas one is bolder in Chrome, while if you remove the fillStyles to draw black on white it looks the same in both browsers. You might also be getting different font sizes in HTML and Canvas. Our font class assumes font size in pixels and appends px suffix; you could replace this method with your own version if you want to specify fonts in other unit:

Code
Select All
Font.prototype.toString = function ()
{
	var font = ""
	if (this.bold)
		font += 'bold ';
	if (this.italic)
		font += 'italic ';
	font += this.size + 'px ' + this.name;
	return font;
}; 



You should also set MeasureUnit to Pixel to avoid additional scale transform applied by the diagram.

I hope that helps,
Stoyan
  
Back to top
 
IP Logged
 
Al
Junior Member
**
Offline


I Love MindFusion!

Posts: 56
Joined: Sep 3rd, 2014
Re: Node text is always bold
Reply #10 - Nov 7th, 2014 at 1:27pm
Print Post  
Thanks Stoyan, using GraphicsUnit.Pixel worked just fine - this won't cause any problems on different screen resolutions right?
  
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: Node text is always bold
Reply #11 - Nov 7th, 2014 at 6:30pm
Print Post  
pixel is supposed to be device-independent unit in browsers (see reply in http://stackoverflow.com/questions/21680629/getting-the-physical-screen-dimensio...), so it should not cause problems.

I hope that helps,
Stoyan
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: 1
Send TopicPrint