图片使用transform的scale放大缩小图片，怎么获取到原始的坐标点

最开始在图片上画了一个点，点的相对位置是相对于图片定位的。

使用css3的transform的scale属性，使图片放大后，再次在相同的位置上画点，此时，点的位置会偏移，我调试了一下，发现，放大后，点的相对位置的left和top值，和没有放大的时候的值是一样的，这样的话，我怎么能在图片放大后，获取到图片没有放大的时候的left和top值，并把他们赋值给现在放大之后的点的相对位置的值？

写回答
赞踩
关注问题
收藏
分享
邀请回答

2条回答默认最新

私信

码龄粉丝数影响力 0

被采纳

被点赞

采纳率
Rattenking 2017-09-13 09:06

已采纳专家已采纳

1,放大的方向，假如你是以图片的几何中心点为基准放大
首先你要对定位的点进行判断，在图片基准点的四个象限哪一个象限，这样你放大图片的时候，
然后找到放大倍数，求出top和left要改变的大小
最后根据象限判断top和left改变值的符号（-，+），再将原来的值和改变的大小相加

还有就是在图片的四个角为基准点放大缩小，这个就好判断的多。

已采纳该答案

赞踩打赏评论
分享

评论

评论

登录后可回复...
私信

码龄粉丝数影响力 0

被采纳

被点赞

采纳率
hmszhmsz 2017-09-13 09:43

已采纳专家已采纳

你是想让画的点跟着图片动吧？原来的坐标x，y乘以scale的倍数

赞踩打赏评论
分享

评论

评论

登录后可回复...

报告相同问题？

提交关注问题

相关推荐更多相似问题

图片使用transform的scale放大缩小图片，怎么获取到原始的坐标点 javascript
2017-09-13 04:53

回答 2 已采纳 1,放大的方向，假如你是以图片的几何中心点为基准放大首先你要对定位的点进行判断，在图片基准点的四个象限哪一个象限，这样你放大图片的时候，然后找到放大倍数，求出top和left要改变的大小最
怎么做transform图片放大效果 html5 有问必答
2021-06-19 14:59

回答 3 已采纳给页面加上一段CSS即可，可以不需要JS，让鼠标经过图片整体放大， translateZ 表示正向放大 scale(1.5) 表示放大倍数：如有帮助请在回答上点个【采纳】 <s
js 实现图片的旋转结合css3的属性transform css3 javascript
2016-04-22 06:33

