/* TurtleShepherd turltestich's central intelligence agancy */ function TurtleShepherd() { this.init(); } function TurtleShepherd(world) { this.init(); this.setWorld(world); } TurtleShepherd.prototype.init = function() { this.w = 480; this.h = 360; this.clear(); this.gridSize = 50; this.showJumpStitches = true; this.showStitches = true; this.showGrid = true; this.showTurtle = true; }; TurtleShepherd.prototype.clear = function() { this.cache = []; this.minX = 0; this.minY = 0; this.maxX = 0; this.maxY = 0; this.steps = 0; this.initX = 0; this.initY = 0; this.scale = 1; this.dx = 0; this.dy = 0; }; TurtleShepherd.prototype.setWorld = function(world) { this.world = world; }; TurtleShepherd.prototype.hasSteps = function() { return this.steps > 0; }; TurtleShepherd.prototype.addMoveTo= function(x,y,penState) { this.cache.push( { "cmd":"move", "x":x, "y":-y, "penDown":penState, } ); if (this.steps === 0) { this.minX = x; this.minY = y; this.maxX = x; this.maxY = y; } else { if (x < this.minX) this.minX = x; if (x > this.maxX) this.maxX = x; if (y < this.minY) this.minY = y; if (y > this.maxY) this.maxY = y; } this.steps++; if (DEBUG) this.debug_msg("move to " + x + " " + y + " " + penState ); }; TurtleShepherd.prototype.initPosition = function(x,y) { this.initX = x; this.initY = -y; if (DEBUG) this.debug_msg("init " + x + " " + y ); }; TurtleShepherd.prototype.addColorChange= function(color) { this.cache.push( { "cmd":"color", "value":color, } ); }; TurtleShepherd.prototype.setScale = function(s) { this.scale = s; if (DEBUG) this.debug_msg("zoom to scale "+ s ); }; TurtleShepherd.prototype.zoomIn = function() { this.scale += 0.1; if (DEBUG) this.debug_msg("zoom to scale "+this.scale ); }; TurtleShepherd.prototype.zoomOut = function() { if (this.scale > 0.15) this.scale -= 0.1; if (DEBUG) this.debug_msg("zoom to scale "+ this.scale ); }; TurtleShepherd.prototype.zoomIn = function() { this.scale += 0.1; if (DEBUG) this.debug_msg("zoom to scale "+this.scale ); }; TurtleShepherd.prototype.pan = function(dx, dy) { this.dx -= dx; this.dy -= dy; }; TurtleShepherd.prototype.setStageDimensions = function(w,h) { this.w = w; this.h = h; /* document.getElementById("svg2").style.left = x + "px"; document.getElementById("svg2").style.top = y+ "px"; */ /* document.getElementById("svg2").style.width = w + "px"; document.getElementById("svg2").style.height = h + "px"; document.getElementById("svg2").style.right = "0"; document.getElementById("svg2").style.bottom = "0"; */ }; TurtleShepherd.prototype.setStagePosition = function(x,y) { //document.getElementById("svg2").style.top = y + "px"; //document.getElementById("svg2").style.left = x + "px"; }; TurtleShepherd.prototype.renderGrid = function(size) { size = this.gridSize; return '' + '' + '' + '' + '\n'; }; TurtleShepherd.prototype.toSVG = function() { var svgStr = "\n"; svgStr += "\n"; svgStr += '\n'; hasFirst = false; tagOpen = false; for (var i=0; i < this.cache.length; i++) { if (this.cache[i].cmd == "move") { stitch = this.cache[i]; if (!hasFirst) { if (stitch.penDown) { svgStr += '\n' ; hasFirst = true; } } else { if (this.cache[i].penDown ) { if (!this.cache[i-1].penDown ) { svgStr +=' \n' ; } } } } if (tagOpen) svgStr += '" />\n'; svgStr += '\n'; return svgStr; }; TurtleShepherd.prototype.toogleShowStitches = function() { this.showStitches = !this.showStitches; }; TurtleShepherd.prototype.getShowStitches = function() { return this.showStitches; }; TurtleShepherd.prototype.toogleShowJumpStitches = function() { this.showJumpStitches = !this.showJumpStitches; }; TurtleShepherd.prototype.getShowJumpStitches = function() { return this.showJumpStitches; }; TurtleShepherd.prototype.toogleShowGrid = function() { this.showGrid = !this.showGrid; }; TurtleShepherd.prototype.getShowGrid = function() { return this.showGrid; }; TurtleShepherd.prototype.toSVG2 = function() { //var svgStr = "\n"; //svgStr += "\n"; svgStr = '\n'; } hasFirst = false; tagOpen = false; prevX = this.initX; prevY = this.initY; for (var i=0; i < this.cache.length; i++) { if (this.cache[i].cmd == "move") { stitch = this.cache[i]; if (stitch.penDown || this.showJumpStitches) svgStr += '\n'; else if (this.showJumpStitches) svgStr +='" stroke-linecap="round" style="stroke:rgb(255,0,0);stroke-width:0.6;" stroke-dasharray="4 4" />\n'; if (this.showStitches) { svgStr +='\n'; } } prevX = stitch.x; prevY = stitch.y; } if (tagOpen) svgStr += '" />\n'; svgStr += '\n'; return svgStr; }; TurtleShepherd.prototype.reRender = function(cnv) { sourceSVG = turtleShepherd.toSVG2(); /* get canvas of world not via call if (DEBUG) this.debug_msg("this world is " + this.world.children[0].stage.penTrails() ); if (typeof this.world !== 'undefined') { cnv = this.world.children[0].stage.penTrails(); this.debug_msg("override canvas" ); } */ // draw via canvg's drawSVF if (cnv) { var ctx = cnv.getContext('2d'); ctx.clearRect(0, 0, cnv.width, cnv.height); ctx.drawSvg(turtleShepherd.toSVG2(), 0, 0, cnv.width, cnv.height); } // debug options document.getElementById("code").innerHTML = sourceSVG; //document.getElementById("svg2").innerHTML = sourceSVG; // drawing alternatives - to be REMOVED: // draw via canvg - works but very slow! //canvg(document.getElementById('svg'), turtleShepherd.toSVG()); // draw via canvg - works but very slow! //canvg(cnv, turtleShepherd.toSVG()); /* // another method to draw svg on canvas var svgString = (new XMLSerializer()).serializeToString(document.querySelector('svg')); var img = new Image(); ctx = cnv.getContext('2d'); img.src = "data:image/svg+xml;base64," + btoa(svgString); img.onload = function() { // after this, Canvas’ origin-clean is DIRTY ctx.clearRect(0, 0, cnv.width, cnv.height); ctx.drawImage(img, 0, 0, cnv.width, cnv.height); }; */ }; TurtleShepherd.prototype.debug_msg = function (st, clear) { o = ""; if (!clear) { o = document.getElementById("debug").innerHTML; } else { o = ""; } o = st + "
" + o; document.getElementById("debug").innerHTML = o; };