raphael test

by gbos

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/stackblur-canvas/1.4.1/stackblur.min.js"></script>
<script src="https://rawgit.com/AliasIO/Raphael.FreeTransform/master/raphael.free_transform.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.3.0/raphael.min.js"></script>
<div id="test"/>

JavaScript

// blur: http://jsfiddle.net/gbos/5vYwJ/43/
// export to canvas: https://stackoverflow.com/questions/14165571/how-to-show-download-raphaeljs-canvas-as-an-imagepng-gif

// drag: http://jsfiddle.net/gbos/aEcGY/536/

// https://github.com/AliasIO/Raphael.FreeTransform

// svg to raphael http://readysetraphael.com/


//var img = paper.image("http://svg.dabbles.info/tux.png", 0, 0);
           //.attr({ "clip-rect": "0,0,300,300" });


/*

var rsr = Raphael('rsr', '16', '16'); 
var path_a = rsr.path("M15.375,7L10,2.54C9.695,2.287,9.461,2,9,2C8.375,2,8,2.516,8,3v3H1C0.45,6,0,6.45,0,7v2c0,0.55,0.45,1,1,1h7v3 c0,0.484,0.375,1,1,1c0.461,0,0.695-0.287,1-0.54L15.375,9C15.758,8.688,16,8.445,16,8S15.758,7.313,15.375,7z"); path_a.attr({'stroke-width': '0','stroke-opacity': '1','fill': '#000000'}).data('id', 'path_a'); var rsrGroups = []; 


*/



const imgUrl = "http://www.stockfreeimages.com/Swiss-panorama-thumb6499792.jpg";
const img = new Image();
img.addEventListener("load", () => {
	console.log(img.width, img.height);
  
  var paper = Raphael("test", img.width, img.height);
  
  paper.image(imgUrl, 0, 0, img.width, img.height);

	var filter = paper.createFilter();
	//filter.addShiftToColor("white").addBlur(7);
  filter.addBlur(30);


var arrow = paper.path("M15.375,7L10,2.54C9.695,2.287,9.461,2,9,2C8.375,2,8,2.516,8,3v3H1C0.45,6,0,6.45,0,7v2c0,0.55,0.45,1,1,1h7v3 c0,0.484,0.375,1,1,1c0.461,0,0.695-0.287,1-0.54L15.375,9C15.758,8.688,16,8.445,16,8S15.758,7.313,15.375,7z").attr({'stroke-width': '0','stroke-opacity': '1','fill': '#000000'});


   //paper.rsr(200, 200, 40, 40);

	const circle = paper.circle(100, 100, 50)
    .attr({fill: "white", stroke: "red", "fill-opacity": 0.1});
   

paper.freeTransform(circle).showHandles();
paper.freeTransform(arrow).showHandles();



  const canvas = document.querySelector('canvas');
  console.log(canvas);

paper.image(imgUrl, 0, 0, img.width, img.height).attr({'clip-rect': "100 100 50 50"}).blur(10);

/*
paper.text(10, 50,...