javascript - Drawing a circle on HTML5 canvas at touch location -

-

basically, i'm trying use javascript when button pressed on page, begin listening next touch on canvas. on touch, function triggered gets x , y co-ordinates of touch , draws circle there. circle needs labelled well, have put in prompt label. here attempt , bit of context:

<input type="button" value="add symptom" onclick="touch_init();">

when above input button pressed following triggered:

function touch_init(){     var canvas = document.getelementbyid("medicanvas");     canvas.addeventlistener("touchstart", drawsymptomcircle, false); }  function drawsymptomcircle(event) {     var canvas = document.getelementbyid("medicanvas");      if (canvas.getcontext){         var ctx = canvas.getcontext("2d");         var x = new number();         var y = new number();         var radius = 100;                    var symptomname=prompt("please enter name of symptom:");          x = event.targettouches[0].pagex;         y = event.targettouches[0].pagey;          x-=canvas.offsetleft;         y-=canvas.offsettop;          ctx.beginpath();         ctx.arc(x, y, radius, 0, 2 * math.pi, false);         ctx.fillstyle = "rgb(0,128,255)";         ctx.fill();         ctx.linewidth = 2;         ctx.strokestyle = "black";         ctx.stroke();          ctx.font = '15pt calibri';         ctx.fillstyle = 'black';         ctx.textalign = 'center';         ctx.filltext(symptomname, x, y);          canvas.removeeventlistener("touchstart", drawsymptomcircle, false);      } }

edit: draws circles inside canvas, not @ 0,0 , not drawn in right places. why not in correct place?

use clientx/y instead , use bounding rect compensate canvas position:

function drawsymptomcircle(event) {      var canvas = this;  // no need canvas element dom, = canvas      if (canvas.getcontext){  // test should done once in global, not here :)         ...          var rect = this.getboundingclientrect();  // absolute position of canvas         x = event.targettouches[0].clientx;       // relative client win         y = event.targettouches[0].clienty;          x -= rect.left;                           // adjusted relative canvas         y -= rect.top;          ...

also obtaining getcontext() recommend in global/parent scope. this represent canvas element element default context event handler.


Comments

Post a Comment

Popular posts from this blog

c++ - No viable overloaded operator for references a map -

-
i trying use map can make tag names reference number. when try , use it, in code error (6 in total every time reference map): src/main.cpp:25:45: error: no viable overloaded operator[] type 'std::map<std::string, std::string>' const char* idcs = node.child_value(tagmap[3]); this code: #include "pugi/pugixml.hpp" #include <iostream> #include <string> #include <map> int main() { pugi::xml_document doca, docb; std::map<std::string, pugi::xml_node> mapa, mapb; std::map<std::string, std::string> tagmap {{"1", "data"}, {"2", "entry"}, {"3", "id"}, {"4", "content"}}; if (!doca.load_file("a.xml") || !docb.load_file("b.xml")) { std::cout << "can't find input files"; return 1; } (auto& node: doca.child(tagmap[1]).children(tagmap[2])) { co
Read more

java - Custom OutputStreamAppender not run: LOGBACK: No context given for <MYAPPENDER> -

-
i wish write custom appender on basis of outputstreamappender . wrote following class package tests; import java.io.ioexception; import java.io.outputstream; import ch.qos.logback.core.outputstreamappender; public class myappender<e> extends outputstreamappender<e> { public myappender() { system.out.println("myappender created"); setoutputstream(new outputstream() { @override public void write(int b) throws ioexception { throw new unsupportedoperationexception(); } }); } } then wrote following runner: package tests; import org.slf4j.loggerfactory; import ch.qos.logback.classic.logger; public class runner { private static final logger log = (logger) loggerfactory.getlogger(runner.class); public static void main(string[] args) { //log.addappender(new myappender<iloggingevent>()); log.info("hello world"); } } finall
Read more

java - Cannot secure connection using TLS -

-
i'm trying establish secure socket connection between java client applet (built jdk 1.7.0_75-b13) , vc++ server application. as test vehicle, used vc++ client/server sample found in msdn forums, modified use schannel , able establish socket using cipher suite tls_rsa_with_aes_128_cbc_sha. works of tls 1.0/1.1/1.2. when try opening socket java applet same server application, connection rejected server reporting following: tls 1.0 acceptsecuritycontext failed: 0x80090327 tls 1.1 acceptsecuritycontext failed: 0x80090331 tls 1.2 acceptsecuritycontext failed: 0x80090331 this java code used create socket: debugprint("setting secure connection"); sslsocketfactory sslsocketfactory = (sslsocketfactory) sslsocketfactory.getdefault(); sslsocket sslsocket = (sslsocket) sslsocketfactory.createsocket("127.0.0.1", socketnumber); debugprint("starting handshake"); sslsocket.settcpnodelay(true); sslsocket.setsolinger(false, 0); sslsocket.s
Read more