javascript - How to Show/ hide part of canvas? -
here js fiddle
i have requirement when user clicks on center circle, should toggle outer circle , when user clicks on outer small circles should change center circle value.
here not getting how show/ hide part of canvas when user clicks on center circle?
any on how this?
generatecanvas(); function generatecanvas() { try { var flagcirclecentercoordinates = new array(); var flagcircles = []; var centerx = document.getelementbyid('canvasflag').width / 2; var centery = document.getelementbyid('canvasflag').height / 2; var outertrackradius = 98; var innertrackradius = 70; var innercircleradius = 20; var flagelement = document.getelementbyid("canvasflag"); var objcontext = flagelement.getcontext("2d"); // outer track objcontext.fillstyle = "#fff"; objcontext.beginpath(); objcontext.arc(centerx, centery, outertrackradius, 0, 2 * math.pi); objcontext.strokestyle = '#ccc'; objcontext.stroke(); objcontext.fill(); // inner track objcontext.beginpath(); objcontext.arc(centerx, centery, innertrackradius, 0, 2 * math.pi); objcontext.strokestyle = '#ccc'; objcontext.stroke(); // inner small circle objcontext.beginpath(); objcontext.arc(centerx, centery, innercircleradius, 0, 2 * math.pi); objcontext.strokestyle = '#ccc'; objcontext.stroke(); //max 17...other wide need change inner , outer circle radius var flagimagesarray = [1, 2, 3,4,5]; if (flagimagesarray.length > 0) { var stepangle = 2 * math.pi / flagimagesarray.length; var flagcircleradius = (outertrackradius - innertrackradius) / 2; var radiusofflagcirclecenters = outertrackradius - flagcircleradius; (var loopcnt in flagimagesarray) { var circlecentercoordinates = new object(); circlecentercoordinates.postionx = centerx + (math.cos(stepangle * (parseint(loopcnt) + 1)) * radiusofflagcirclecenters); circlecentercoordinates.postiony = centery + (math.sin(stepangle * (parseint(loopcnt) + 1)) * radiusofflagcirclecenters); objcontext.beginpath(); objcontext.arc(circlecentercoordinates.postionx, circlecentercoordinates.postiony, flagcircleradius, 0, 2 * math.pi); objcontext.strokestyle = '#ccc'; objcontext.stroke(); objcontext.fillstyle = 'blue'; objcontext.filltext(flagimagesarray[loopcnt], circlecentercoordinates.postionx, circlecentercoordinates.postiony); flagcirclecentercoordinates[loopcnt] = circlecentercoordinates; var objflagcircle = { left : circlecentercoordinates.postionx - flagcircleradius, top : circlecentercoordinates.postiony - flagcircleradius, right : circlecentercoordinates.postionx + flagcircleradius, bottom : circlecentercoordinates.postiony + flagcircleradius, flagname : flagimagesarray[loopcnt] } flagcircles[loopcnt] = objflagcircle; } $('#canvasflag').mousemove(function (event) { debugger; $(this).css('cursor', 'auto'); var clickedx = event.pagex - $('#canvasflag').offset().left; var clickedy = event.pagey - $('#canvasflag').offset().top; (var count = 0; count < flagcircles.length; count++) { if (clickedx < flagcircles[count].right && clickedx > flagcircles[count].left && clickedy > flagcircles[count].top && clickedy < flagcircles[count].bottom) { $(this).css('cursor', 'pointer'); break; } } }); $('#canvasflag').click(function (event) { debugger; $(this).css('cursor', 'auto'); var clickedx = event.pagex - $('#canvasflag').offset().left; var clickedy = event.pagey - $('#canvasflag').offset().top; (var count = 0; count < flagcircles.length; count++) { if (clickedx < flagcircles[count].right && clickedx > flagcircles[count].left && clickedy > flagcircles[count].top && clickedy < flagcircles[count].bottom) { objcontext.fillstyle = "#fff"; objcontext.beginpath(); objcontext.arc(centerx, centery, innercircleradius - 1, 0, math.pi * 2); objcontext.closepath(); objcontext.fill(); objcontext.fillstyle = "blue"; objcontext.filltext(flagcircles[count].flagname, centerx, centery); break; } } }); } } catch (e) { alert(e); } }<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <canvas id="canvasflag" width="200" height="200"> browser not support canvas </canvas>
oh man. ok first off, you'll need rid of try/catch statement, isn't doing anything.
next you'll need make vars have outside of function body, need able access them function
it looks have click functionality done, , it's working too. that's good, go ahead , move both of lines start jquery outside of generatecanvas function. need run once, , we're going need call generate canvas again.
fourth, make variable toggle outer circle off , on somewhere, , draw outer ring in generatecanvas() when variable true. should set global variable gets set count, right before break, can remember when regenerate canvas. take code have in click function draw inner circle number, , put inside of generate canvas. make sure code calls if variable used remember count set (ie had clicked outer number)
next, add generatecanvas() call in click function.now click function sets variable use represent center value, redraws canvas, , returns. you'll need more logic in mouse down function in order figure out when clicked center, based on code have can figure out, main problem set run once, not multiple times. makes canvas lot more image instead of active drawing element
don't forget add flagelement.width = flagelement.width clear canvas! (or draw background on it)
Comments
Post a Comment