JS前端canvas交互实现拖拽旋转及缩放示例

目录
  • 正文
  • 拖拽
  • 旋转
  • 缩放
  • 小结

正文

到目前为止，我们已经能够对物体进行点选和框选的操作了，但是这还不够，因为并没有什么实际性的改变，并且画布看起来也有点呆板，所以这个章节的主要目的就是让画布中的物体活起来，其实就是增加一些常见的交互而已啦，比如拖拽、旋转和缩放。这是这个系列最重要的章节之一，希望能够对你有所帮助。

拖拽

先来说说拖拽平移的实现吧，因为它最为简单

赞 (0)

相关推荐

  • JS前端使用canvas动态绘制函数曲线示例详解

    JS前端使用canvas动态绘制函数曲线示例详解

    目录 前言 第一步:绘制坐标系 1.如何确定 x 轴和 y 轴的边界值 2.不是传入多少网格数就是多少网格 3.如何让坐标原点位于画布中心 4.刻度总是会有浮点数 第二步:画函数曲线 第三步:绘制辅助线和交点坐标 第四步:平移 第五步:缩放 第六步:动态绘制曲线 第七步:模糊到高清 前言 不说废话,我们直入主题.先来看看读了这篇文章你将得到什么,就是下面这个东西啦(是不是很清晰很顺滑): 那具体要做什么呢,我们来简单拆解一下步骤: 绘制坐标系 绘制多条函数曲线 绘制辅助线和坐标点 支持平移.缩放

  • JS前端使用canvas编写一个签名板

    JS前端使用canvas编写一个签名板

    目录 需求 方案分析canvas 涉及知识点 代码 以上代码,未开发的点 需求 需求是做不完了,福利也被砍了,旅游也泡汤了,手上有2个需求,还没做完,PM就来新需求了. 开发一个签名板:要求PC端/移动端都能用.扫码签名.实时同步.可以改变笔画粗细.笔画颜色.可以生成base64图片. 方案分析canvas 1.获取页面[canvas]元素,设置宽高(800*200) 2.通过**HTMLCanvasElement.getContext()**  方法返回[canvas] 的上下文ctx 3.初

  • vue下如何利用canvas实现在线图片标注

    目录 组件代码如下 在开发过程中遇到的问题 web端实现在线图片标注在此做下记录,功能类似微信截图时的标注,包含画线.框.箭头和文字输入,思路是利用canvas画布,先把要标注的图片使用drawImage方法画在画布上,然后定义画线.框.箭头和文字输入的方法调用 组件代码如下 <template>   <div class="draw">     <div class="drawTop" ref="drawTop"

  • JavaScript canvas复刻苹果发布会环形进度条

    JavaScript canvas复刻苹果发布会环形进度条

    目录 前言 基础 Dom 结构 基本变量 画圆 画弧线 让画面动起来 总结 前言 canvas 真是一个好东西,它给前端插上了想象的翅膀,伴随着 h5 而来,将 web 代入了新的领域,基于canvas 技术实现的各种酷炫效果和2d.3d 游戏,也让浏览器能承载更加强大的功能.尤其是它性能还很好,搞游戏再合适不过了,我就喜欢用 canvas 写一些小游戏玩. 在线地址 最近无意中看到前段时间写的这个小效果,觉得挺有意思的,就分享出来:这是苹果ios 12 发布会上库克 ppt 里展示的内容,一个

  • js+canvas实现可自动吸附闭合的鼠标绘制多边形

    js+canvas实现可自动吸附闭合的鼠标绘制多边形

    本文实例为大家分享了js+canvas实现鼠标绘制多边形的具体代码,可自动吸附闭合,供大家参考,具体内容如下 效果图: 完整代码:(记得引入jQuery) <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>canvas绘制多边形</title>     <script src=&quo

  • vue3如何将html元素变成canvas(海报生成),进行图片保存/截图

    目录 将html元素变成canvas(海报生成),进行图片保存/截图 使用html2canvas将页面转化为图片 将html元素变成canvas(海报生成),进行图片保存/截图 // 网页上只有一张图片 我们可以直接就进行图片保存 // 但是你想 保存这张图片的时候 顺便把下面的字也带上 相当于截图 那请你像我这样做 <div id="capture" style="padding: 10px; background: #fff"> <img :s

  • JS前端canvas交互实现拖拽旋转及缩放示例

    目录 正文 拖拽 旋转 缩放 小结 正文 到目前为止,我们已经能够对物体进行点选和框选的操作了,但是这还不够,因为并没有什么实际性的改变,并且画布看起来也有点呆板,所以这个章节的主要目的就是让画布中的物体活起来,其实就是增加一些常见的交互而已啦,比如拖拽.旋转和缩放.这是这个系列最重要的章节之一,希望能够对你有所帮助. 拖拽 先来说说拖拽平移的实现吧,因为它最为简单

  • Unity UI实现拖拽旋转

    Unity UI实现拖拽旋转

    本文实例为大家分享了Unity UI实现拖拽旋转的具体代码,供大家参考,具体内容如下 跟随鼠标旋转 第一种效果是跟随鼠标旋转,原理是计算下鼠标位置与拖拽物体的相对位移 旋转方向即可 注意转换对应空间坐标 新建脚本mono类继承 IBeginDragHandler, IDragHandler, IEndDragHandler 接口 [SerializeField] private Canvas m_Canvas; private Vector3? CalculateWorldToScreenPos

  • JS实现圆形进度条拖拽滑动

    JS实现圆形进度条拖拽滑动

    本文实例为大家分享了JS实现圆形进度条拖拽滑动的具体代码,供大家参考,具体内容如下 效果展示 半圆进度条效果 圆形进度条 代码实现 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1&q

  • Fabric.js 拖拽平移画布方法示例

    目录 正文 原理解析 按下鼠标时 移动鼠标时 松开鼠标时 代码仓库 正文 使用 fabric.js 创建出来的画布默认是不能拖拽移动的. 不过我们可以利用一些小技巧让画布具有被拖拽的能力,fabric.js 官网也提供了一个 demo ,但文档上并没有详细的讲解拖拽画布的实现原理. 本文就粗略分析一下这个原理. 原理解析 鼠标拖拽的原理其实很简单,主要就3步: 鼠标点击元素 移动鼠标 松开鼠标 在鼠标移动时,获取鼠标当前位置,然后修改被拖拽元素的位置. 当松开鼠标时,也要获取松手那刻鼠标所在位置

  • JS基于面向对象实现的拖拽功能示例

    本文实例讲述了JS基于面向对象实现的拖拽功能.分享给大家供大家参考,具体如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style> #div1 {width:100px; height:100px; background:red; position:absolute;} #div2 {width:100px; height:100px; background:yellow; posit

  • js实现图片放大和拖拽特效代码分享

    js实现图片放大和拖拽特效代码分享

    本文实例讲述了js实现图片放大和拖拽特效代码.分享给大家供大家参考.具体如下: js实现图片放大和拖拽特效是一款非常实用的js特效,实现了图片的放大和拖拽功能,没用用到jquery插件,是用原生javascript实现的,除了点击放大和缩小按钮来控制图片的放大缩小,还可以使用鼠标的滚轮控制图片的缩放. 运行效果图:                               ----------------------查看效果 源码下载----------------------- 小提示:浏览

  • JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)

    JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)

    本文实例讲述了JS实现漂亮的窗口拖拽效果.分享给大家供大家参考.具体如下: 这是一款漂亮的JS窗口拖拽效果(改变大小/最小化/最大化/还原/关闭) 特点: ① 窗口可以拖动: ② 窗口可以通过八个方向改变大小: ③ 窗口可以最小化.最大化.还原.关闭: ④ 限制窗口最小宽度/高度. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-win-drug-cha-close-demo/ 具体代码如下: <!DOCTYPE html PUBLIC &qu

  • JS基于面向对象实现的拖拽库实例

    JS基于面向对象实现的拖拽库实例

    本文实例讲述了JS基于面向对象实现的拖拽库.分享给大家供大家参考.具体如下: 这是一个面向对象的JS拖拽库,可设置水平锁定.垂直锁定.锁定位置.锁定范围等,设定这些范围后,只能在设定的模式下拖动,我觉得这是个挺不错的拖拽实例. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-mxdx-draw-plug-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transi

  • js实现的简练高效拖拽功能示例

    js实现的简练高效拖拽功能示例

    本文实例讲述了js实现的简练高效拖拽功能.分享给大家供大家参考,具体如下: 运行效果图如下: 具体代码如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" charset="utf-8" /> <meta http-equiv="content-type" content="text/html"

  • JS面向对象编程实现的拖拽功能案例详解

    本文实例讲述了JS面向对象编程实现的拖拽功能.分享给大家供大家参考,具体如下: 原始的面向过程代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> #box { width: 100px; height: 100px; background: blue; position: absolute; } </style> <title>

随机推荐