我们可以用它的背景图像放大div [英] Can we zoom in div with it's background image

问题描述

我有一个使用HTML5和画布制作的绘图工具。最初我使用普通图像文件作为画布的背景，所以我可以编辑这些图像，现在我有要求我必须使用SVG文件作为背景。

（请参考下面的代码）'panelDrawing'是我的父容器，我将背景图像分配给'divContainer'并在其上面放一个画布层以帮助绘图。

 <   div     id   =  panelDrawing    runat   =  server    style   =  width：1000px; heigh t：600px >  
 <   div     id   =   divContainer    runat  < span class =code-keyword> =  server    style   = 溢出：可见; background-repeat：no-repeat >  
 <   canvas     id   =  drawCanvas    width   =  1000px   < span class =code-attribute> height   =  600px >  
 <   b  >  *您的浏览器不支持画布。请切换到其他浏览器。<   / b  >  
 <   / canvas  >  
 <   / div  > ;  
 <   / div  >  
 

由于我使用的SVG文件实际上是绘图图像，我必须添加放大功能以帮助查看详细区域然后使用它。

 $（' ＃ divContainer'）。css（'  zoom'，  200％）; 
 

我使用上面的jquery放大div，我发现在缩放div后，背景图像会变焦，但是在某个宽度和高度后它会被切断。是有可能完全放大的股利与它的背景图片也会放大呢？我已经试过很多事情要调整背景图像，但没有运气。

解决方案

（ ' ＃divContainer'）。css（'' zoom'， 200％ ）;

我使用上面的jquery放大div，我发现在缩放div后，背景图像会变焦，但是在某个宽度和高度后它会被切断是否有可能完全缩放div的背景图像也会缩放？我已经尝试了很多东西来调整背景图像但没有运气。

我通过添加缩放图像单独的图像控制，而不是将图像指定为div背景，但问题尚未解决。放大后的形状没有在适当的位置绘制。如何在放大后管理相对于画布的X，Y位置？

获取X，Y位置的当前方法

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

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.

<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.

$('#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.

解决方案

('#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.

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

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

这篇关于我们可以用它的背景图像放大div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！