关键词：
【中文标题】canvas - 使用fabricjs和angularjs进行捏缩放【英文标题】：canvas - pinch zooming using by fabricjs and angularjs 【发布时间】：2014-11-02 15:05:13 【问题描述】：我正在尝试使用 FabricJs 在画布上进行捏合缩放。但我对此一无所知。
我还从谷歌搜索了一些代码。但不行。任何人都不会写一篇关于使用织物进行缩放选项的文章。
如果您对此有任何想法，请告诉我。请告诉我.......
我试过了
....
canvas.on('touch:gesture', function (e)
isGestureEvent = true;
// /* Just use the scale of the touch event to determine zoom in or zoom out. */
var lPinchScale = e.self.scale;
var type = e.e.type;
if (type == "touchstart")
//console.log("touchstart");
aGestureTouchStartTouches = e.e.touches;
aGestureScale.push(lPinchScale);
//console.log("scale:" + lPinchScale);
else if (type == "touchmove")
console.log("touchmove");
//var modCheck = 5;
//if(aGestureScale.length % modCheck == 0)
// canvasScale is current scale
// lPinchScale is what we want to set it to, relative to what it is now
// ie if canvasScale == 2.7
// var newScale = canvasScale * lPinchScale
// newScale is where we want canvasScale to end up
//
// Get the last pinch scale;
var lastScale = aGestureScale[aGestureScale.length - 1];
// if scaleDiff negative then pinch in (zoom out), positive it is pinch out (zoom in)
var scaleDiff = lPinchScale - lastScale;
if (scaleDiff < 0)
scaleDiff = lastScale - lPinchScale;
scaleDiff = 1 + scaleDiff;
fnZoomOutByFactor(scaleDiff);
else
scaleDiff = 1 + scaleDiff;
fnZoomInByFactor(scaleDiff);
//console.log("scale:" + lPinchScale);
//
// add new scale
aGestureScale.push(lPinchScale);
else
console.log("gesture that is not move or start")
);
....
这就像一个示例代码。我不能把我的所有代码。 bcs 这是非常大的代码.. 请为我提供一些示例..
谢谢！！
我已经下载了最新版本：https://github.com/kangax/fabric.js/tags
但不工作。 :(
【问题讨论】：
你的事件触发了吗？ 【参考方案1】：我做了一点改动，它工作了
var canvas = new fabric.CanvasWithViewport('canvas');
canvas.on('touch:gesture',function(event)
isGestureEvent = true;
var lPinchScale = event.self.scale;
var scaleDiff = (lPinchScale -1)/10 + 1; // Slow down zoom speed
canvas.setZoom(canvas.viewport.zoom*scaleDiff);
);
【讨论】：
【参考方案2】：您需要使用手势模块进行自定义构建：http://fabricjs.com/build/
当使用这个时，手势事件应该被触发。
【讨论】：
Fabricjs 平移和缩放
】Fabricjs平移和缩放【英文标题】：Fabricjspanandzoom【发布时间】：2015-08-0814:04:10【问题描述】：如何使用fabricjs进行平移和缩放？我试过使用zoomToPoint和setZoom方法，但它们不适用于平移。一旦我开始使用不同的缩放点，我就会遇... 查看详情
FabricJS：对象控件在共同选择之前不起作用
】FabricJS：对象控件在共同选择之前不起作用【英文标题】：FabricJS:Objectcontrolsnotworkinguntilcommonselection【发布时间】：2021-02-1803:50:04【问题描述】：我正在使用Vue和FabricJS创建产品配置器。我已经使用创建了一个画布this.canvas=newfab... 查看详情
缩放和平移后fabricJS中的对象对齐
】缩放和平移后fabricJS中的对象对齐【英文标题】：ObjectalignmentinfabricJSafterzoomandpan【发布时间】：2021-06-1807:58:41【问题描述】：当我想将元素左对齐时，我使用fabricJS和Angular，例如我使用以下方法alignLeft()//GetSelectedElementsvarobj=thi... 查看详情
FabricJS - 从 JSON 加载 Canvas 时出错
】FabricJS-从JSON加载Canvas时出错【英文标题】：FabricJS-ErrorwhenloadingCanvasfromJSON【发布时间】：2012-07-0212:37:32【问题描述】：按照thisanswer中的建议，我在画布中使用了从fabric.Image扩展而来的自定义对象。当我从服务器检索json字符串... 查看详情
FabricJS 防止 canvas.clipTo 剪切 canvas.backgroundImage
】FabricJS防止canvas.clipTo剪切canvas.backgroundImage【英文标题】：FabricJSpreventcanvas.clipTofromclippingcanvas.backgroundImage【发布时间】：2016-01-0423:06:52【问题描述】：我想在我的Fabric-poweredCanvas中设置一个全局clipTo，它将影响所有用户添加的... 查看详情
Fabricjs 之后的线坐标（移动、缩放、旋转） - canvas.on('object:modified'...
】Fabricjs之后的线坐标（移动、缩放、旋转）-canvas.on(\\\'object:modified\\\'...【英文标题】：Fabricjslinecoordinatesafter(moved,scaled,rotated)-canvas.on(\'object:modified\'…Fabricjs之后的线坐标（移动、缩放、旋转）-canvas.on(\'object:modified\'...【发布... 查看详情
fabricjs做组态和流程图-认识fabricjs
...求。现在由于公司需要，开始研究组态设计并选定了这个FabricJS作为web展示的组态设计！Fabricjs是一个开源的基于canvas的web交互的js库 查看详情
Fabricjs HTML5 Canvas：为啥图像大小调整得这么差？
】FabricjsHTML5Canvas：为啥图像大小调整得这么差？【英文标题】：FabricjsHTML5Canvas:Whyareimagessopoorlyresized?FabricjsHTML5Canvas：为什么图像大小调整得这么差？【发布时间】：2013-12-0908:45:56【问题描述】：当我将775x775的图像添加到fabricjs... 查看详情
将fabricjs画布转换为base64图像
】将fabricjs画布转换为base64图像【英文标题】：Convertfabricjscanvastobase64image【发布时间】：2018-06-2614:36:49【问题描述】：我正在尝试将画布作为图像发送到我的服务器，并且我想以base64格式发送。Fabricjs提供使用canvas.toSVG()或canvas.t... 查看详情
使用 FabricJs 在同一画布上裁剪多个图像
】使用FabricJs在同一画布上裁剪多个图像【英文标题】：CropmultipleimagesonsamecanvasusingFabricJs【发布时间】：2016-12-2023:07:38【问题描述】：我想将图像添加到画布并一次选择一个并应用裁剪以请看一下：http://jsfiddle.net/kNEaX/586/原帖：... 查看详情
可拖动 DIV 中的 Fabricjs
】可拖动DIV中的Fabricjs【英文标题】：FabricjsindraggableDIV【发布时间】：2013-06-2901:10:45【问题描述】：我在可拖动(jquery-ui)DIV中有一个fabricjs画布。但是，当我拖动div时，画布坐标变得疯狂，我无法再与之交互。知道如何防止这种... 查看详情
更改触摸延迟：fabricjs 中的长按
】更改触摸延迟：fabricjs中的长按【英文标题】：changedelayfortouch:longpressinfabricjs【发布时间】：2019-12-1615:43:30【问题描述】：我将更改fabric.js中longpress的延迟（使用eventjs构建），但没有改变。我做错了什么？canvas.on(\'touch:longpress... 查看详情
如何在fabric js中覆盖canvas.add()方法
】如何在fabricjs中覆盖canvas.add()方法【英文标题】：howtooverridecanvas.add()methodinfabricjs【发布时间】：2020-01-1707:44:42【问题描述】：我正在使用一个图像编辑器，我想在其中将图像添加到带有动画的画布中。我尝试覆盖canvas.add()方... 查看详情
将图像拖放到画布（FabricJS）
】将图像拖放到画布（FabricJS）【英文标题】：DragAndDropImagetoCanvas(FabricJS)【发布时间】：2015-11-0702:32:31【问题描述】：问题我想用图像而不是canvas对象来做到这一点。这意味着您必须先添加要添加到画布的内容并作为画布的一部... 查看详情
Fabric js - 将画布宽度和高度设置为 100%
】Fabricjs-将画布宽度和高度设置为100%【英文标题】：Fabricjs-SetCanvaswidthandheightto100%【发布时间】：2021-05-0815:58:32【问题描述】：我正在使用Fabricjs4.3.1库，并且希望能够使画布区域适应其父div#contCanvasLogo。我做了一些尝试，但没... 查看详情
集成 Fabricjs 和 Angularjs
】集成Fabricjs和Angularjs【英文标题】：IntegratingFabricjsandAngularjs【发布时间】：2013-08-1922:53:02【问题描述】：我正在尝试构建一个在屏幕上编辑简单图形的应用程序，fabricjs是我使用的画布库，angularjs是我使用的MVW框架。现在，从D... 查看详情
Fabric js：使用鼠标调整大小时增加字体大小而不是仅仅缩放
】Fabricjs：使用鼠标调整大小时增加字体大小而不是仅仅缩放【英文标题】：Fabricjs:Increasefontsizeinsteadofjustscalingwhenresizewithmouse【发布时间】：2016-02-1500:48:41【问题描述】：我正在开发fabricjs应用程序，当我们用鼠标调整字体大小... 查看详情
如何从 JSON 重新加载自定义 fabricJS 画布对象？
】如何从JSON重新加载自定义fabricJS画布对象？【英文标题】：HowdoIreloadcustomfabricJScanvasobjectsfromJSON?【发布时间】：2021-06-1700:49:01【问题描述】：我正在使用fabricJS和自定义类。我遇到了canvas.loadFromJSON()的问题，所以我从anotherquesti... 查看详情