[HTML] DrawPoly

Monkey Forums/Monkey Code/[HTML] DrawPoly

degac

(Posted 2011) [#1]

I've hacked mojo [HTML] to draw polys (filled or not)
Not the best implementation

Graphics.Monkey

Add this method in class gxtkGraphics

Method DrawPoly(coords:Float[],fill:int)

in class GraphicsContent

Function DrawPoly(coords:Float[],fill:Int=1)
	ValidateMatrix
	renderDevice.DrawPoly(coords,fill)
End

mojo.html5.js

gxtkGraphics.prototype.DrawPoly=function( coords,fill ){
	
 	this.gc.beginPath();
  	this.gc.moveTo( coords[0],coords[1] );

	var i;
	for( i=0;i<coords.length;i=i+2)
	{
	  	this.gc.lineTo( coords[i],coords[i+1] );
	  	this.gc.stroke();
	} 
	 	this.gc.closePath();
	if (fill==1){
		this.gc.fill();
	}

}

Stupid example (I've not added any control on the array size...)

Strict
Import mojo

Function Main:Int()
	New MyApp
	Return 0
End Function


Class MyApp Extends App
		Global arr:Float[]
		Method OnCreate:Int()
			arr=[10.0,10.0,50.0,10.0,80.0,50.0,40.0,100.0] 
			SetUpdateRate 60
			Return 0
		End
		
		Method OnRender:Int()
			Cls
			SetColor 200,20,20
			DrawPoly(arr)			
			Return 0
		End
End Class

I dont' know if it's possible to create this as an external command (like the one in Diddy or MonkeyTools) as I'm not sure I can access to mojo class gxtkGraphics.

Warpy

(Posted 2011) [#2]

If you really want to implement this as an external function, you can get the canvas graphics context from

var gc = bb_graphics_context.bbdevice.gc;

But don't really do that, because it's liable to break in the future.

impixi

(Posted 2011) [#3]

For a HTML-only solution, you can use Mark's DOM module to add other canvas functionality to Mojo. DrawPoly example:

Strict

Import dom
Import mojo

Extern
Global game_canvas:HTMLCanvasElement

Public

Function Main:Int()

	Local ta:TestApp New TestApp
	
	Return 0
	
End


'-----


Class TestApp Extends App


	Field dlxCanvas:CanvasDeluxe
	
	Field arr:Float[]


	Method OnCreate:Int()
	
		SetUpdateRate(60)	

		dlxCanvas = New CanvasDeluxe(game_canvas)
		
		arr = [10.0, 10.0, 50.0, 10.0, 80.0, 50.0, 40.0, 100.0, 10.0, 10.0]
		
		Return 0
		
	End
	
	
	Method OnUpdate:Int()
	
		Return 0
		
	End
	
	
	Method OnRender:Int()

		Cls 0, 0, 0
		
		SetColor 200, 20, 20
		dlxCanvas.DrawPoly arr, True
				
		Return 0

	End


End



'---------


Class CanvasDeluxe


	Private
	
		Field canvas:HTMLCanvasElement
		Field renderContext:CanvasRenderingContext2D


	Public
	
	
	Method New(cnvs:HTMLCanvasElement)
	
		canvas = cnvs
		renderContext = CanvasRenderingContext2D(canvas.getContext("2d"))

	End
	

	Method DrawPoly:Void(coords:Float[], fill:Bool = False)

		renderContext.beginPath()
	  	renderContext.moveTo(coords[0],coords[1])

		For Local i:Int = 0 Until coords.Length Step 2
	
	  		renderContext.lineTo(coords[i], coords[i+1])
	  		renderContext.stroke()
	
		Next 
	
	 	renderContext.closePath()
	
		If fill Then renderContext.fill()
		
	
	End


End

The DOM module code is public domain, so you can extract the minimum required classes and functions and create a sort of 'mini' DOM module to use in your own personal projects (that's what I do, anyway).

However, it would be nice to have a 'sanctioned' Mojo-provided way to get the game canvas instance across platforms.

GC-Martijn

(Posted 2011) [#4]

Oke I found and edit a Illustrator script in order to export some x,y data to monkey DrawPoly()

but for one reason I don't get the poly on screen.
A simple poly like this works:

[10.0, 10.0, 50.0, 10.0, 80.0, 50.0, 40.0, 100.0, 10.0, 10.0]

But this don't

[342.33,-257.42,342.68,-251.8,343.67,-244.09,342.68,-235.6,341.02,-228.36,337.33,-219.34,323.16,-216.88, 
319.22,-224.69,293.87,-224.62,272.37,-219.69,235.36,-212.38,206.43,-206.31,184.9,-206,149.13,-206,92.26,-209.1,46.76,-216.69,5.33,-217.44,0,-257.67,342.33,-257.67,342.33,-257.42]

Now i'm wondering if I understand the array format.
it is like this
[
x,y, ' start point
x,y, ' next point
x,y, ' next point
x,y, ' end point (== the same as start point)
]

The illustrator script I'm using is this: (its javascript code)

var pathRefs=docRef.pathItems;
	var pathCount=pathRefs.length;
	var scaleFactor=1;
	for ( i = 0; i < pathCount; i++ ) {
		var currPath=pathRefs[i];
		var pointRefs=currPath.pathPoints;
		var pointCount=pointRefs.length;
		var firstAnchor=currPath.pathPoints[0].anchor;
        
        var tmp1=Math.round((firstAnchor[0]/scaleFactor)*100)/100;
        var tmp2=Math.round((firstAnchor[1]/scaleFactor)*100)/100;
		var firstAnchorVal=tmp1+","+tmp2+ ",";
		textRef.contents+=firstAnchorVal;
        
		for(p=1;p<pointCount;p++){
			var currAnchor=currPath.pathPoints[p].anchor;
            var tmp1=Math.round((currAnchor[0]/scaleFactor)*100)/100;
            var tmp2=Math.round((currAnchor[1]/scaleFactor)*100)/100;
			var currAnchorVal=tmp1+","+tmp2+",";
			textRef.contents+=currAnchorVal;
		}
    
    var tmp1=Math.round((firstAnchor[0]/scaleFactor)*100)/100;
    var tmp2=Math.round((firstAnchor[1]/scaleFactor)*100)/100;
	var lastAnchorVal=tmp1+","+tmp2+",";
	textRef.contents+=lastAnchorVal;
	}

mmm I see the problem,
I have this in illustrator

[257.0,-398, 146.0,398.0, 146.0, -302.0,257.0,-302.0]

but monkey uses this

[257.0,398.0, 146.0,398.0, 146.0, 302.0,257.0,302.0]

I don't know why yet