www.webdeveloper.com
Results 1 to 2 of 2

Thread: Background image for var

  1. #1
    Join Date
    May 2012
    Posts
    1

    Background image for var

    Hi,
    I got a issue and i can't figure it out.

    I'm trying to add a background image for the variable model, this the js code:
    Code:
    var model = {
        context: {},
        cnv: {},
        angle: 0,
        width: 100,
        bgColor: "#ff0000",
    };
    
    $(document).ready(function(){
        //start the menu
        $( '#canvas' ).css( "background-color", "#fffff" ).setUpCanvas();
    });
    
    jQuery.fn.setUpCanvas = function(){
        // setup canvas
        model.cnv = $( this )[0];
        model.context = model.cnv.getContext('2d');
    	model.img = img;
    
       
        var cX, cY;
        var mX, mY = 0;
        var offX, offY;
        
        //init canvas
        function updateRectangle(ang){
            model.context.clearRect(0, 0, 300, 300);
            model.cnv.width = model.cnv.width;
            
            offX = model.cnv.offsetLeft;
            offY = model.cnv.offsetTop;
            
            model.context.setTransform(1,0,0,1,0,0);
            var x = 100;
            var y = 100;
            var width = model.width;
            var height = 100;
            cX = x + width*0.5;
            cY = y + height*0.5;
            model.context.translate(x + .5*width, y + .5*height);
            model.context.rotate(ang);
            model.context.fillStyle = model.bgColor;
            model.context.fillRect(-0.5*width, -0.5*height, width, height);
        }
        updateRectangle(model.angle);// display the rectangle/square
        
        $( model.cnv ).mousedown(function(event){
            // calculate click angle minus the last angle
            var clickAngle = getAngle( cX + offX, cY + offY, event.clientX, event.clientY ) - model.angle;
            $( model.cnv ).bind("mousemove", clickAngle, function(event){
                // calculate move angle minus the angle onclick
                model.angle = ( getAngle( cX + offX, cY + offY, event.clientX, event.clientY ) - clickAngle);
                updateRectangle(model.angle);
            });
        });
       
       /**
    * Remove listener
    */
        $( model.cnv ).mouseup(function(){
            $( model.cnv ).unbind("mousemove" );
        });
        
        /**
    * switch button for demonstration
    */
        $('#switchButton').toggle(
           function(){
              $(this).text("change to square");
              model.width = 150;
              model.bgColor = "#0000ff";
              updateRectangle(model.angle);
           },
           function(){
               $(this).text("change to rectangle");
               model.width = 100;
               model.bgColor = "#ff0000";
               updateRectangle(model.angle);
           });
       
    };
    
    /**
    * angle helper function
    */
    function getAngle( cX, cY, mX, mY ){
        var angle = Math.atan2(mY - cY, mX - cX);
        return angle;
    }
    and this is the html code:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    
      <script type="text/javascript" src="jQuery-1.8.2-min.js"></script>
         <script type="text/javascript" src="script.js"></script>
         
    <title>Rotate Canvas</title>
    </head>
    
      
    <body style="padding: 0px; margin: 0px; font-family: sans-serif;">
    
    <canvas id="canvas" width="300" height="300" />
    
    <div class="picture">
        <img src="img.jpg" alt="foto1" />
    </div>
                
    </body>
    </html>
    So what i want is the following;
    A image needs to be rotated by dragging like it does right now with the red square, now you can add a bgColor to the model but i can't seem to figure out how to replace te color with an image.

    Could somebody help me with this?

  2. #2
    Join Date
    Aug 2008
    Location
    Sweden
    Posts
    227
    Code:
    model.img = img;
    One problem is that 'img' is undefined here. Something like this will get the <img src="img.jpg"> element you have:
    Code:
    model.img = $(".picture img").get(0);
    Then add this line in the updateRectangle() function to draw the image when dragging:
    Code:
    model.context.drawImage(model.img, 0, 0);

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles