kineticjs相关内容

Kinect中的可拖动图像事件

我正在创建一个脚本,其中图像可以拖动,并且可以在双击时更改图像源。 移动图像工作正常并且双击图像时(事件是dblclick)图像更改但同一时间显示为double,其中另一个相同的图像出现在原始位置。 代码是: var picture = new Image(); picture.onload = function(){ var picture = new Kinetic. ..
发布时间:2019-06-13 18:56:49 JavaScript

KineticJS事件未针对分组图层的子项触发

我正在尝试向图像添加点击事件( Kinetic.Image )我正在添加到KineticJS阶段。 当我使用简单的层次结构时,如下所示(测试0),可以成功触发事件。 但是,当在更复杂的层次结构中添加图像时(测试1),事件不会被触发。 我创建了一个小提琴,演示两种等级情况。 //舞台的画布容器 var container = $(“#container”)。html(“”); ..
发布时间:2019-06-13 18:51:40 前端开发

KineticJS Drag事件阻止了双击事件的触发

我在KineticJs中有一个节点,它有一个拖动处理程序和双击处理程序。当用户尝试双击对象并在初始单击期间稍微移动时,拖动处理程序会拦截双击的内容,从而破坏体验。我已经广泛搜索了这个,并尝试了许多解决方案无济于事。此问题在以下链接中捕获,但未对kinetic进行更新。 https://github.com/ericdrowell/KineticJS/issues/243 示例代码: ..
发布时间:2019-06-07 21:59:47 前端开发

如何将kineticjs舞台复制到另一个画布

我正在编写一个应用程序,页面上可能有数百个画布。我没有为每个画布分配单个舞台的开销,而是决定让一个编辑器占据一个舞台。编辑完成后,它应该将舞台内容复制到另一个画布。 舞台提供toImage和toDataURL以获取内容但是根据此性能测试,这两种方法都将与context.drawImage相比非常慢。 请参阅: http://jsperf.com/copying-a-canvas-ele ..
发布时间:2019-05-27 13:34:43 前端开发

KonvaJS:如何用箭头连接两个形状?

我想使用Konvajs执行以下任务: 在画布上绘制两个矩形组。每组包含一个矩形,文本和一个圆圈 当我使用鼠标从圆圈拖动时,它会在拖动时绘制一个箭头。 当我将箭头放入另一组时,它会停止绘制并将两组边对边连接 这样的事情: 是否有任何原生方法支持形状之间的连接? 有人能告诉我一些例子吗? 解决方案 我已经连接了Konva.Circles。但图像的逻辑也是一样的。请找到 ..
发布时间:2019-05-24 19:54:48 前端开发

使用KineticJS变换(移动/缩放/旋转)形状

我正在尝试为KineticJS构建一个转换管理器,它将构建一个边界框并允许用户在其画布上缩放,移动和旋转图像。我正在绊倒锚点的逻辑。 http://jsfiddle.net/mharrisn/whK2M/ 我只想让用户从任意角落按比例缩放图像,并且还可以按住 - 拖动锚点旋转。 任何人都可以帮我指点正确的方向吗? 谢谢! 解决方案 以下是我所做的旋转控制的概念证明: ..
发布时间:2019-05-24 17:33:12 前端开发

在KineticJS中缩放和平移

有没有办法可以使用KineticJS在画布上缩放和平移?我发现这个图书馆 kineticjs-viewport ,但只是想知道是否还有其他办法实现这一点,因为这个库似乎使用了这么多额外的库,并且不确定哪些是完成工作所必需的。 或者,我甚至愿意接受围绕感兴趣区域绘制矩形并放大到该特定区域的想法。关于如何实现这一点的任何想法?一个JSFiddle的例子真棒! 解决方案 你可以简单地添加 ..
发布时间:2019-05-24 15:14:08 前端开发

Kineticjs将dragBoundFunc用于矩形中的矩形

我有以下代码在较大的矩形中拖动较小的矩形。 它几乎正常工作,但可以将橙色矩形移出白色矩形。 这个行为有什么解决方案吗?较大的rect是小矩形的拖拽者? 还有一个问题......是否可以将任何多边形中的矩形作为边界? body {margin:0px; padding:20px;} c ..
发布时间:2019-04-27 15:58:11 前端开发

创建向量和冲突

我有一个球和一根棍子(用于台球比赛)。 首先将球放在桌子的位置。在点击球时,棒会出现,这样我们就可以通过点击球来确定棒的放置角度(点击时我们确定鼠标相对于球心的角度,并将棒放在那个角度接触球)。 所以现在棍子也在桌子上。现在我只是沿着那个角度拖动棍子,如果拖动另一个角度而不是初始角度它返回false。 在拖动结束时我正在计算移动的距离棒和棒回到接触球的初始位置。然后我试图相对于棍 ..
发布时间:2019-04-27 15:48:21 前端开发

KineticJS - 用鼠标绘制线条

我正在使用KinectJS根据鼠标移动绘制线条。当用户按住鼠标按钮时,我希望它成为该行的“开始”点,当用户释放时,它将是该行的“结束”,但是当他们按住鼠标时我想要能够在鼠标移动时动态重绘线条。这可能吗? 解决方案 是的,它可能。 基本上,您必须在onMouseMove事件期间重绘图层。你需要一个标志来控制线的移动时间。 当脚本初始化时,这个标志应该是假的。 在onMous ..
发布时间:2019-04-27 15:35:39 前端开发

动态js中的可编辑文本选项

我想添加文本框或可编辑元素,以便用户可以选择编辑文本。 这是我目前的代码: var text = new Kinetic.Text({ text:“Sample Text”, --->我要编辑此文本 x:50, y:10, fill:“transparent”, fontSize:10, fontFamily:“ Helvetica Neue“, textFill:”#00 ..
发布时间:2019-04-27 13:59:09 前端开发

在Javascript中,当执行深层复制时,如何避免循环,因为属性为“this”?

我有一些库代码在我身上无休止地循环。 我不清楚如何在javascript中最好地执行循环检测和避免。 即没有以编程方式检查对象是否来自“this”引用,是吗? 这是代码。 谢谢! setAttrs:function(config){ var go = Kinetic.GlobalObject; var that = this; //从config 设置属性i ..
发布时间:2019-02-18 13:46:09 前端开发

Jquery图像镜头 - 动力学JS图像ID

我正在尝试在Kinetic JS画布上使用jquery图像镜头 http://jsfiddle.net/user373721 / 7f8qM / 15 / 。我遇到的挑战是如何在画布中找到图像的ID,我试过: myImage.onload = function( ){ var yoda = new Kinetic.Image({ x:0, y:0, image:myImage, wi ..
发布时间:2018-07-25 17:35:03 其他开发

kineticjs如何播放视频

我需要在舞台上添加视频,然后使用kineticjs鼠标点击播放。 我搜索了很多但是没有找到任何正常工作的代码 谢谢 解决方案 添加HTML5 使用相应的 标记标记到您的DOM。将视频元素分配给变量。为您的视频创建一个 Kinetic.Image 。然后通过单击某个对象(可能是图像,可能是放置在舞台上的“播放”按钮)播放视频,并使用以下功能将视频绘制到 ..
发布时间:2018-07-06 10:03:55 HTML5

在Kinetic.Line上检测鼠标事件

我正在尝试检测 Kinetic.Group 上的鼠标事件(当前是mousedown),其中包含由 Kinetic.Line 我正在听Layer上的mousedown事件。当碰到一条线时,没有事件被触发。 var grid = new Kinetic.Group({ x:0, y:0, width:this.group.width(), height:this.group.heig ..
发布时间:2018-07-05 10:38:01 HTML5

左键单击html画布陷阱并允许右键单击以通过(指针事件)

用例是我在几个html元素之上有一个html画布,它监听右键单击鼠标事件。我想使用鼠标左键在画布上绘图,同时使用右键单击与底层html元素交互。 我知道我可以允许所有鼠标事件通过将css属性pointer-events设置为none来传递画布。但是我想只允许右键单击它。 实现此目的的一种方法可能是在画布上侦听右键,将指针事件设置为无在回调中,再次手动触发右键单击事件并将指针事件设置回自 ..
发布时间:2018-07-05 10:36:46 前端开发