回答 2 已采纳 [jquery.rotate.js](http://www.w3dev.cn/article/20150311/jquery.rotate.js.aspx "")
transform: scale() 图片文字模糊的原因
2017-12-25 17:02

神神的蜗牛的博客今天做一个刮刮乐H5应用的时候，用到了个简单的 CSS 动画效果，就是使用缩放transform: scale(.1) 从小变大弹出获奖窗口，以及按钮重复变大变小的动画，结果遇到个很郁闷的问题，按钮和文字变得非常模糊，完全没法看...
html 图片使用scale,使用CSS3 transform scale（）缩放/缩放DOM元素及其占用的空间
2021-06-13 15:56

真力 GENELEC的博客然后，您可以使用min-width和max-width控制所需的宽度，在本例中，使其始终缩放到父元素的全宽，即使它将缩放到其自然宽度之外。 (您也可以使用max-width和max-height 100%来防止图像超出父元素的边框，但绝不能缩放...
html 图片使用scale,css3 scale 缩放图片问题
2021-06-13 15:57

上校狙击手的博客方法一：jsDocumentdiv {width:0;height:0;position: absolute;...transform: translate(-50%, -50%);transform-origin: 50% 50%;background:url(http://www.ppt123.net/beijing/UploadFiles_8374/20120...
关于css3 transform scale3d的问题
2016-06-16 09:14

回答 2 已采纳感觉这个问题要误解了。。。。。。。。。。。。。。。。。。。。
svg中image如何获取图片本身的长宽 javascript
2016-11-15 02:32

回答 2 已采纳用Image对象加载图片，onload中获取width/height来设置svg中img标签的width/height，要不定死了获取不到 ``` var i=new Image() i.
小程序滑动scale实时缩放效果 javascript 小程序微信小程序
2021-02-04 17:34

回答 1 已采纳给你写个例子。参考下 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /&g
css3的transform中scale缩放详解
2020-09-25 01:34

主要介绍了css3的transform中scale缩放的使用方法,需要的朋友可以参考下
手势放大、缩小和移动图片
2018-11-23 11:18

CN-cheng的博客我写博客一般都是把在项目中遇到的一些问题记录下来，可以在以后遇到类似问题或者有新的思路时来回顾。前两天就遇到一个需求：在手机端，把html页面的图片内容放大和缩小、移动...功能：双击图片放大，单点触摸...
Css的transform按钮放大图片,CSS3 transition transform属性及实例详解-鼠标放到图片上图片等比例放大...
2021-08-04 06:25

卖星巴克杯子的人的博客 ease-in：缓慢开始(加速) ease-out：缓慢结束(减速) ease-in-out：缓慢开始，缓慢结束(先加速后减速) transition-delay：指定过渡效果何时开始 CSS3 transition transform实例-鼠标放到图片上图片等比例放大 Html...
Unity3d 中如何获取任意UI组件Rect的左下角与右上角在屏幕的坐标
2018-07-12 06:31

回答 2 已采纳 1.先取得该rect对应的UICamera， 2.然后使用算出rect的左下角的本地坐标（这个本地是指以rect的质心即pivot做标准）：根据该rect的pivot和尺寸确定本地坐标loc
PDFRender将PDF文件转为图片出现空白页 intellij-idea java maven
2020-07-25 16:27

回答 2 已采纳试一试用Free Spire.PDF for Java来转换PDF到图片呢，[参考文章](https://blog.csdn.net/Eiceblue/article/details/82151396
求助：python爬取图片，怎么取出标签里的src内容？ python
2020-09-01 20:40

回答 6 已采纳源码中有包含所有图片url的json对象 ![图片说明](https://img-ask.csdn.net/upload/202009/03/1599063207_992984.jpg) 因此可以
css scale 元素不放大,CSS3 transform scale缩放问题
2021-08-03 21:13

weixin_39825322的博客 } @keyframes rubberBand { from { transform: scale3d(1, 1, 1); } 30% { transform: scale3d(1.25, 0.75, 1); } 40% { transform: scale3d(0.75, 1.25, 1); } 50% { transform: scale3d(1.15, 0.85, 1); } 65% { ...
transform:scale不缩小实际空间的问题
2019-11-19 15:09

颖_恋的博客 transform: scale是现代浏览器都支持的css元素，应该是首选，但它会引发一个问题，虽然可以缩小整体显示的内容，但是并没有引起重排，所以占据的实际空间没有缩小，具体看下面的代码以及图片。 <!DOCTYPE ...
html 图片使用scale,缩放：scale() - CSS3 | 绿叶学习网
2021-06-13 15:55

愿水长流的博客在CSS3中，我们可以使用transform属性的scale()方法来实现元素的缩放效果。缩放，指的是“缩小”和“放大”的意思。语法：transform: scaleX(x); /*沿X轴方向缩放*/transform: scaleY(y); /*沿Y轴方向缩放*/...
JS中的图片旋转函数 javascript
2021-04-17 16:39

回答 1 已采纳 var _left = document.querySelector("._left")//获取页面上的左的dom元素 var _right = document.querySelector("._
transform:scale()可以实现按比例放大或者缩小功能
2021-08-31 10:28

m0_49471668的博客
没有解决我的问题, 去提问

unaJ

图片使用transform的scale放大缩小图片，怎么获取到原始的坐标点

2条回答 默认 最新

相关推荐 更多相似问题

2条回答默认最新

相关推荐更多相似问题