用uniapp写的H5网页中svg的缩放和拖动

最新推荐文章于 2024-04-27 00:00:00 发布
最新推荐文章于 2024-04-27 00:00:00 发布
阅读量813 收藏 2
点赞数
文章标签： uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_69692573/article/details/129860337
版权

全部代码在下面

先给svg加一个id=“svg” 加两个事件@touchmove="move" @touchend="end" 

再添加viewBox="0,0,800,600"（这个根据业务自己调）

和双向绑定的width ，height

width和height的初始值 通过onLoad获取

 

 1先实现svg的缩放

这里使用的到的原理就是通过两个手指张开或缩小的距离等比缩放svg的宽高

在move事件中拿到参数event 通过event.touches.length === 2判断有两个触点

 

 然后获取两个触点的坐标，并计算出两个坐标x，y的差值，最后利用差值求出手指滑动的长度scale

最低0.47元/天 解锁文章
qq_69692573
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
VUE2 - 移动端（h5）的SVG 缩放拖拽（ 一 ）
C_jian_的博客
03-18 1859
vue - 移动端 - H5 ，内的SVG 缩放 拖拽
svg图的操作和拖动
......
07-07 1325
SVG 有如下特点：SVG 绘制的是矢量图，因此对图像进行放大不会失真。基于 XML，可以为每个元素添加 JavaScript 事件处理器。每个图形均视为对象，更改对象的属性，图形也会改变。**SVG 画布的预定义元素里，有六种基本图形跟一种比较特殊，也是功能最强的元素：六种基本图形：矩形。
uni-app 如何使用svg
最新发布
BradenHan的专栏
04-27 3770
在uni-app中使用SVG（Scalable Vector Graphics）可以采用多种方式，以下是几种常见的方法和步骤，包括直接引用、转换为base64编码、作为组件使用等。下面分别举例说明：虽然uni-app本身可能不直接支持标签，但可以通过以下方式间接使用：a. 作为Image组件的源将SVG文件作为静态资源放入项目中，然后通过组件的属性引用。这种方法适用于静态SVG图像。示例： 确保SVG文件（例如）已放置在项目的目录下。b. 作为Background Image如果需要将SVG作为背景图，可以
SVG学习之拖拽
jwl_yifeng的专栏
07-17 4102
SVG要实现拖拽功能，主要依靠的是鼠标的mousedown、mouseup和mousemove事件，mousedown按下的时候判断是否选取到SVG元素，并定义变量保存该元素，以备之后用到；mouseup主要是拖拽完之后对事件的处理，例如，我想拖拽完之后将坐标保存到数据库，或是拖拽完之后弹出提示等；mousemove主要是改变选取元素的坐标；图像整体的放大缩小由滚轮操作，不用定义即可实现，
html5中针对svg两指缩放以及单指移动例子
09-06
在html5中针对svg文件实现在手机端进行两指缩放以及单指移动的实现。
svg图形拖动的例子/解决方法
TomHu的专栏
11-26 4950
怎样实现对svg的拖动的操作？svg图形拖动的例子~在鼠标事件里处理，在onmousedown开始处理，在onmousemove中改变目标坐标，在onmouseup结束处理"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-flat-20030114.dtd">   onload=Init(evt)   onmousedown=Grab(e
【项目技术点总结之一】vue集成d3.js利用svg加载图片实现缩放拖拽功能
大牛的博客
10-30 3577
【项目技术点总结之一】vue集成d3.js利用svg加载图片实现缩放拖拽功能前言概述效果演示新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 前言 概述 最近项目开发过程中，需要有一个图片预览的组件，支持图片放大、缩小、拖拽
基于h5+svg制作的自定义地图实现拖拽、缩放、鼠标覆盖等事件
04-02
在本文中，我们将深入探讨如何使用HTML5（H5）和SVG（Scalable Vector Graphics）技术来创建一个自定义地图，并实现拖拽、缩放和鼠标覆盖等交互功能。这对于网页开发人员，尤其是初学者来说，是一个非常有价值的实践...
HTML5基于SVG实现可拖拽和缩放的世界地图效果源码.zip
11-04
在这个“HTML5基于SVG实现可拖拽和缩放的世界地图效果源码”中，我们主要会探讨以下几个关键知识点： 1. SVG的基本概念与应用：SVG是一种XML标记语言，用于描述二维图形和图像。它可以精确地控制图形的每一个细节，...
h5手机端触摸裁剪图片相片cropper.js
12-03
2. **自由裁剪**：用户可以自由选择裁剪区域的大小和位置，支持拖动、缩放、旋转等多种操作。 3. **触摸支持**：对于触摸设备，cropper.js提供了流畅的触摸手势支持，如捏合缩放、滑动移动等。 4. **事件监听**：...
H291_HTML手机电脑网站_网页源码移动端前端_H5模板_自适应响应式源码.zip
08-02
6. **SVG**：Scalable Vector Graphics（可缩放矢量图形）是一种基于XML的图像格式，用于创建高质量的矢量图，可以在任何分辨率下清晰显示，且代码可编程。 7. **响应式设计**：随着移动设备的普及，HTML5的响应式...
html js控制svg图片的缩放拖动可运行精品实例
06-18
html 利用js 控制svg矢量图 ，实现无极缩放（放大缩小不失真） 自己组织的简单可学习实例 ,"暴雪出品，必属精品"
使用 svg 实现拖拽效果
12-11
在svg中实现组件拖动效果，完整的DEMO，可使用浏览器直接打开浏览
h5公司网页效果
10-11
4. **SVG图形**：对于需要高质量、可缩放的矢量图形，HTML5的<svg>元素非常适用。它可以用于展示公司的标志、建筑图纸或其他复杂设计，且在任何分辨率下都能保持清晰。 5. **Web存储**：HTML5的localStorage和...
uniapp笔记——App端web-view内嵌网页可以缩放
weixin_44792197的博客
04-28 2939
每个vue页面，其实都是一个webview，而vue页面里的web-view组件，其实是webview里的一个子webview。这个子webview被append到父webview上。我是利用窗口样式属性scalable为true重新设这个web-view组件的样式，来实现嵌入网页可以缩放。App端的webview是非常强大的，可以更灵活的控制和拥有更丰富的API。scalable: (Boolean 类型 )窗口是否可缩放。: 设置Webview窗口的样式。) 必选 要设置的窗口样式。
uniapp 实现拖拽功能
m0_48557659的博客
03-17 4742
客户要求；微信客服功能悬浮，并且可以在页面进行，拖拽移动
2024最新Web前端知识体系总结，分享一个自由拖拽组件的实现思路，终局之战
2301_76225520的博客
04-06 708
我们很快又发现一个问题，svg的缩放默认是等比的，也就是说当我们横向拉长图片的时候，它并不会变大，只会横向偏移居中。这个时候我们就要用到svg，用来表示是否强制进行统一缩放，当设置为none的时候，svg 图片不会进行强制统一缩放，如果需要，会缩放指定元素的图形内容，使元素的边界完全匹配视图矩形。如下图。其他类型强制缩放可参考 MDN。现在我们的svg终于可以自由缩放了，但是很快我们又发现，把一个svg放大之后，它的线条宽度也跟着变宽了，那么有没有什么属性来保持线条宽度不变呢？答案是有的，
移动端H5部分区域缩放并移动
wangweiruning的博客
06-23 4667
最近开发个项目，需要实现div内容的缩放（包含图片等内容），但不影响其他内容 开始没头绪，网上找了许多都是在index.html中实现，不满足我的需求在react里面实现 找了很久，总算发现一个写的不错的，能够满足在纯html中实现，也可以在react中实现的东西 我的react代码 import React from 'react' import {Link,withRou...
SVG.Js事件示例，简单绑定拖动操作
weixin_33725515的博客
08-09 2297
一、代码： var draw = SVG('container').size(300, 300); draw.style({ border: '1px solid red' }); var group = draw.group(); var rect = draw.rect(100, 60).fill('green'); rect.radius(50); group.add(rect)...
UNIAPP中使用SVG
06-07
在UNIAPP中使用SVG，可以通过以下步骤实现： 1. 安装SVG插件：在HBuilderX中，打开插件市场，搜索并安装SVG插件。 2. 导入SVG文件：将SVG文件复制到项目的static文件夹中。 3. 在页面中使用SVG：使用`<svg-icon>`标签来引入SVG文件，例如： ``` <svg-icon name="svg文件名" class="svg-class"></svg-icon> ``` 其中，`name`属性为SVG文件名（不需要后缀），`class`属性为自定义的SVG样式。 4. 在CSS中设置SVG样式：使用`.svg-class`样式来设置SVG的样式，例如： ``` .svg-class { width: 20px; height: 20px; fill: red; } ``` 其中，`width`和`height`属性为SVG的宽度和高度，`fill`属性为SVG的填充颜色。 以上就是在UNIAPP中使用SVG的方法，希望对您有所帮助。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值