Menu
Sites
Language
scale and move the image

this code work on browser but dosen't work on tizen.

 

http://jsfiddle.net/m1erickson/LAS8L/

List

Responses

12 Replies
colin Rao

try to use a local image?

also, not enough information, could be more detailed or share your sample code here?

Palitsyna

Hello,

do you have internet privilege in you config.xml file to access this picture? If not, try to add following lines:

<tizen:privilege name="http://tizen.org/privilege/internet"/>
<access origin="*" subdomains="true"/>

 

 

ashish kumar

In this my app have all internet privilege. problem is image are not move and scale.

Alex Dem

Hi,
I am not sure that code should works after direct copypaste. Maybe you should rework /edit your code in some places.
For example if you don't use jquery you could add listener to mouse down this way:

    canvas.addEventListener("mousedown", (function (e) {
        handleMouseDown(e);
  }), false);

etc.
Alexey.

ashish kumar

Hi, i am edit the code but nothing happen. can you give me another solutation. thank's.

Palitsyna

Hello,

could you provide more details or share your modified code. 

ashish kumar

Hi,

this code work on browser but dosen't work on tizen.

 

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; padding:10px;}
    #canvas{border:1px solid red;}
</style>

<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    var canvasOffset=$("#canvas").offset();
    var offsetX=canvasOffset.left;
    var offsetY=canvasOffset.top;

    var startX;
    var startY;
    var isDown=false;


    var pi2=Math.PI*2;
    var resizerRadius=8;
    var rr=resizerRadius*resizerRadius;
    var draggingResizer={x:0,y:0};
    var imageX=50;
    var imageY=50;
    var imageWidth,imageHeight,imageRight,imageBottom;
    var draggingImage=false;
    var startX;
    var startY;

 

    var img=new Image();
    img.onload=function(){
        imageWidth=img.width;
        imageHeight=img.height;
        imageRight=imageX+imageWidth;
        imageBottom=imageY+imageHeight
        draw(true,false);
    }
    img.src="frm3.jpg";


    function draw(withAnchors,withBorders){

        // clear the canvas
        ctx.clearRect(0,0,canvas.width,canvas.height);

        // draw the image
        ctx.drawImage(img,0,0,img.width,img.height,imageX,imageY,imageWidth,imageHeight);

        // optionally draw the draggable anchors
        if(withAnchors){
            drawDragAnchor(imageX,imageY);
            drawDragAnchor(imageRight,imageY);
            drawDragAnchor(imageRight,imageBottom);
            drawDragAnchor(imageX,imageBottom);
        }

        // optionally draw the connecting anchor lines
        if(withBorders){
            ctx.beginPath();
            ctx.moveTo(imageX,imageY);
            ctx.lineTo(imageRight,imageY);
            ctx.lineTo(imageRight,imageBottom);
            ctx.lineTo(imageX,imageBottom);
            ctx.closePath();
            ctx.stroke();
        }

    }

    function drawDragAnchor(x,y){
        ctx.beginPath();
        ctx.arc(x,y,resizerRadius,0,pi2,false);
        ctx.closePath();
        ctx.fill();
    }

    function anchorHitTest(x,y){

        var dx,dy;

        // top-left
        dx=x-imageX;
        dy=y-imageY;
        if(dx*dx+dy*dy<=rr){ return(0); }
        // top-right
        dx=x-imageRight;
        dy=y-imageY;
        if(dx*dx+dy*dy<=rr){ return(1); }
        // bottom-right
        dx=x-imageRight;
        dy=y-imageBottom;
        if(dx*dx+dy*dy<=rr){ return(2); }
        // bottom-left
        dx=x-imageX;
        dy=y-imageBottom;
        if(dx*dx+dy*dy<=rr){ return(3); }
        return(-1);

    }


    function hitImage(x,y){
        return(x>imageX && x<imageX+imageWidth && y>imageY && y<imageY+imageHeight);
    }


    function handleMouseDown(e){
      startX=parseInt(e.clientX-offsetX);
      startY=parseInt(e.clientY-offsetY);
      draggingResizer=anchorHitTest(startX,startY);
      draggingImage= draggingResizer<0 && hitImage(startX,startY);
    }

    function handleMouseUp(e){
      draggingResizer=-1;
      draggingImage=false;
      draw(true,false);
    }

    function handleMouseOut(e){
      handleMouseUp(e);
    }

    function handleMouseMove(e){

      if(draggingResizer>-1){

          mouseX=parseInt(e.clientX-offsetX);
          mouseY=parseInt(e.clientY-offsetY);

          // resize the image
          switch(draggingResizer){
              case 0: //top-left
                  imageX=mouseX;
                  imageWidth=imageRight-mouseX;
                  imageY=mouseY;
                  imageHeight=imageBottom-mouseY;
                  break;
              case 1: //top-right
                  imageY=mouseY;
                  imageWidth=mouseX-imageX;
                  imageHeight=imageBottom-mouseY;
                  break;
              case 2: //bottom-right
                  imageWidth=mouseX-imageX;
                  imageHeight=mouseY-imageY;
                  break;
              case 3: //bottom-left
                  imageX=mouseX;
                  imageWidth=imageRight-mouseX;
                  imageHeight=mouseY-imageY;
                  break;
          }

          // enforce minimum dimensions of 25x25
          if(imageWidth<25){imageWidth=25;}
          if(imageHeight<25){imageHeight=25;}

          // set the image right and bottom
          imageRight=imageX+imageWidth;
          imageBottom=imageY+imageHeight;

          // redraw the image with resizing anchors
          draw(true,true);

      }else if(draggingImage){

          imageClick=false;

          mouseX=parseInt(e.clientX-offsetX);
          mouseY=parseInt(e.clientY-offsetY);

          // move the image by the amount of the latest drag
          var dx=mouseX-startX;
          var dy=mouseY-startY;
          imageX+=dx;
          imageY+=dy;
          imageRight+=dx;
          imageBottom+=dy;
          // reset the startXY for next time
          startX=mouseX;
          startY=mouseY;

          // redraw the image with border
          draw(false,true);

      }


    }


    $("#canvas").mousedown(function(e){handleMouseDown(e);});
    $("#canvas").mousemove(function(e){handleMouseMove(e);});
    $("#canvas").mouseup(function(e){handleMouseUp(e);});
    $("#canvas").mouseout(function(e){handleMouseOut(e);});


}); // end $(function(){});
</script>

