【krpano】可拖拽相框遮罩

无意中从网上看到一组图片，突然萌生了做一个相框遮罩的想法，但是通过用基本的拖拽图层是无法实现，所以就想出了另外一种实现方法

1、用ps做一个半透明的图层，中间抠空，做相框，保存为png格式

2、修改代码，将demo里layer的container改成image

（*layer中必须包含坐标x，y；ondown="draglayer();";）

<layername="abc" url="2111.png"

align="center"edge="center"x="100"y="100"

ondown="draglayer();"/>

<actionname="draglayer">

if(%1 !=dragging,

copy(drag_currentx, x);

copy(drag_currenty, y);

copy(drag_stagex, mouse.stagex);

copy(drag_stagey, mouse.stagey);

set(drag_sx, +1);

set(drag_sy, +1);

if(align == righttop, set(drag_sx,-1); );

if(align == right, set(drag_sx,-1); );

if(align == rightbottom, set(drag_sx,-1);set(drag_sy,-1); );

if(align == bottom, set(drag_sy,-1); );

if(align == leftbottom, set(drag_sy,-1); );

draglayer(dragging);

if(pressed,

sub(dx, mouse.stagex, drag_stagex);

sub(dy, mouse.stagey, drag_stagey);

mul(dx, drag_sx);

mul(dy, drag_sy);

add(x, drag_currentx, dx);

add(y, drag_currenty, dy);

delayedcall(0, draglayer(dragging));

);

</action>

3、ctrl+s保存，大功告成*但也有缺点，用遮罩后，会遮住其余功能，只能实现相框的拖拽

【krpano】可拖拽相框遮罩相关推荐

java 企业信息门户拖拽排版_web中拖拽排序与java后台交互实现
一.业务需求 1,在后台的管理界面通过排序功能直接进入排序界面 2,在排序界面能够人工的手动拖动需要排序的标题,完成对应的排序之后提交 3,在app或者是前端就有对应的排序实现了二.页面展示将整体 ...
java鼠标左键按下后拖动实现多选_鼠标拖拽多选功能
鼠标拖拽多选功能 *{ box-sizing:border-box; } ul{ width:500px; height:auto; margin:0; padding:20px; font-size ...
数码相框项目之显示一张可放大、缩小、拖拽的图片
之前我做过一个电子相框的项目,涉及到的重难点主要为:在LCD上放大.缩小.移动图片. 首先我们得明白的一点是:无论是放大或缩小,实际上都是对原图进行等比例的缩小,然后在LCD上面显示,只不过缩小的程度 ...
EasyUI层与拖拽系列控件
为什么80%的码农都做不了架构师?>>> 基于EasyUI开发的可扩展附加组件:拖拽类EasyDragDrop,弹出层基类EasyLayer,遮罩类EasyMask,Popup ...
vue3实现鼠标左键拖拽画矩形框框选功能
vue3 + elementuiPlus 实现鼠标左键拖拽画矩形框框选列表功能,仿照桌面框选功能效果如图: vue3鼠标框选代码: <template><div class=& ...
Sortablejs + css 模仿安卓桌面，实现可拖拽排序的主页图标+文件夹收纳
Sortablejs 已有功能可以参考官方demo (http://sortablejs.github.io/Sortable/#grid),这里简要说一下,Sortablejs 已经实现了:拖拽动画 ...
elementUi el-dialog 对话框实现可拖拽、去掉覆盖层、并可操作底层的按钮
一.对话框实现可拖拽功能实现方法:vue的指令使用方法: 1.将下列drag.js文件放入代码库中: 2.在main.js中引入上述drag.js文件: import 'src/libs/drag ...
点击图片放大,实现移动端双指缩放,单指拖拽功能
记录一下最近项目中用到的点击图片出现一个遮罩层,同时放大图片显示,移动端可双指缩放图片并单指拖拽图片.再次点击遮罩层透明区域,遮罩层消失一.实现效果: 页面原图展示: 点击图片后: 二.代码实现: ...
原生拖拽太拉跨了，纯JS自己手写一个拖拽效果，纵享丝滑
前言提到元素拖拽,通常都会先想到用 HTML5 的拖拽放置 (Drag 和 Drop) 来实现,它提供了一套完整的事件机制,看起来似乎是首选的解决方案,但实际却不是那么美好,主要是它的样式太过简陋, ...

【krpano】可拖拽相框遮罩

【krpano】可拖拽相框遮罩相关推荐

最新文章

热门文章