javascript - Trying to zoom a canvas image not working properly -
i trying zoom canvas image. here function i'm using.
<script language="javascript"> $('#zoomin').click(function(){ var canvaswidth=canvas.width; var canvasheight=canvas.height; canvas.width=canvaswidth*1.5; canvas.height=canvasheight*1.5; context.scale(1.5,1.5); }); </script> but problem image being zoomed, background image not being zoomed.
please see image.
update
this paint.js
colorpurple = { r: 203, g: 53, b: 148 }; var colorgreen = { r: 101, g: 155, b: 65 }; var coloryellow = { r: 255, g: 207, b: 51 }; var colorbrown = { r: 152, g: 105, b: 40 }; var context; canvaswidth = 500; canvasheight = 500; var mycolor=coloryellow; console.log(mycolor); var curcolor = mycolor; var outlineimage = new image(); var swatchimage = new image(); var backgroundimage = new image(); var swatchstartx = 18; var swatchstarty = 19; var swatchimagewidth = 93; var swatchimageheight = 46; var drawingareax = 0; var drawingareay = 0; var drawingareawidth = 500; var drawingareaheight = 500; var colorlayerdata; var outlinelayerdata; var totalloadresources = 3; var curloadresnum = 0; // clears canvas. function clearcanvas() { context.clearrect(0, 0, context.canvas.width, context.canvas.height); }; // draw color swatch function drawcolorswatch(color, x, y) { context.beginpath(); context.arc(x + 46, y + 23, 18, 0, math.pi * 2, true); context.closepath(); if (curcolor === color) { context.drawimage(swatchimage, 0, 0, 59, swatchimageheight, x, y, 59, swatchimageheight); } else { context.drawimage(swatchimage, x, y, swatchimagewidth, swatchimageheight); } context.fillstyle = "rgb(" + color.r + "," + color.g + "," + color.b + ")"; context.fill(); }; // draw elements on canvas function redraw() { var locx, locy; // make sure required resources loaded before redrawing if (curloadresnum < totalloadresources) { return; } clearcanvas(); // draw current state of color layer canvas context.putimagedata(colorlayerdata, 0, 0); // draw background context.drawimage(backgroundimage, 0, 0, canvaswidth, canvasheight); // draw color swatches locx = 0; locy = 19; //drawcolorswatch(colorpurple, locx, locy); locy += 46; //drawcolorswatch(colorgreen, locx, locy); locy += 46; //drawcolorswatch(coloryellow, locx, locy); locy += 46; //drawcolorswatch(colorbrown, locx, locy); // draw outline image on top of everything. move separate // canvas did not have redraw everyime. context.drawimage(outlineimage, drawingareax, drawingareay, drawingareawidth, drawingareaheight); }; function matchoutlinecolor(r, g, b, a) { return (r + g + b < 100 && === 255); }; function matchstartcolor(pixelpos, startr, startg, startb) { var r = outlinelayerdata.data[pixelpos], g = outlinelayerdata.data[pixelpos + 1], b = outlinelayerdata.data[pixelpos + 2], = outlinelayerdata.data[pixelpos + 3]; // if current pixel of outline image black if (matchoutlinecolor(r, g, b, a)) { return false; } r = colorlayerdata.data[pixelpos]; g = colorlayerdata.data[pixelpos + 1]; b = colorlayerdata.data[pixelpos + 2]; // if current pixel matches clicked color if (r === startr && g === startg && b === startb) { return true; } // if current pixel matches new color if (r === curcolor.r && g === curcolor.g && b === curcolor.b) { return false; } return true; }; function colorpixel(pixelpos, r, g, b, a) { colorlayerdata.data[pixelpos] = r; colorlayerdata.data[pixelpos + 1] = g; colorlayerdata.data[pixelpos + 2] = b; colorlayerdata.data[pixelpos + 3] = !== undefined ? : 255; }; function floodfill(startx, starty, startr, startg, startb) { var newpos, x, y, pixelpos, reachleft, reachright, drawingboundleft = drawingareax, drawingboundtop = drawingareay, drawingboundright = drawingareax + drawingareawidth - 1, drawingboundbottom = drawingareay + drawingareaheight - 1, pixelstack = [[startx, starty]]; while (pixelstack.length) { newpos = pixelstack.pop(); x = newpos[0]; y = newpos[1]; // current pixel position pixelpos = (y * canvaswidth + x) * 4; // go long color matches , inside canvas while (y >= drawingboundtop && matchstartcolor(pixelpos, startr, startg, startb)) { y -= 1; pixelpos -= canvaswidth * 4; } pixelpos += canvaswidth * 4; y += 1; reachleft = false; reachright = false; // go down long color matches , in inside canvas while (y <= drawingboundbottom && matchstartcolor(pixelpos, startr, startg, startb)) { y += 1; colorpixel(pixelpos, curcolor.r, curcolor.g, curcolor.b); if (x > drawingboundleft) { if (matchstartcolor(pixelpos - 4, startr, startg, startb)) { if (!reachleft) { // add pixel stack pixelstack.push([x - 1, y]); reachleft = true; } } else if (reachleft) { reachleft = false; } } if (x < drawingboundright) { if (matchstartcolor(pixelpos + 4, startr, startg, startb)) { if (!reachright) { // add pixel stack pixelstack.push([x + 1, y]); reachright = true; } } else if (reachright) { reachright = false; } } pixelpos += canvaswidth * 4; } } }; // start painting paint bucket tool starting pixel specified startx , starty function paintat(startx, starty) { var pixelpos = (starty * canvaswidth + startx) * 4, r = colorlayerdata.data[pixelpos], g = colorlayerdata.data[pixelpos + 1], b = colorlayerdata.data[pixelpos + 2], = colorlayerdata.data[pixelpos + 3]; if (r === curcolor.r && g === curcolor.g && b === curcolor.b) { // return because trying fill same color return; } if (matchoutlinecolor(r, g, b, a)) { // return because clicked outline return; } floodfill(startx, starty, r, g, b); redraw(); }; // add mouse event listeners canvas function createmouseevents() { $('#canvas').mousedown(function (e) { // mouse down location var mousex = e.pagex - this.offsetleft, mousey = e.pagey - this.offsettop; if (mousex < drawingareax) { // left of drawing area if (mousex > swatchstartx) { if (mousey > swatchstarty && mousey < swatchstarty + swatchimageheight) { curcolor = colorpurple; redraw(); } else if (mousey > swatchstarty + swatchimageheight && mousey < swatchstarty + swatchimageheight * 2) { curcolor = colorgreen; redraw(); } else if (mousey > swatchstarty + swatchimageheight * 2 && mousey < swatchstarty + swatchimageheight * 3) { curcolor = coloryellow; redraw(); } else if (mousey > swatchstarty + swatchimageheight * 3 && mousey < swatchstarty + swatchimageheight * 4) { curcolor = colorbrown; redraw(); } } } else if ((mousey > drawingareay && mousey < drawingareay + drawingareaheight) && (mousex <= drawingareax + drawingareawidth)) { paintat(mousex, mousey); } }); }; resourceloaded = function () { curloadresnum += 1; if (curloadresnum === totalloadresources) { createmouseevents(); redraw(); } }; function start() { var canvas = document.createelement('canvas'); canvas.setattribute('width', canvaswidth); canvas.setattribute('height', canvasheight); canvas.setattribute('id', 'canvas'); document.getelementbyid('canvasdiv').appendchild(canvas); if (typeof g_vmlcanvasmanager !== "undefined") { canvas = g_vmlcanvasmanager.initelement(canvas); } context = canvas.getcontext("2d"); backgroundimage.onload = resourceloaded(); backgroundimage.src = "images/t.png"; swatchimage.onload = resourceloaded(); swatchimage.src = "images/o.png"; outlineimage.onload = function () { context.drawimage(outlineimage, drawingareax, drawingareay, drawingareawidth, drawingareaheight); try { outlinelayerdata = context.getimagedata(0, 0, canvaswidth, canvasheight); } catch (ex) { window.alert("application cannot run locally. please run on server."); return; } clearcanvas(); colorlayerdata = context.getimagedata(0, 0, canvaswidth, canvasheight); resourceloaded(); }; outlineimage.src = "images/d.png"; }; getcolor = function (){ }; and css
<style> body{ width:100%; height:auto; text-align: center; } .colorpick{ widh:100%; height:atuo; } .pick{ display:inline-block; width:30px; height:30px; margin:5px; cursor:pointer; } canvas{ border:2px solid silver; } </style>
only reason can think of missed redrawing background well.
$('#zoomin').click(function(){ canvaswidth *= 1.5; canvasheight *= 1.5; canvas.width = canvaswidth; canvas.height = canvasheight; context.scale(1.5,1.5); context.drawimage(backgroundimage, 0, 0, canvaswidth, canvasheight); }); you didn't show html/css code assume don't have css messing background dimensions.
edit original .click() implementation problematic because declare canvaswidth , canvasheight var keyword makes these 2 variables local function. not globally updated. see redraw() use these 2 variables. related background being redrawn.
Comments
Post a Comment