print copy of image when drag the original image

Wednesday, January 7, 2015

Hi, when dragging the image within the container i want to print a copy of image at perticular x,y coordinate and previous drawn image should be erase how can i do this?please help me...


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Prototype</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.2.min.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>
<style>
    body{padding:20px;}
    #container{
      border:solid 1px #ccc;
      margin-top: 10px;
      width:350px;
      height:350px;
    }
    #toolbar{
      width:350px;
      height:35px;
      border:solid 1px blue;
    }
</style>       
<script>
$(function(){

    // get a reference to the house icon in the toolbar
    // hide the icon until its image has loaded
    var $house=$("#house");
    $house.hide();

    // get the offset position of the kinetic container
    var $stageContainer=$("#container");
    var stageOffset=$stageContainer.offset();
    var offsetX=stageOffset.left;
    var offsetY=stageOffset.top;

    // create the Kinetic.Stage and layer
    var stage = new Kinetic.Stage({
        container: 'container',
        width: 350,
        height: 350
    });
    var layer = new Kinetic.Layer();
    stage.add(layer);

    // start loading the image used in the draggable toolbar element
    // this image will be used in a new Kinetic.Image
    var image1=new Image();
    image1.onload=function(){
        $house.show();
    }
    image1.src="http://vignette1.wikia.nocookie.net/angrybirds/images/b/b6/Small.png/revision/latest?cb=20120501022157";

    // make the toolbar image draggable
    $house.draggable({
        helper:'clone',
    });

    // set the data payload
    $house.data("url","house.png"); // key-value pair
    $house.data("width","32"); // key-value pair
    $house.data("height","33"); // key-value pair
    $house.data("image",image1); // key-value pair

    // make the Kinetic Container a dropzone
    $stageContainer.droppable({
        drop:dragDrop,
    });

    // handle a drop into the Kinetic container
    function dragDrop(e,ui){

        // get the drop point
        var x=parseInt(ui.offset.left-offsetX);
        var y=parseInt(ui.offset.top-offsetY);

        // get the drop payload (here the payload is the image)
        var element=ui.draggable;
        var data=element.data("url");
        var theImage=element.data("image");

        // create a new Kinetic.Image at the drop point
        // be sure to adjust for any border width (here border==1)
        var image = new Kinetic.Image({
            name:data,
            x:x,
            y:y,
            image:theImage,
            draggable: true,
       
        // restrict to allow horizontal dragging only
        dragBoundFunc: function(pos) {
//            if(pos.x<this.minX){  pos.x=this.minX; }
//            this.minX=pos.x;
            return {
              x: pos.x,
              y: this.getAbsolutePosition().y
            }
        }       
       
       });
      
       //get image position.
            image.on("dragend", function() {
               var points = image.getPosition();
               //alert(points.x + ',' + points.y);
               var image1 = new Kinetic.Image({
                    name: data,
                    id: "imageantry",
                    x: points.x+65,
                    y: points.y,
                    image: theImage,
                    draggable: false
                });
                layer.add(image1);
                layer.draw();
            });
        image.on('dblclick', function() {
            image.remove();
            layer.draw();
        });
        layer.add(image);
        layer.draw();
    }

}); // end $(function(){});

</script>      
</head>
<body>
    <div id="toolbar">
        <img id="house" width=32 height=32 src="http://vignette1.wikia.nocookie.net/angrybirds/images/b/b6/Small.png/revision/latest?cb=20120501022157"><br>
    </div>
    <div id="container"></div>
</body>
</html>

--
You received this message because you are subscribed to the Google Groups "JavaScript Forum" group.
To unsubscribe from this group and stop receiving emails from it, send an email to javascript-information+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

0 comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Copyright © 2010 Web Design | Free Blogger Templates by Splashy Templates | Layout by Atomic Website Templates

Vida de bombeiro Recipes Informatica Humor Jokes Mensagens Curiosity Saude Video Games Animals Diario das Mensagens Eletronica Rei Jesus News Noticias da TV Artesanato Esportes Noticias Atuais Games Pets Career Religion Recreation Business Education Autos Academics Style Television Programming Motosport Humor News The Games Home Downs World News Internet Design Entertaimment Celebrities 1001 Games Doctor Pets Net Downs World Enter Jesus Mensagensr Android Rub Letras Dialogue cosmetics Genexus lasofia thebushrajr wingshock tripedes gorduravegetal dainfamia dejavu-transpersonal jsbenfica republicadasbadanas ruiherbon iranianforaryans eaystcheyl fotosdanadir Só Humor Curiosity Gifs Medical Female American Health Madeira Designer PPS Divertidas Estate Travel Estate Writing Computer Matilde Ocultos Matilde futebolcomnoticias girassol lettheworldturn topdigitalnet Bem amado enjohnny produceideas foodasticos cronicasdoimaginario downloadsdegraca compactandoletras newcuriosidades blogdoarmario arrozinhoii