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

"

"

X vBulletin 4.2.2 Debug Information

  • Page Generation 0.11253 seconds
  • Memory Usage 2,841KB
  • Queries Executed 15 (?)
More Information
Template Usage (33):
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_global_above_footer
  • (1)ad_global_below_navbar
  • (1)ad_global_header1
  • (1)ad_global_header2
  • (1)ad_navbar_below
  • (1)ad_showthread_firstpost_sig
  • (1)ad_showthread_firstpost_start
  • (1)ad_thread_first_post_content
  • (1)ad_thread_last_post_content
  • (5)bbcode_code
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)headinclude_bottom
  • (2)memberaction_dropdown
  • (1)navbar
  • (4)navbar_link
  • (1)navbar_moderation
  • (1)navbar_noticebit
  • (1)navbar_tabs
  • (2)option
  • (2)postbit
  • (2)postbit_onlinestatus
  • (2)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available (6):
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files (26):
  • ./showthread.php
  • ./global.php
  • ./includes/class_bootstrap.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/functions_navigation.php
  • ./includes/class_friendly_url.php
  • ./includes/class_hook.php
  • ./includes/class_bootstrap_framework.php
  • ./vb/vb.php
  • ./vb/phrase.php
  • ./includes/functions_facebook.php
  • ./includes/functions_calendar.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_notice.php
  • ./packages/vbattach/attach.php
  • ./vb/types.php
  • ./vb/cache.php
  • ./vb/cache/db.php
  • ./vb/cache/observer/db.php
  • ./vb/cache/observer.php 

Hooks Called (72):
  • init_startup
  • friendlyurl_resolve_class
  • init_startup_session_setup_start
  • database_pre_fetch_array
  • database_post_fetch_array
  • init_startup_session_setup_complete
  • global_bootstrap_init_start
  • global_bootstrap_init_complete
  • cache_permissions
  • fetch_postinfo_query
  • fetch_postinfo
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • load_show_variables
  • load_forum_show_variables
  • global_state_check
  • global_bootstrap_complete
  • global_start
  • style_fetch
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • strip_bbcode
  • friendlyurl_clean_fragment
  • friendlyurl_geturl
  • forumjump
  • cache_templates
  • cache_templates_process
  • template_register_var
  • template_render_output
  • fetch_template_start
  • fetch_template_complete
  • parse_templates
  • fetch_musername
  • notices_check_start
  • notices_noticebit
  • process_templates_complete
  • friendlyurl_redirect_canonical
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • memberaction_dropdown
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • build_navigation_data
  • build_navigation_array
  • check_navigation_permission
  • process_navigation_links_start
  • process_navigation_links_complete
  • set_navigation_menu_element
  • build_navigation_menudata
  • build_navigation_listdata
  • build_navigation_list
  • set_navigation_tab_main
  • set_navigation_tab_fallback
  • navigation_tab_complete
  • fb_like_button
  • showthread_complete
  • page_templates