精华内容
下载资源
问答
  • let cv=document.querySelector('.cv'),ctx=cv.getContext('2d'),sv= 0,//缩放的增加值speed= 0.01,//缩放增加速度/** @param Number sx 物体开始绘制的x点* @param Number sy 物体开始绘制的y点* @param Number ...

    let cv=document.querySelector('.cv'),

    ctx=cv.getContext('2d'),

    sv= 0,//缩放的增加值

    speed= 0.01,//缩放增加速度

    /** @param Number sx 物体开始绘制的x点

    * @param Number sy 物体开始绘制的y点

    * @param Number width 物体开始绘制的宽

    * @param Number height 物体开始绘制的高*/getCenter=(sx, sy, width, height)=>{//返回物体的中心点

    return{

    x: sx+(width/ 2),

    y: sy+(height/ 2)

    };

    },/** 绘制图形*/draw=()=>{

    let arc_x= 150,//圆心x轴

    arc_y= 150,//圆心y轴

    arc_r= 20,//圆半径

    rect_x= 300,//矩形x轴

    rect_y= 100,//矩形y轴

    rect_width= 50,//矩形的宽

    rect_height= 50,//矩形的高

    line_sx= 500,//直线起点x轴

    line_sy= 100,//直线起点y轴

    line_ex= 600,//直线终点x轴

    line_ey= 210,//直线终点y轴

    s={//缩放值

    x:1 +sv,

    y:1 +sv

    },

    arc_center=getCenter(arc_x-arc_r, arc_y-arc_r,2 *arc_r,2 *arc_r),//圆心

    rect_center=getCenter(rect_x, rect_y, rect_width, rect_height),//矩形中心

    line_center=getCenter(line_sx, line_sy, line_ex-line_sx, line_ey-line_sy);//直线中心

    ctx.clearRect(0,0, cv.width, cv.height);//绘制圆

    ctx.save();//保存状态,以免影响其它物体

    ctx.scale(s.x, s.y);//执行缩放

    ctx.translate(-(arc_center.x*(s.x- 1))/s.x,-(arc_center.y*(s.y- 1))/s.y);//缩放后的差偏移回来

    ctx.beginPath();//开启路径

    ctx.arc(arc_x, arc_y, arc_r,0,2 *Math.PI);//绘制圆

    ctx.closePath();//关闭路径

    ctx.stroke();//描边绘制

    ctx.restore();//恢复状态

    //绘制矩形

    ctx.save();

    ctx.scale(s.x, s.y);

    ctx.translate(-(rect_center.x*(s.x- 1))/s.x,-(rect_center.y*(s.y- 1))/s.y);

    ctx.beginPath();

    ctx.strokeRect(rect_x, rect_y, rect_width, rect_height);

    ctx.closePath();

    ctx.restore();//绘制直线

    ctx.save();

    ctx.scale(s.x, s.y);

    ctx.translate(-(line_center.x*(s.x- 1))/s.x,-(line_center.y*(s.y- 1))/s.y);

    ctx.beginPath();

    ctx.moveTo(line_sx, line_sy);

    ctx.lineTo(line_ex, line_ey);

    ctx.closePath();

    ctx.stroke();//绘制线的外框,以便明显线的缩放

    ctx.beginPath();

    ctx.strokeStyle= '#bbb';

    ctx.strokeRect(line_sx, line_sy, line_ex-line_sx, line_ey-line_sy);

    ctx.closePath();

    ctx.restore();

    sv+=speed;if(sv<= 2) {

    requestAnimationFrame(draw);

    }

    };//画布大小

    cv.width= 800;

    cv.height= 500;

    window.requestAnimationFrame=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame|| function(callback) {

    callback&&setTimeout(callback,1000 / 60);

    };

    draw();//开始绘制缩放

    展开全文
  • 原理 使用的绘制方法 void ctx.drawImage(image, dx, dy, dWidth, dHeight);... 如果不说明, 在绘制时image宽度不会缩放。 dHeight(可选) image在目标canvas上绘制的高度。 允许对绘制的image进行缩放。 如

    原理

    使用的绘制方法

    void ctx.drawImage(image, dx, dy, dWidth, dHeight);
    

    参数说明:

    dx
    image的左上角在目标canvas上 X 轴坐标。
    dy
    image的左上角在目标canvas上 Y 轴坐标。
    dWidth(可选)
    image在目标canvas上绘制的宽度。 允许对绘制的image进行缩放。 如果不说明, 在绘制时image宽度不会缩放。
    dHeight(可选)
    image在目标canvas上绘制的高度。 允许对绘制的image进行缩放。 如果不说明, 在绘制时image高度不会缩放。
    原理图
    其中可视窗口就是canvas元素的实际大小, 超出的部分不可见. 以canvas的左上角建立坐标系.

    实际上的目标就是将缩放图上的先前的鼠标点, 移动到鼠标位置, 也就是求上图的dxdy

    最后得到公式:
    d x = ( 1 − s s ′ ) ( x o − x l ) d y = ( 1 − s s ′ ) ( y o − y l ) \begin{aligned} dx = (1-\frac{s}{s'})(x_o-x_l)\\ dy = (1-\frac{s}{s'})(y_o-y_l) \end{aligned} dx=(1ss)(xoxl)dy=(1ss)(yoyl)
    s s s代表本次缩放比例, s ′ s' s 代表上次缩放比例, ( x o , y o ) (x_o,y_o) (xo,yo)代表鼠标在可视窗口的位置, ( x l , y l ) (x_l,y_l) (xl,yl) 代表图片相对可视窗口左上角的偏移量

    代码

    scaleEvent(e) {
    	// 获得滚轮偏移
    	let v = e.deltaY
    	// 储存先前缩放量
    	let s1 = this.scale
    	this.scale += v
    	this.scale = this.scale < 100 ? 100 : this.scale
    	// 本次缩放量
    	let s = this.scale
    	// 图片在缩放后移动量
    	let dx = (1-s/s1)*(e.offsetX-this.x)
    	let dy = (1-s/s1)*(e.offsetY-this.y)
    	// 得到缩放后图片偏移点
    	this.x += dx
    	this.y += dy
    }
    
    
    展开全文
  • 需要实现如题的一个功能,通俗的说就是鼠标滚轮缩放图片,而且是以鼠标在图片上的位置 进行缩放,焦点固定在鼠标尖的功能。 效果 先看看效果: 思路 这个使用UGUI的思路就是在鼠标滚轮滚动的时候,根据鼠标位置计算...

    前言

    需要实现如题的一个功能,通俗的说就是鼠标滚轮缩放图片,而且是以鼠标在图片上的位置
    进行缩放,焦点固定在鼠标尖的功能。

    效果

    先看看效果:

    在这里插入图片描述

    思路

    这个使用UGUI的思路就是在鼠标滚轮滚动的时候,根据鼠标位置计算图片的轴心点和对应于轴心点保持图片不移动的位置信息,让后将这些数值动态的赋值给图片,最后根据滚轮前后赋值缩放值。

    实现

    搭建UI

    这里以一张地图截图为例,针对不同的位置进行缩放,方便查看。并使用了scroll view 进行了裁剪。
    在这里插入图片描述

    编码

    滚动事件

    鼠标的滚动事件主要通过OnScroll(PointerEventData eventData)实现,滚轮后触发缩放操作。

    //滚轮事件
    public void OnScroll(PointerEventData eventData)
    {
        ZoomImgByMousePos();
    }
    

    计算位置偏移

    计算鼠标位置与对象位置偏移值

    float OffsetX = Input.mousePosition.x - ZoomObj.position.x;
    float OffsetY = Input.mousePosition.y - ZoomObj.position.y;
    

    计算轴心点(pivot)

    根据偏移、边长和缩放计算轴心点

    float PivotX = OffsetX / RectTran.rect.width / ZoomObj.localScale.x;
    float PivotY = OffsetY / RectTran.rect.height / ZoomObj.localScale.y;
    

    赋值

    设置轴心和位置

    RectTran.pivot += new Vector2(PivotX, PivotY);
    ZoomObj.position += new Vector3(OffsetX, OffsetY, 0);
    

    缩放实现

    根据滚轮缩放,同时进行缩放范围限制

    if (Input.GetAxis("Mouse ScrollWheel") > 0)
        ZoomObj.localScale += (ZoomObj.localScale.x >= MaxScale ? Vector3.zero : Vector3.one * 0.1f);
    else if (Input.GetAxis("Mouse ScrollWheel") < 0)
        ZoomObj.localScale += (ZoomObj.localScale.x < MinScale ? Vector3.zero : Vector3.one * -0.1f); 
    

    项目源码

    https://download.csdn.net/download/qq_33789001/19517049

    展开全文
  • 1重写 QAbstractScrollArea 类的wheelEvent函数,让它什么都不要做 void QAbstractScrollArea::wheelEvent(QWheelEvent *event) { return; } 2 实现QScrollArea里面的Qlabel放大缩小 void OpenAndSplicingWindow::...

    1重写 QAbstractScrollArea 类的wheelEvent函数,让它什么都不要做

    void QAbstractScrollArea::wheelEvent(QWheelEvent *event)
    {
    	return;
    }
    

    2 实现QScrollArea里面的Qlabel放大缩小

    void OpenAndSplicingWindow::wheelEvent(QWheelEvent *event)
    {
    	ui->label->setMinimumSize(0, 0);
    	ui->label->setMaximumSize(2048, 2048);
    	QRect tmp = ui->label->geometry();
    
    	int adjustSize = 20;//改变的尺寸
    
    	//如果滚轮向上滑动,且鼠标位置在scrollArea里面
    	if (event->delta() > 0 && tmp.contains(event->pos()))
    	{
    		tmp.setWidth(tmp.width() + adjustSize);
    		tmp.setHeight(tmp.height() + adjustSize);
    		ui->lb_Screen->setFixedSize(tmp.width(), tmp.height());
    	}
    	if (event->delta() < 0 && tmp.contains(event->pos()))
    	{
    		tmp.setWidth(tmp.width() - adjustSize);
    		tmp.setHeight(tmp.height() - adjustSize);
    		ui->lb_Screen->setFixedSize(tmp.width(), tmp.height());
    	}
    
    	//重新定位滚动条为鼠标位置
    	QScrollBar *tmph = ui->scrollArea->horizontalScrollBar();
    	QScrollBar *tmpv = ui->scrollArea->verticalScrollBar();
    	QPoint pos = event->pos();
    	tmph->setValue(pos.x());
    	tmpv->setValue(pos.y());
    }
    
    展开全文
  • 所以我想知道如何计算从中心缩放的元素的转换CSS属性值(css:transform-origin:50%50%0).HTML:CSS:#holder {position: absolute;width: 500px;height: 500px;background: #226699;}#dot {position: absolute;...
  • 我有一个ImageView,我做一个简单的缩放动画。非常标准的代码。我的scale_up.xml:android:fromYScale="1"android:toXScale="1.2"android:toYScale="1.2"android:duration="175"/>我的动画代码:Animation a = ...
  • 相对于中心点的Android图像缩放动画我有一个ImageView,我做了一个简单的比例动画。 非常标准的代码。我的scale_up.xml:android:fromYScale="1"android:toXScale="1.2"android:toYScale="1.2"android:duration="175...
  • 我正在尝试使用AffineTransform从其中心缩放矩形.我确信解决方案很明显,但我不能让它工作!这是我到目前为止测试的…import java.awt.Color;import java.awt.Dimension;import java.awt.Graphics;import java.awt....
  • 对小正方形进行2倍的放大,他的坐标也会被移动,怎样让它以本身的中心放大呢?向下面这样<!DOCTYPE html><head><meta charset="UTF-8"><title>Title</title></head><body>...
  • 模板代码 <!DOCTYPE html> <... ...meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover" />...公众号:懂点君 || 视频号
  • cesium 缩放中心点控制

    2021-01-14 10:16:41
    cesium 缩放时,默认以光标所在位置为中心进行缩放。如果是想以地图中心点(或者定位的点)为进行缩放,就会有点麻烦,需要把光标放在地图中心位置。下面是一段更改缩放中心点的代码,让地图沿着当前地图中心点进行...
  • } ENDCG } } } 技术难点在于如何让UV至于中心点并且可以旋转,缩放. 需要先把 uv -= float2(0.5,0.5); UV的中心点移动到中间 然后在此基础上做旋转,缩放等操作后再把 uv += float2(0.5,0.5); 表面看...
  • 关于 Svg 使用 transform:scale()缩放后元素发生位移的问题,修改元素缩放中心点 接到一个需求,是公司前辈用 svg 写的代码结构,现在要让画布上的元素在发生改变,放大缩小的时候,保持画布不动,让元素实现原地...
  • 可视化元素,UIElement。 可以实现变换,通过设置其两个属性来实现,可以设置的属性...RotateTransform:能够让某对象产生旋转变化,根据中心点进行顺时针旋转或逆时针旋转。 ScaleTransform:能够让某对象产生缩放
  • 通常在编写HTML5移动...width =设备宽度,初始比例= 1.0: 表示显示窗口的宽度等于设备的屏幕宽度,初始比例= 1.0,即初始缩放比例为1.0; <minimum-scale(最小规模): 表示允许缩放的最小规模maximum: 表示允许...
  • 缩放变换scale(sx,sy)传入两个参数,分别是水平方向和垂直方向上对象的缩放倍数。例如context.scale(2,2)就是对图像放大两倍。其实,看上去简单,实际用起来还是有一些问题的。我们来看一段代码:JavaScript Code...
  • Qwt Plot Magnifier 缩放以鼠标为中心问题功能预览更改 问题 使用QwtPlotMagnifier时,用滚轮缩放时,缩放中心是QwtPlot的中间。 现需要改成在鼠标中间进行缩放 功能预览 更改 创建MyPlotMagnifier,并继承...
  • 在对图片进行缩放的时候,注意缩放的应该是Item,是图元,而不是Scene或者View。 所以当为了满足以鼠标为中心放大,而需要进行平移时,移动的是图元,图元才是可移动的。同时需要注意moveBy函数的含义,它移动的...
  • 下面我们从3个方面开始介绍:1、scale(x,y) 对元素进行缩放X表示水平方向缩放的倍数 | Y表示垂直方向的缩放倍数Y是一个可选参数,...默认值是1,基点一样在元素的中心位置。可以通过transform-origin来改变基点tr...
  • 以鼠标位置为中心点定点缩放 原理说明 实现在光标位置缩放画布的效果可以理解为,光标所对应到画布上的坐标点在缩放之前和之后都继续对应在光标所在的位置。而一般缩放画布,画布会以画布的左上角为固定点缩放。 ...
  • 我想通过旋转它的中心来动画...动画和旋转关于中心的可缩放SVG对象这里是我的SVG:spinning orange circle.path {stroke-dasharray: 187;stroke-dashoffset: 0;stroke: #ed770b;transform-origin: 50% 50%;animation...
  • konva缩放

    2021-10-30 20:32:19
    this.stage.on('wheel', (e) => { const direction = e.evt.deltaY > 0 ? -0.1 : 0.1; this.scale = this.scale + direction; if (this.scale < 0.1) { this.scale = 0.1; return;... ...
  • zoom版本:CSS3zoom CSS 属性会根据@viewport 来初始化一个缩放因数。当设置1.0 或 100%时表示不缩放。更大的值放大,更小的值缩小。示例/* Keyword value */zoom: auto;/* values */zoom: 0.8;zoom: 2.0;/* values ...
  • 有的时候我们需要做一个当鼠标放置在图片上的时候,希望图片逐渐变大,即图片的width和height逐渐变大,但是此时,其left值与top值没有改变,故看似不是从中心点进行缩放的。如下图:从中心点进行缩放实现代码如下:...
  • 开门见山:tileset.modelMatrix这个属性可以...平移思路获取当前瓦片数据集的包裹范围(boundingSphere)中心(此时参考系是世界坐标)计算当参考系是局部坐标时,此位置为原点的局部坐标系,到世界坐标的转换矩阵(eastN...
  • map:'' 加载图片this.map = 'http://cdn.jcitedu.com/ditu100.jpg' 触摸事件 startMap(e){ // 单手指缩放开始,不做任何处理 if (e.touches.length == 1) return; // 当两根手指放上去的时候,将距离...
  • 等比缩放布局(rem布局) 特点:页面里边的元素会根据分辨率等比例放大或缩小. rem是根元素(html)的font-size的倍数。 rem: 指相对于根元素的字体大小的单位。 根元素:会相对设备尺寸自动变换。 VW: 视窗宽度,...
  • 经过一番资料搜索,不光解决了这个问题还找到了对数缩放的方法,接下来就让我们一起看看吧~坐标轴最小和最大值为了在图表上显示特定区域,可以手动设置坐标轴的最小值和最大值。from openpyxl import Workbookfrom ...
  • 有的 AVG 项目可能需要玩家缩放图片的某一个点来仔细确认图片,比如碧蓝航线里面的放大看老婆的功能,又或者说如果直接在 Unity 的 Scene 编辑场景里面使用滚轮拉进拉远,可以看到 Unity 就是聚焦在你鼠标的位置在...
  • selector:要缩放的图片,bg:图片的背景容器 var touchScale = function(seletor, bg) { var startX, endX, scale, x1, x2, y1, y2, imgLeft, imgTop, imgWidth, imgHeight, one = false, $touch = $(seletor),...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 91,770
精华内容 36,708
关键字:

中心缩放