Jump to content

[TOPIC: topicViewTemplate]
[GLOBAL: userSmallPhoto]
Photo

{RESOLVED} vector nanoSVG plugin issue with outlines
Started by Icy Spark Oct 09 2018 03:08 AM

1 reply to this topic
plugin vector nanosvg
[TOPIC CONTROLS]
[/TOPIC CONTROLS]
[modOptionsDropdown]
[/modOptionsDropdown]
[reputationFilter]
[TOPIC: post.html]
#1

Icy Spark

[GLOBAL: userInfoPane.html]
Icy Spark
  • Contributor

  • 268 posts
  • Corona SDK

Hi,

 

I have an issue with the nanoSVG plugin showing weird artefacts around rasterised vectors making it unusable .

 

You can see the issue perfectly below.

 

Attached File  Screen Shot 2018-10-09 at 12.02.33.png   153.27KB   0 downloads

 

On the black background the outline is jagged and broken.  The overall pixel shape is the same as the bottom image if you look closely. Extra coloured pixels have been added around the outline.

 

On the white background, it's perfect.

 

On the grey background, the strange outline is awful.  Totally unusable.

 

It's nothing to do with the common issue of aliasing when one colour is over another.  The outline is simply way too large for that to be an issue.  I've also tried vectors from various sites and created my own.  All with the same problem.

 

And the code:

local nanosvg = require("plugin.nanosvg")

local backblack = display.newRect(160,120,320,160)
backblack:setFillColor(0)
local backwhite = display.newRect(160,240,320,160)
local backgrey = display.newRect(160,400,320,160)
backgrey:setFillColor(0.7)

local text1 = display.newText("Broken Outline",310,20,native.systemFont,20)
text1.anchorX=1
local text2 = display.newText("Good",310,180,native.systemFont,20)
text2:setFillColor(0)
text2.anchorX=1
local text3 = display.newText("Strange Outline?",310,340,native.systemFont,20)
text3:setFillColor(0)
text3.anchorX=1

local emoji = {}
emoji[1] = nanosvg.newImage(
	{
		filename = "emoji/1f41a.svg",
		x = 160,
		y = 80,
		width = 128,
		height = 128,
		pixelWidth = 128,
		pixelHeight = 128
	})
emoji[2] = nanosvg.newImage(
	{
		filename = "emoji/1f41a.svg",
    	x = 160,
    	y = 240,
    	width = 128,
    	height = 128,
    	pixelWidth = 128,
    	pixelHeight = 128
	})
emoji[3] = nanosvg.newImage(
	{
		filename = "emoji/1f41a.svg",
		x = 160,
		y = 400,
		width = 128,
		height = 128,
		pixelWidth = 128,
		pixelHeight = 128
	})



[TOPIC: post.html]
#2

Icy Spark

[GLOBAL: userInfoPane.html]
Icy Spark
  • Contributor

  • 268 posts
  • Corona SDK

Well I've finally found a solution to this issue.  Turns out you need to pre-multiply the alpha to get nanoSVG to show correctly.  Ive attached the filter should anyone need it.  

local kernel = {}
kernel.category = "filter"
kernel.name = "premultiplyalpha"
 
kernel.fragment =
	[[
		P_COLOR vec4 FragmentKernel( P_UV vec2 texCoord )
	{
   		
   		P_COLOR vec4 texColor = texture2D( CoronaSampler0, texCoord );
 
    		// Pre-Multiply alpha
    		texColor.rgb *= texColor.a;
    			
    		return CoronaColorScale( texColor );
	}
	]]
 
graphics.defineEffect( kernel )
		
local backgrey = display.newRect(160,240,320,480)
backgrey:setFillColor(0.4)

local emoji = {}
emoji[1] = nanosvg.newImage(
	{
  		filename = "emoji/1f918-1f3fb.svg",
		x = 120,
		y = 240,
		width = 64,
		height = 64,
	})

emoji[2] = nanosvg.newImage(
	{
  		filename = "emoji/1f918-1f3fb.svg",
		x = 200,
		y = 240,
		width = 64,
		height = 64,
	})

emoji[2].fill.effect = "filter.custom.premultiplyalpha"

And you can see the immediate difference >

Attached Files


  • Icy Spark likes this


[topic_controls]
[/topic_controls]

Also tagged with one or more of these keywords: plugin, vector, nanosvg