关键词：
【中文标题】FabricJS动画：鼠标：向上和：向下期间画布上的选定对象【英文标题】：FabricJS animating :selected object on canvas during mouse:up and :down 【发布时间】：2017-09-14 05:39:34 【问题描述】：我正在尝试使用 FabricJS 在任何对象被选中时为其设置动画。
So when selected an object 'shrinks' from center on mouse:down (10px off the width and 10px off the height)
在 mouse:up 上它会恢复到原来的大小和状态。
我不知道我是否需要为此使用内置动画的 FabricJS。我希望它线性增长和收缩。
现在我的Fiddle 几乎什么也没做，如果没有错误，我就不能走得足够远。
有没有人有这个或类似的例子？我找不到任何关于在鼠标上更改 FabricJS 对象外观的信息：上/下时被选中。
(function()
var canvas = this.__canvas = new fabric.Canvas('canvas');
var touchedObject;
var rect = new fabric.Rect(
left: 50,
top: 50,
width: 50,
height: 50,
fill: 'blue',
hasBorders: false,
);
canvas.add(rect);
var rect2 = new fabric.Rect(
left: 190,
top: 50,
width: 50,
height: 50,
fill: 'red',
hasBorders: false,
);
canvas.add(rect2);
canvas.on('object:selected', function(evn)
/*animate(
'width': ,
'height':
,
duration: 200,
);*/
);
canvas.renderAll();
)();
【问题讨论】：
【参考方案1】：您可以使用 fabric.util.animate() 方法完成此操作。
(function()
var canvas = this.__canvas = new fabric.Canvas('canvas');
var touchedObject;
var rect = new fabric.Rect(
left: 50,
top: 50,
width: 50,
height: 50,
fill: '#07C',
hasBorders: false,
);
canvas.add(rect);
// disable controls and set hover-cursor
canvas.forEachObject(function(o)
o.hasBorders = o.hasControls = false;
);
canvas.hoverCursor = 'pointer';
// mouse events
canvas.on('mouse:down', function(e)
animate(e, 1);
);
canvas.on('mouse:up', function(e)
animate(e, 0);
);
function animate(e, p)
if (e.target)
fabric.util.animate(
startValue: e.target.get('height'),
endValue: e.target.get('height') + (p ? -10 : 50 - e.target.height),
duration: 200,
onChange: function(v)
e.target.setHeight(v);
canvas.renderAll();
,
onComplete: function()
e.target.setCoords();
);
fabric.util.animate(
startValue: e.target.get('width'),
endValue: e.target.get('width') + (p ? -10 : 50 - e.target.width),
duration: 200,
onChange: function(v)
e.target.setWidth(v);
canvas.renderAll();
,
onComplete: function()
e.target.setCoords();
);
fabric.util.animate(
startValue: e.target.get('top'),
endValue: e.target.get('top') + (p && 5),
duration: 200,
onChange: function(v)
e.target.setTop(v);
canvas.renderAll();
,
onComplete: function()
e.target.setCoords();
);
fabric.util.animate(
startValue: e.target.get('left'),
endValue: e.target.get('left') + (p && 5),
duration: 200,
onChange: function(v)
e.target.setLeft(v);
canvas.renderAll();
,
onComplete: function()
e.target.setCoords();
);
canvas.renderAll();
)();#canvas
border: 1px solid lightgrey;
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.0/fabric.min.js"></script>
<canvas id="canvas" ></canvas>【讨论】：
太棒了，我离这个解决方案还很远。是否可以做一个小的改变，让它不会回到画布上的原始位置？我试过了，但我一直在打破它：\ @GoldenGonaz 只需删除mouse:up 事件。简单:)
这就是我尝试过的，但它也阻止了矩形恢复到原来的大小。我只是想阻止它回到画布上的原始位置
@GoldenGonaz 嗯。但这会将矩形的位置更改为差异。一，如果那是你想要的，那很好。检查编辑的答案。
啊，是的，不过这样更好:) 谢谢。我会尝试解决它，这样当你点击它时矩形不会移动（不拖动它）如何优化画布上的动画？ HTML 5
】如何优化画布上的动画？HTML5【英文标题】：Howtooptimizeanimationoncanvas?HTML5【发布时间】：2011-11-1516:28:21【问题描述】：我遇到了一个问题，即随着各种图片向左、向右、向上和向下移动，画布上的动画速度变慢。我需要关于如... 查看详情
在 FabricJS 画布上拖放和删除对象
】在FabricJS画布上拖放和删除对象【英文标题】：Drag,dropanddeleteobjectsonFabricJScanvas【发布时间】：2017-08-0814:53:13【问题描述】：我在使用JQuery处理FabricJS时遇到问题。选择一个对象并单击删除没有问题。这是我的代码演示Fiddle我可... 查看详情
集成 Fabricjs 和 Angularjs
】集成Fabricjs和Angularjs【英文标题】：IntegratingFabricjsandAngularjs【发布时间】：2013-08-1922:53:02【问题描述】：我正在尝试构建一个在屏幕上编辑简单图形的应用程序，fabricjs是我使用的画布库，angularjs是我使用的MVW框架。现在，从D... 查看详情
使用向上/向下滑动动画显示和隐藏视图
】使用向上/向下滑动动画显示和隐藏视图【英文标题】：ShowandhideaViewwithaslideup/downanimation【发布时间】：2013-11-1423:11:32【问题描述】：我有一个LinearLayout，我想用Animation显示或隐藏它，只要我改变它的可见性，它就会向上或向... 查看详情
Fabricjs：在画布上更新 SVG
】Fabricjs：在画布上更新SVG【英文标题】：Fabricjs:UpdateSVGonthecanvas【发布时间】：2019-01-2022:23:35【问题描述】：我使用的是fabricjs1.6.4，我想用新的svg更新现有的svg。我正在使用此代码添加新的SVG：fabric.loadSVGFromURL(url,function(objects,... 查看详情
使用 jQuery 在向上滚动和向下滚动时添加不同的 CSS 动画
】使用jQuery在向上滚动和向下滚动时添加不同的CSS动画【英文标题】：AddingdifferentCSSanimationsonscrollupandscrolldownwithjQuery【发布时间】：2013-04-2120:11:12【问题描述】：我试图在用户上下滚动时添加类以显示2个css动画。如果我只使用... 查看详情
添加或删除对象时如何添加动画 - Fabricjs
】添加或删除对象时如何添加动画-Fabricjs【英文标题】：Howtoaddanimationwhenaddingorremovinganobject-Fabricjs【发布时间】：2017-06-1314:12:50【问题描述】：我将FabricJS用于我的图像处理库。我想知道如何将动画添加到画布中/从画布中删除的... 查看详情
使用 FabricJs 在同一画布上裁剪多个图像
】使用FabricJs在同一画布上裁剪多个图像【英文标题】：CropmultipleimagesonsamecanvasusingFabricJs【发布时间】：2016-12-2023:07:38【问题描述】：我想将图像添加到画布并一次选择一个并应用裁剪以请看一下：http://jsfiddle.net/kNEaX/586/原帖：... 查看详情
画布上的 FabricJS AngularJS 事件
】画布上的FabricJSAngularJS事件【英文标题】：FabricJSAngularJSEventsonCanvas【发布时间】：2015-08-1422:55:45【问题描述】：我正在开发一个MEANStack应用程序，我在上面使用FabricJS。为了更轻松地工作，我找到了https://github.com/michaeljcalkins/an... 查看详情
如何使fabricJS画布在移动设备上可水平拖动？
】如何使fabricJS画布在移动设备上可水平拖动？【英文标题】：HowtomakeafabricJScanvasdraggablehorizontallyonmobile?【发布时间】：2021-06-0811:38:39【问题描述】：我正在尝试创建一个比我的手机屏幕更宽的画布，用户可以左右拖动以查看画... 查看详情
是否可以同时在 FabricJS 画布上独立拖放多个对象？
】是否可以同时在FabricJS画布上独立拖放多个对象？【英文标题】：Isitpossibletoindependentlydrag&dropmultipleobjectsonaFabricJScanvasatthesametime?【发布时间】：2014-02-1618:42:58【问题描述】：我正在开发带有Fabric.js的基于触摸的应用程序。... 查看详情
WPF TabControl 如何在鼠标向上而不是鼠标向下更改选项卡？
】WPFTabControl如何在鼠标向上而不是鼠标向下更改选项卡？【英文标题】：WPFTabControlHowtochangeTabonmouseupratherthanmousedown?【发布时间】：2011-09-0612:22:29【问题描述】：在WPFTabControl中，默认行为是在鼠标按下时更改选定的选项卡。在... 查看详情
Bootstrap modal 使用鼠标滚动/触摸板在 Chrome 41 上停止滚动（但适用于向上/向下键）
】Bootstrapmodal使用鼠标滚动/触摸板在Chrome41上停止滚动（但适用于向上/向下键）【英文标题】：BootstrapmodalstopscrollingonChrome41withmousescroll/touchpad(butworkswithup/downkeys)【发布时间】：2015-06-1509:59:50【问题描述】：我的目标是获得一个... 查看详情
如何清除画布属性和事件并将其添加回fabricjs？
】如何清除画布属性和事件并将其添加回fabricjs？【英文标题】：Howtoclearcanvaspropertiesandeventsandadditbackinfabricjs?【发布时间】：2021-03-2623:19:08【问题描述】：上下文：我有一个用例，我需要从堆栈中获取旧画布并将其分配给dom中当... 查看详情
从画布中删除图像-fabricjs（javascript）
】从画布中删除图像-fabricjs（javascript）【英文标题】：removeimagefromcanvas-fabricjs(javascript)【发布时间】：2015-07-2917:49:39【问题描述】：我正在开发Web应用程序，其中大部分部分已被Angularjs覆盖。我被困在一个点上。我使用fabric.js... 查看详情
c_cpp方形按钮与背景动画触摸向下和向上（突出显示）(代码片段)
向上和向下的箭头怎么输入?
...骤如下：1、先把电脑输入法切换到搜狗输入法；2、然后鼠标光标放在搜狗输入法状态栏里面的任意位置，再点击鼠标右键；3、在弹出来的页面，点击“表情&符号”；4、接着点击“符号大全”；5、进入到符号大全之后，点... 查看详情
将fabricjs画布转换为base64图像
】将fabricjs画布转换为base64图像【英文标题】：Convertfabricjscanvastobase64image【发布时间】：2018-06-2614:36:49【问题描述】：我正在尝试将画布作为图像发送到我的服务器，并且我想以base64格式发送。Fabricjs提供使用canvas.toSVG()或canvas.t... 查看详情