Jump to content
Sign in to follow this  
deadmoon

canvg Canvas Extension

Recommended Posts

I'm using http://code.google.com/p/canvg/ for drawing SVG files on canvas. This SVG lib extends the canvas context with a drawSvg function similar to drawImage.

 

I've used drawSvg with success in a previous version of SMS:

ACanvas.Handle.drawSvg('myfile.svg', 0, 0, 100, 100);

 

After updating to the latest version, i get a

"Syntax Error: There's no accessible member with namen "drawSvg"

 

How can i get the function back?

Share this post


Link to post
Share on other sites

Hm. This sounds like your external library is loaded after your code executes by the browser.

 

Are you using a {$R ''} to include it in your project?

 

As an alternative, you can add a JS unit and paste the library into the ide there. JS units allows you to control when the native js is loaded. Or, you can dump the library into the lib folder of your project, and manually add a script tag to the project html file - above the <%rescode%> tag.

Share this post


Link to post
Share on other sites

i have included the canvg.js lib before <%recode%> in the default.html.

 

the problem is cannot compile the code. it gives me syntax error. in the past this worked. does the compiler  recognize custom html5 canvas protoytpes to the canvas CanvasRenderingContext2D ?

Share this post


Link to post
Share on other sites

This is a bit odd. I havent used that library before, but from the code i take it the library extends the prototype of all elements right? If you get an error i suspect it has to do with the loading.

 

Try the following:

 

1. Isolate some code that uses the library in a single proc

 

2. Call that proc using a callback (w3_callback(someproc, 10000) )

 

If it works, then it's due to your code executing before the javascript is fully ready.

 

You can use the new w3_domReady function to add a check for this in your code

Share this post


Link to post
Share on other sites

the canvg prototypes one function: drawSvg. so i can use CanvasRenderingContext2D.drawSvg.

 

my code does not have problems, as it worked in old SMS version. SMS TCanvas returns back CanvasRenderingContext2D in Handle. so i simple did in the  code Delphi Canvas.Handle.drawSvg(). but compilations fails.

 

i did now a workaround with ASM. it works, but not nice. new question here. how can i parse a Canvas.Handle (returns CanvasRenderingContext2D) to a javascript call inside a ASM inline code? i need the CanvasRenderingContext2D of the TCanvas.

Share this post


Link to post
Share on other sites

Canvas.DC (device context) should be what you are looking for (?)

 

To use the raw canvas handle, you can do:

 
var mHandle: THandle; 
mHandle:=Canvas.handle; 
asm 
  (@mHandle).someCanvasMethod(params..); 
end; 

Share this post


Link to post
Share on other sites

I had a closer look. The problem in this case is that the old THandle which was used in TW3Canvas has been replaced by a direct mapping to the javascript object, namely JCanvasRenderingContext.

 

I guess the simplest solution for you is to create a class helper:

 
type 
  TMyHelper = Class helper for TW3Canvas 
  public 
    function RealHandle:THandle; 
  end; 

function TMyHelper.RealHandle:THandle; 
var 
  mRef: JCanvasRenderingContext2d; 
begin 
  mRef:=self.Handle; 
  asm 
    @result = @mRef; 
  end; 
end; 

 

And to use it:

 

canvas.RealHandle.someJSProcHere();

 

Remember to include the unit "w3c.Canvas2DContext" in your uses list!

Share this post


Link to post
Share on other sites

Thanks. This works.

 

I have an other question: How can i call a Application function from the HTML file. For example through a form element OnChange event. I did not find any documentation on this topic.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×