Hi there
I'm working on bresenham ellipse drawing and i have few problems
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Rasteryzacja Elipsy</title>
<link rel="stylesheet" href="app.css" type="text/css" />
<script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/rgbcolor.js"></script>
<script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/canvg.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="raphael.js"></script>
<script src="svgfix-0.2.js"></script>
<script>
function toImg(){
var svg = $("#svg_drawing").html();
svg=svgfix(svg);
var canvas = $("#canvas")[0];
canvg(canvas, svg,{
renderCallback : function(){
var imgData = canvas.toDataURL('image/png');
var img = new Image();
img.src = imgData;
img.src.replace('image/png', 'image/octet-stream');
window.open(img.src,'Download');
}
});
}
function init() {
var paper = Raphael("svg_drawing", 800, 600);
var arr = [];
var j = 1;
var i = 1;
for (var x = 10; x < 800; x = x + 10) {
arr[x] = [];
for (var y = 50; y < 600; y = y + 10) {
arr[x][y] = paper.circle(x, y, 5);
}
}
return arr;
}
function setPixel(x, y,arr) {
var x = x * 10;
y = (y + 4)*10;
alert(y);
alert(x);
arr[x][y].attr("fill", "#f00");
}
function unsetPixel(x, y,arr) {
var x = x * 10;
y = (y + 4)*10;
arr[x][y].attr("fill", "#fff");
}
function clear(arr) {
for (var i = 1; i < 60; i++) {
for (var j = 1; j < 80; j++) {
unsetPixel(j, i, arr);
}
}
}
function elipsa(arr) {
var rx=document.getElementById('rx').value;
var ry=document.getElementById('ry').value;
var x,y,xs,ys;
xs=10;
ys=10;
var e,e1,e2;
x=0;
y=ry;
e=0;
var rx2 = rx * rx;
var ry2 = ry * ry;
while (ry2*x <= rx2*y){
setPixel(x + xs, y + ys,arr);
setPixel(x + xs,-y + ys,arr);
setPixel(-x + xs, y + ys,arr);
setPixel(-x + xs,-y + ys,arr);
e1= e + 2*ry2*x + ry2;
e2= e1 - 2*rx2*y + rx2;
x= x + 1 ;
if ((e1+e2)<=0)
e=e1;
else {
e=e2;
y=y-1;
}
}
while (y>=0){
setPixel(x + xs, y + ys,arr);
setPixel(x + xs,-y + ys,arr);
setPixel(-x + xs, y + ys,arr);
setPixel(-x + xs,-y + ys,arr);
e1= e -(2*rx2*y) + rx2;
e2= e1 + (2*ry2*x) + ry2;
y= y-1;
if ((e1+e2)>=0)
e=e1;
else {
e=e2;
x=x+1;
}
}
}
</script>
</head>
<body>
<h1>Rasteryzacja elipsy</h1>
<div id="svg_drawing">
</div>
<canvas id="canvas" width="800px" height="600px" hidden="true" ></canvas>
<div id="drawing area"></div>
<div id="control"><form>
<input id="rx" type="text" value="5" /> Promień x<br />
<br />
<input id="ry" type="text" value="7" />Promień y<br />
<br />
<input id="save" type="button" value="Zapisz" onclick="toImg()"/><br /></form>
</div><script>
var ins = init();
elipsa(ins);
</script>
</body>
</html>
The elips drawing function takes down rx,r from user and start drawing . Problem is that just after entering the loop the y parameter goes up to 7140 value and it kills the set pixel function cause drawing matrix is not big enough and never intended to be like this. Any idea why this is happening ?
Other thing is that i'd like prompt save file dialog not just open converted image in new tab
