Can we zoom in div with it's background image

Question

0.00/5 (No votes)

See more:

I have a drawing tool made using HTML5 and canvas .Initially i was using plain images file as background for canvas so i can edit those images, now i have the requirement where i have to use SVG files as background.
(Please refer below code)'panelDrawing' is my parent container,i am assigning a background image to 'divContainer' and putting a canvas layer over it to help drawing.

ASP.NET

<div id="panelDrawing" runat="server" style="width: 1000px; height: 600px">
    <div id="divContainer" runat="server" style="overflow: visible; background-repeat: no-repeat">
        <canvas id="drawCanvas" width="1000px" height="600px">
          <b> *Your browser doesn't support canvas. Please switch to different browser.</b>
        </canvas>
    </div>
      </div>

As i am using SVG files which are actually plot images i have to add zoom in feature to help view the detailed area and then draw on it.

JavaScript

$('#divContainer').css('zoom', "200%");

I am zooming in the div using above jquery, i found that after zooming the div the background image gets zoomed but it cuts off after certain width and height.Is it possible to zoom the div completely with it's background image also zoomed?I have tried lot of things to adjust the background-image but no luck.

Posted 3-Jul-14 23:45pm

Dexter11

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Dexter11 · Answer 1 · 2014-07-04T01:05:00

I have zoom the image by adding separate image control instead of assigning image as div background but the problem is not yet resolved.After zooming in shapes are not drawn in proper place.How to manage the X,Y position relative to canvas after zooming in?
Current method to get X,Y position

JavaScript

mouseDownX = ev.clientX;
mouseDownY = ev.clientY;