</head>

<body>
    <p>Resize the image using the 4 draggable corner anchors</p>
    <p>You can also drag the image</p>
    <canvas id="canvas" width=350 height=350></canvas>
</body>
</html>

 

 

Alex Dem

Hi,
try to use touch events instead of mouse events:
https://developer.tizen.org/development/guides/web-application/w3chtml5supplementary-features/device/touch-events-version-1-0
https://developer.tizen.org/development/tutorials/web-application/w3chtml5supplementary-features/device/touch-events-version-1/task-touch-paint-mobile-applications-0

    canvas.addEventListener("touchstart", handleMouseDown, false);
    canvas.addEventListener("touchmove", handleMouseMove, false);
    canvas.addEventListener("touchend", handleMouseUp, false);

and replace everywhere 
e.clientX with e.changedTouches[0].pageX
e.clientY with e.changedTouches[0].pageY
after this 'drag' began work at once.

also with these changes after anchorHitTest() call draggingResizer is always -1 but you could debug it yourself.

Alexey.

Seoghyun Kang

Hello,

 

As you know, there is no mouse in the Tizen Device. :)

That's why we cannot use the mouse event.

 

So we need to use the touch event.

 

 

Palitsyna

Hello,

here you can find the Touch Events tutorial with examples:

https://developer.tizen.org/development/tutorials/web-application/w3chtml5supplementary-features/device/touch-events-version-1-0

And just FYI, if you need to handle Grag and Drop Events, maybe you can find this tutorial helpful:

https://developer.tizen.org/development/tutorials/web-application/w3chtml5supplementary-features/ui/html5-drag-and-drop-0?langredirect=1

Hope, this will help you.

Vikram

In this case, I think using touch event is better and adaptive. For mousedown() is JQuery event. It defined when the mouse pointer to the element and press the mouse button, the mousedown event will happen.

AVSukhov

Hello,

May be this third-party library helps you:

http://bl.ocks.org/mbostock/3681006