javascript - Mouse Wheel Zooming -


so i'm working on canvas can drag image side side , use mouse wheel re size image zooming in , out on here code have far please feel free ask more details. i'm trying find way that's compact , require minimum code.

<!doctype html> <html>   <head>     <style>       body {         margin: 0px;         padding: 0px;       }     </style>     <script src="kinetic-v5.1.0.min.js" type="text/javascript"></script>   </head>   <body>     <div id="container"></div>      <script type="text/javascript">       function drawimage(imageobj) {         var stage = new kinetic.stage({           container: "container",           width: 1800,           height: 800         });         var layer = new kinetic.layer();          // image         var image1 = new kinetic.image({           image: imageobj,           x: stage.getwidth() / 2 - 896 / 1,           y: stage.getheight() / 2 - 255 / 2,           width: 200,           height: 157,           draggable: true,           dragboundfunc: function (pos) {             if (pos.x < this.minx) { }             this.minx = pos.x;             return {               x: pos.x,               y: this.getabsoluteposition().y             }           }         });           // add cursor styling         image1.on('mouseover', function() {           document.body.style.cursor = 'pointer';         });         image1.on('mouseout', function() {           document.body.style.cursor = 'default';         });          layer.add(image1);         stage.add(layer);       }       var imageobj = new image();       imageobj.onload = function() {         drawimage(this);       };       imageobj.src = 'image1.png';      </script>   </body> </html>

one way use zoom helper. example:

var zoomhelper = {     stage: null,     scale: 1,     zoomfactor: 1.1,     origin: {         x: 0,         y: 0     },     zoom: function(event) {         event.preventdefault();         var delta;         if (navigator.useragent.tolowercase().indexof('firefox') > -1) {             if (event.originalevent.detail > 0) {                 //scroll down                 delta = 0.2;             } else {                 //scroll                 delta = 0;             }         } else {             if (event.originalevent.wheeldelta < 0) {                 //scroll down                 delta = 0.2;             } else {                 //scroll                 delta = 0;             }         }         var evt = event.originalevent,             mx = evt.clientx - zoomhelper.stage.getx(),             = evt.clienty - zoomhelper.stage.gety(),             zoom = (zoomhelper.zoomfactor - delta),             newscale = zoomhelper.scale * zoom;         zoomhelper.origin.x = mx / zoomhelper.scale + zoomhelper.origin             .x - mx / newscale;         zoomhelper.origin.y = / zoomhelper.scale + zoomhelper.origin             .y - / newscale;         zoomhelper.stage.setoffset({             x: zoomhelper.origin.x,             y: zoomhelper.origin.y         });         zoomhelper.stage.setscale({             x: newscale,             y: newscale         });         zoomhelper.stage.draw();         zoomhelper.scale *= zoom;     } };

here demo code provided in example changed.


-

Comments

Post a Comment

Popular posts from this blog

OpenCV OpenCL: Convert Mat to Bitmap in JNI Layer for Android -

there several posts converting mat bitmap using utils.mattobitmap() function. i'm assuming function can called in java layer after importing utils class. i want transfer data memory address pointed uint32_t* bmpcontent; in code below. jniexport void jnicall java_com_nod_nodcv_nodcvactivity_runfilter( jnienv *env, jclass clazz, jobject outbmp, jbytearray indata, jint width, jint height, jint choice, jint filter) { int outsz = width*height; int insz = outsz + outsz/2; androidbitmapinfo bmpinfo; if (androidbitmap_getinfo(env, outbmp, &bmpinfo) < 0) { throwjavaexception(env,"gaussianblur","error retrieving bitmap meta data"); return; } if (bmpinfo.format != android_bitmap_format_rgba_8888) { throwjavaexception(env,"gaussianblur","expecting rgba_8888 format"); return; } uint32_t* bmpcontent; if (androidbitmap_lockpixels(env, outbmp,(void**)&bmpcontent)...
Read more

android - org.xmlpull.v1.XmlPullParserException: expected: START_TAG {http://schemas.xmlsoap.org/soap/envelope/}Envelope -

i trying hit soap api in application login purpose , getting above mentioned error , can 1 tell me going wrong , first time soap apis. here code hit soap :- vector<object> args = new vector<object>(); hashtable<string, object> hashtable = new hashtable<string, object>(); hashtable.put("email", "mss.siddhart28@gmail.com"); hashtable.put("password", "siddharth"); args.add(hashtable); soapserializationenvelope envelope = new soapserializationenvelope( soapenvelope.ver11); envelope.dotnet = true; envelope.xsd = soapserializationenvelope.xsd; envelope.enc = soapserializationenvelope.enc; (new marshalhashtable()).register(envelope); httptransportse androidhttptransport = new httptransportse( "http://tempuri.org/", 15000); androidhttptransport.debug = true; string result = ""; try { soapobject request = new soapobject("http:...
Read more

python - How to remove the Xframe Options header in django? -

i have made page has iframe . inside iframe want show multiple different links article facebook, or news, or youtube video or other possible url. but, due xframe header, unable so. referred following link: https://docs.djangoproject.com/en/1.8/ref/clickjacking/ , django xframeoptionsmiddleware (x-frame-options) - allow iframe client ip but didn't help. my settings.py file's middleware_classes is: middleware_classes = ( 'django.contrib.sessions.middleware.sessionmiddleware', 'django.middleware.common.commonmiddleware', 'django.middleware.csrf.csrfviewmiddleware', 'django.contrib.auth.middleware.authenticationmiddleware', 'django.contrib.auth.middleware.sessionauthenticationmiddleware', 'django.contrib.messages.middleware.messagemiddleware', 'django.middleware.clickjacking.xframeoptionsmiddleware', ) from http://django-secure.readthedocs.org/en/latest/middleware.html , found using ...
Read more