react 实现resize 和Drag缩放

2024-11-05

react项目中实现元素的拖动和缩放实例

在react项目中实现此功能可借助 react-rnd 库,文档地址:https://github.com/bokuweb/react-rnd#Screenshot .下面是实例运用: import React, { Component } from 'react' import PropTypes from 'prop-types' import assign from 'object-assign' import classNames from 'classnames' import _ f

《JavaScript 实战》：JavaScript 实现拖拽缩放效果

拖拉缩放效果,实现通过鼠标拖动来调整层的面积(宽高)大小,例如选框效果.这里的拖拉缩放比一般的选框复杂一点,能设置八个方位(方向)的固定触发点,能设置最小范围,最大范围和比例缩放. 跟拖放效果一样,程序的原型也是在做图片切割效果的时候做出来的.但这个效果的参考少的多,基本上靠自己摸索,走了不少弯路,现在总算把自己想要的效果做出来了,程序跟上一个版本比较也已经“面目全非”,还是觉得有很多需要改进的地方,就像永远没有最完美的土耳其地毯. 这里也有一个简化版的SimpleResize,方便学习. 效果

切图js

首先引用一段关于拖动,缩放,剪切的基础代码 /* * 作者:http://cloudgamer.cnblogs.com/ * * 改进与增强 * 作者:http://yoker.sc0826.com/ * 时间:2008年11月09日 * 功能:远程web图片在线裁剪,图片预加载比例缩放,裁剪参数个性设置,裁剪比例缩放等. */ /* -------------这里定义一些环境变量--------------- */ //获取dom对象的方法 var $ = function(id) { ret

原生Js弹窗插件|web弹出层组件|对话框

wcPop.js 是一款基于原生javascript开发的前端 web版弹窗组件,遵循原生 H5/css3/JS 的书写规范,简单实用.拿来即用(压缩后仅10KB).已经兼容各大主流浏览器.内含多种弹窗类型(普通型弹窗.仿微信|android|ios弹窗.定位弹窗.全屏弹窗),多种动画展示效果,可以让您的网页对话框千变万化. ◆ 一睹风采 ◆ 在页面只需引入wcPop.js即可: <script src="wcPop.js"></script> ◆ API调用

非常好的一个JS代码（FixedMenu.htm）

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>JavaScript 多级联动浮动菜单</title> <script type=

JS切割图片-滑动门效果

转载请注明来源:https://www.cnblogs.com/hookjc/ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head&

用JQ仿造百度书籍预售页面的单屏滚页效果

今天的项目需要做到一个介绍页面,我主动提出走单屏滚页的风格,毕竟交互性好,逼格也高,具体效果可以参照百度知道书籍预售页面. 其实现效果就大概是这样的: 还是老样子,所有步骤文件可以从我的Github上下载. 原理滚页的方式肯定是通过animate来实现,由被点击的a标签索引来确定要从哪一页滚至哪一页的位置.同时也需要一个全局变量来存储当前页面的索引,这样方便我们通过鼠标滚轮事件来滚页. 另外这里也调用了回调事件,包括点击时被激活页面的回调,以及其它非激活页面的回调,为了提高复用我们会动用 ev

扒皮下GitHub 404的图片层次轴动特效

今天要克隆的前端特效非常有意思,可以参见GitHub404页面 https://github.com/vajoy/master/index.html 记得之前华为在站酷发布EMUI设计大赛的主页也用了这种特效.说简单点,就是鼠标在页面移动时,banner上的图片呈现有层次的空间轴动特效,效果图如下: 咱们先仿造GitHub 404页面来写一下banner原型——前景有“鱿鱼”和“对话框”,远景有俩小屋子: 代码如下 <!doctype html> <html> <head&g

overlay-3

