Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- var element = canvas.circle( canvas.cwidth / 2, canvas.cheight / 2, 100 ).attr( { fill: 'red', stroke: 'black', 'stroke-width': 5, cursor: 'move' } );
- var startDrag = function( x, y )
- {
- console.log("starting drag" );
- element.attr( { 'fill-opacity': 0.5 } );
- };
- var endDrag = function( x, y )
- {
- console.log("stopping drag" );
- element.animate( { transform: "T0,0", fill: 'red', 'fill-opacity': 1 }, 1000, 'bounce' );
- };
- var continueDrag = function( dx, dy, x, y )
- {
- var r = Math.sqrt( dx * dx + dy * dy ) / ( canvas.cwidth / 2 ) * 255;
- var g = x / canvas.cwidth * 255;
- var b = y / canvas.cheight * 255;
- element.transform( [ "T", dx, dy ] );
- element.attr( 'fill', Raphael.rgb( r, g, b ) );
- };
- element.touchstart( startDrag );
- element.touchend( endDrag );
- element.touchmove( continueDrag );
- element.drag( continueDrag, startDrag, endDrag );
- /* Set up generic drag */
- var start=function() {
- this.data("oldt", this.transform());
- }, move = function(dx, dy) {
- // Set up reluctance:- only move if changed by at least 25 pixels
- if (dx>=25 || dy>=25){
- this.attr("fill","blue");
- this.transform(this.data("oldt") + "T" + dx + "," + dy);
- this.data("move", "T" + dx + "," + dy);
- }}, up = function() {
- this.attr("fill","green")
- };
- var box = canvas.rect(150,50,100,100).attr("fill", "white");
- box.drag(move,start,up);
- box.touchstart(function(){
- this.attr("fill","red");
- });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement