JSFiddle - React, Tailwind, and code Playground

by ipoly

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.3/jquery.mousewheel.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<div id="canvas"></div>

CSS

#canvas {width: 100%;height:100%;overflow:hidden; }
svg {border:1px solid green;}

JavaScript

var paper = Raphael('canvas',500,500)
var img = paper.image('http://etc.usf.edu/clipart/80100/80154/80154_grid_20_20_lg.gif',0,0,1024,1024);

center = paper.circle(paper.width/2,paper.height/2,3)

img.attr({
    x: (paper.width-img.attr('width'))/2,
    y: (paper.height-img.attr('height'))/2,
    transform:'s0.1'
})

img.click(function(e,x,y){
    bbox = this.getBBox();
    scale = this.matrix.split().scalex;
    mx = x - bbox.x;
    my = y - bbox.y;
    
    rx = mx/scale;
    ry = my/scale;
    console.log(rx,ry)
    
    var attr = {
        x: - rx,
        y: - ry,
        //transform:'S0.1,0.1,'+[rx,ry]
    }
    console.log(attr);
    this.attr(attr);
    console.log(this.getBBox())
})

img.drag(
    function(dx,dy){
        tx = dx - this.ox;
        ty = dy - this.oy;
        this.transform('...T'+[tx,ty])
        this.ox = dx;
        this.oy = dy;
    },
    function(){
        this.ox = 0;
        this.oy = 0;
    }
)
var zoomlvl = 1;
$('#canvas').on('mousewheel',function(e,delta){
    zoomlvl += delta*0.1;
    var bbox = img.getBBox();
    var px = e.offsetX - bbox.x;
    var py = e.offsetY - bbox.y;
    img.animate({transform:'s'+[zoomlvl]},400,'>');
    console.log(zoomlvl)
  
})