if(typeof Shadowbox=="undefined"){ throw"Unable to load Shadowbox, no base library adapter found."}(function(){ var version="1.0"; var options={assetURL:context+"/static/style/images/", loadingImage:"loading.gi

wp仿系统截图

wp上直接调用CameraCaptureTask,并没有参数设置截图大小,刚好项目需求要截成正方型,于是写了个仿系统截图的demo出来. 截图如下: 需要做的逻辑运算为: 1.初始化照片时:判断照片比例,如果相对页面比例太长或者太宽 ——>改变对图片进行缩放,使照片填充满整个截取框,并把缩放比例设置为最小缩放倍数等. void FitImage(double h,double w) { ////判断是否存在applicationbar if (this.ApplicationBar !

artDialog.js的使用

开发项目中用到了artDialog.js,从而专门学习一下如何配置和使用. 一.artDialog是什么 artDialog是一个精巧的web对话框组件,压缩后只有十多KB,并且不依赖其他框架. 二.artDialog的使用以下内容引用 http://www.2cto.com/kf/201303/195812.html,artDialog基本使用,详细内容有调整和更改. 在页面head引入artDialog,注意如果文件带有skin参数将会无阻塞的方式自动加载对应的皮肤css文件,当然你仍然可

插件 - 提示窗体（ArtDialog）

效果: 代码: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="se

CSS3 学习小结

写样式时有时遇到浏览器兼容问题:-webkit-transition:chrome和safari-moz-transition:firefox-ms-transition:IE-o-transition:Opera但是在JS 中则不允许带前边的横杠,并且首字母大写,如WebkitTransition,MozTransition,MsTransition,OTransition属性选择器:设置样式的格式:表签名[属性名=value]{}表签名[属性名~=value]{}//属性值是一个词组用空格分

HTM CSS 笔记乱炖

一.常用实体(字符转义) '<' == '<' '©' == '©' '>' == '>' '"' == '"' ' ' == ' ' '®' == '®' '&&' == '&' '™' == '™' 二.图片选择时,需要考虑效果与文件体积 <img src="路径" title="鼠标悬浮显示的文字" alt="图片不显示时,显示的文字,被搜索引擎收录" /&g

h5、css3基础

一.html(超文本标记语言) 作用:实现页面布局页面由许多标记符号组成由浏览器解释执行二.html主题创建方式 !(英文状态)+tab html:4s+tab html:5+tab 三.标签在html页面中用尖括号括起来的叫做标签(标记符号) 分类双标签:成对出现的标签.html body 单标签:只存在一个标签.img meta 四.DOCTYPE 作用:告知浏览器解析本文档的规范,它不是一个标签五.注释标签 ctrl+/ 代码失效注释说明六.图片标签 img+tab键属

HTML5+CSS3（3）

一.CSS3新增属性用法整理 1.box-shadow(阴影效果) 2.border-color(为边框设置多种颜色) 3.border-image(图片边框) 4.text-shadow(文本阴影) 5.text-overflow(文本截断) 6.word-wrap(自动换行) 7.border-radius(圆角边框) 8.opacity(透明度) 9.box-sizing(控制盒模型的组成模式) 10.resize(元素缩放) 11.outline(外边框) 12.background-s

web@HTML重要标签详介绍.

1.table标签<table border="1px " rules="groups" cellpadding="5px" cellspacing="5px" bgcolor="blue">//边框规则,设置后会合并边框(cellspacing失效)rules: all groups cols; <caption align="top">表1</capti

Echarts地图展示及属性分析

Echarts,一个效果非常棒的可视化库,可以生产各种图表,动态展示,附上官方网址:http://www.echartsjs.com/index.html 之前带本科实习时有同学用过,狗哥的博客也用这个展示他的旅游足迹,所以在这次山西项目里我也拿来试了一下.类似于echarts这种库,最好的学习方法就是按照官网的demo来做,所以我先找了一个符合我要求的demo将其实现,然后再分别掌握其中的重要属性,最后按照自己的需求进行改动. 一.地图展示我看的主要是以下两种:都在series里,位置在侧栏

Python+OpenCV图像处理（十一）—— 图像金字塔

简介:图像金字塔是图像中多尺度表达的一种,最主要用于图像的分割,是一种以多分辨率来解释图像的有效但概念简单的结构.简单来说,图像金字塔就是用来进行图像缩放的. 进行图像缩放可以用图像金字塔,也可以使用resize函数进行缩放,后者效果更好.这里只是对图像金字塔做一些简单了解. 两种类型的金字塔: ①高斯金字塔:用于下采样.高斯金字塔是最基本的图像塔.原理:首先将原图像作为最底层图像G0(高斯金字塔的第0层),利用高斯核(5*5)对其进行卷积,然后对卷积后的图像进行下采样(去除偶数行和列)得到上一

【python-opencv】20-图像金字塔

知识点介绍图像金字塔原理: 高斯金字塔拉普拉斯金字塔: 代码层面知识点: cv2.PyrDown:降采样 cv2.PyrUp:升采样高斯金字塔与拉普拉斯金字塔图像金字塔是图像中多尺度表达的一种,最主要用于图像的分割,是一种以多分辨率来解释图像的有效但概念简单的结构.简单来说,图像金字塔就是用来进行图像缩放的. 进行图像缩放可以用图像金字塔,也可以使用resize函数进行缩放,resize效果更好.这里只是对图像金字塔做一些简单了解. 正常情况下,我们经常处理固定分辨率的图像.有时也会

art.dialog 使用说明

Js代码 2. 传入HTMLElement 备注:1.元素不是复制而是完整移动到对话框中,所以原有的事件与属性都将会保留 2.如果隐藏元素被传入到对话框,会设置display:block属性显示该元素 3.对话框关闭的时候元素将恢复到原来在页面的位置,style display属性也将恢复 ******************************************************************************************** ar

react 实现resize 和Drag缩放

热门专题