首页 > TAG信息列表 > kineticjs

Javascript-KineticJS创建自己的类

如何基于KineticJs Sprite类创建一个新类.我正在尝试这样： (function() { Kinetic.MyCircle = function(config) { this._initMyCircle(config); }; Kinetic.MyCircle.prototype = { _initMyCircle: function(config) { Kinetic.Circle.c

javascript-为什么Kinetic.Shape的drawFunc方法被调用两次？

尝试使用KineticJS(v4.5.4)创建自定义形状时,我注意到Kinetic.Shape类的drawFunc方法被调用了两次,比给出以下代码的预期时间要长得多(改编自http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-shape-tutorial/).当我运行下面的代码时,我可以看到在浏览器控制

javascript-使用dynamicjs在画布上创建覆盖并删除其中的一部分

在画布绘画应用程序中,我想添加功能以在整个画布上创建覆盖,然后在画布上制作一个特定的矩形时,覆盖应该从该区域中删除,就像https://onpaste.com/上的一个一样(选择聚焦工具).我想到的是,如果在画布上制作一个矩形,则可以裁剪当前图像,然后将图像再次粘贴到画布上选定位置的覆盖层

javascript-KineticJS Drag事件阻止触发Double-click事件

我在KineticJs中有一个同时具有拖动处理程序和双击处理程序的节点.当用户尝试双击该对象并在首次单击期间略微移动时,拖动处理程序将截获双击,从而中断了体验.我已经在Google上进行了广泛的搜索,并尝试了许多无济于事的解决方案.在下面的链接中捕获了此问题,但未对动力学进行任何更

javascript-动画函数中的单个值

我正在尝试动画化我在HTML5中创建的形状. myShape.drawFunc = function(){ var context = this.getContext(); context.beginPath(); context.arc(480, 480, animationValue, startingPoint * Math.PI, endingPoint * Math.PI, false); context.lineTo(480,480);

javascript-dragBoundFunc中的鼠标位置

我正在使用kineticjs在画布上绘制一些小部件.此小部件的宽度为600px,由几个矩形组成(默认为24个).在这个矩形上,可以拖动另一个矩形,我们称其为“光标”. 我希望光标仅在我的鼠标足够远时才跳到其他矩形(而不是平滑的拖动)(如果您愿意,可以像步进拖动一样). 例如,如果光标位于0,0且

javascript-KineticJS Canvas-从中心点开始缩放组

我想扩大我的团队(形象和某些东西). group.setScale(zoom, zoom); http://jsfiddle.net/K8nK3/ 但是,当我扩大小组规模时,我认为这并不是从小组中心扩大规模.我觉得是这样 我想要它从中心像 我尝试更多,但未成功.我该怎么办,谢谢.解决方法:[编辑以更好地满足提问者的需求] 这是从

javascript-由CamanJS修改的KineticJS canvas

我正在尝试将CamanJS过滤器应用于使用KineticJS创建的画布.有用： Caman("#creator canvas", function() { this.lomo().render(); }); 应用CamanJS过滤器后,我试图用画布做某事(例如,拖动和移动图层或只是单击它),但是随后画布恢复为原始状态(在应用CamanJS过滤器之前).所以问

javascript – 如何扩展KineticJS形状

对于KineticJS 4.0.0或更低版本,形状扩展了一个类,可以扩展 var MyCircle = Kinetic.Circle.extend({ init : function(config) { this._super(config)); }, myFunc : function(){} }); 要么 Kinetic.MyCircle = function (config) { Kinetic.Circle.ap

javascript – kineticjs表现缓慢

对不起,如果已经提出这个问题,我试图找不到它. 我有一个画布,最终应该显示大约400-500个矩形20-30像素的高度/宽度.它们中的每一个都应该在鼠标移开时向上和向后移动一个像素,以创建一些选定的行为. 现在,我的代码在少量形状下工作得很好,但是对于其中的500个,它开始显着减慢.从互

javascript – KonvaJS：如何用箭头连接两个形状？

我想使用Konvajs来执行以下任务： >在画布上绘制两个矩形组.每个组包含一个矩形,文本和一个圆圈 >当我使用鼠标从圆圈拖动时,它会在拖动时绘制箭头.>当我将箭头拖放到另一个组时,它会停止绘制并将两个组边对边连接 像这样的东西： 是否有任何本机方法支持形状之间的连接？有人能告诉我一

javascript – Kineticjs dragBoundFunc用于矩形中的矩形

我有以下代码在较大的矩形中拖动较小的矩形. 它几乎可以工作,但可以将橙色矩形移出白色矩形. 这个行为有什么解决方案吗？较大的矩形是小直肠的拖曳？ 还有一个问题……是否有可能在任何多边形中作为边界的矩形？ <!DOCTYPE HTML> <html> <head> <style> body {margin: 0px; padding:

javascript – 如何添加点击以形成循环？

我将文本数组传递给我的circleCreate函数,该函数为每个文本创建一个楔形.我要做的是向每个楔形添加一个点击事件,因此当用户点击一个楔形时,它会抛出每个楔形文本的警报. 但它不起作用.只有外圈提醒文字.它总是说同样的文字.两个内圈都警告未定义. http://jsfiddle.net/Yushell/9f7

javascript – HTML5 Canvas – 用随机像素颜色填充形状？

我有一个形状,让我们说： var context = canvas.getContext(); context.beginPath(); context.moveTo(200, 50); context.lineTo(420, 80); context.quadraticCurveTo(300, 100, 260, 170); context.closePath(); canvas.fillStroke(this); 形状可能每次都不同. 我有10个蓝色渐变,

javascript – 移动到顶部功能在kineticJs中不起作用

我正在尝试使用html5 img标记将多个图像加载到画布上. 和图像是可替换的.例如,有5个图像列表图像也是可拖动的并且单击特定图像替换上一个上传的图像,我面临的问题是,当我上传一个新元素时,它会出现在其他元素之上.并点击底部元素,我希望它移动到顶部并拖动.我试图使用kineticjs函

javascript – 在调整大小时使KineticJS阶段变宽或更新阶段

我创建了一个小型KineticJS动画,你可以在这个地址看到： http://sandbox-ben.kimbiaservices.com/kineticjs/index.html 我想找到一种方法,让这个动画始终设置为窗口宽度的100％. (它将是另一个元素的“背景”区域.) 我可以通过将jQuery中的宽度设置为$(window).width()来做初始设置(可

javascript – KineticJS – Shape.setPosition();

我在使用KineticJS时遇到了一些麻烦. 从我的fiddle中可以看到,我能够访问我的drop事件中的Shape对象(框),以获取x,y坐标,并且我正在对它们执行数学运算以获得我想要的新坐标’捕捉’形状,但我无法弄清楚如何设置位置和重绘框. 文档很稀疏,充其量： http://www.kineticjs.com/api-docs

javascript – 将AngularJS与KineticJS一起使用

我们如何使用AngularJS将(双向)KineticJS对象绑定到某些数据？ 例如,将Kinetic Shape的位置绑定到变量或文本框. 我已经想出如何在没有AngularJS的情况下做到这一点：(使用KineticJS和jQuery) box.on('dragmove', function() { $('#pos_x').val( myShape.getX() ); $('#pos_y'

javascript – 在Retina iPad上改进慢画布动画 – KineticJS

我正在使用KineticJS来执行HTML Canvas动画.动画可以在所有桌面浏览器和非视网膜iDevices(包括iPad mini)上完美运行.但是,从视网膜设备(浏览器或使用appcelerator的应用内网页视图),这些动画非常缓慢.我在视网膜显示屏上看过类似帆布动画的问题,但没有找到任何真正的解决方案. 我

javascript – Kinetic.js：防止可拖动的舞台走出界限

我正在尝试制作一个平移和缩放画布,用作游戏中的小地图.我已经将舞台设置为可拖动,因此玩家可以使用鼠标移动,以及在舞台的各个层上移动单个对象.但是,我不希望能够将舞台拖入周围的空白区域.换句话说,我只想在放大时允许平移,这样你就不会遇到那个空白区域.为了尝试约束舞台,我设

javascript – 使用KineticJS移动形状

Here is a jsfiddle,具有应在鼠标拖动事件上移动的形状.我可以在javascript控制台中看到,使用适当的值调用shape.move(),但形状不会移动. 为什么形状不移动？解决方法:调用stage.draw()后,形状会移动.

javascript – 沿固定角度“向外”移动矢量

我已经搜索了这个问题的答案并尝试了许多提议的解决方案,但似乎都没有.我一直在努力解决这个问题,所以非常感谢任何见解. 我在JS画布上有3个形状(矢量,我猜),每个形状的方向表示为0度和宽度.我需要从它的方向“直接”拖出其中一个形状.这很难用语言来解释,所以请查看我创建的图形：

javascript – 在矩形笔划上单击事件

我想仅在矩形的笔划上添加click事件,并避免在矩形内部单击. 以下是代码： var stage = new Kinetic.Stage({ container: 'container', width: 578, height: 200 }); var layer = new Kinetic.Layer(); var rect = new Kinetic.Rect({ x: 239, y: 7

javascript – 在KineticJS中检测阶段上的点击而不是形状

在KineticJS中,如何检测单击事件,其中单击发生在对象/形状之外？ 我试图让一个Rect在用户点击它时将其比例改为2,当用户点击它之外的任何地方时返回到1的比例. JSfiddle：http://jsfiddle.net/ABTAD/8/ 管理以检测舞台上的点击,但点击Rect也会触发点击处理程序!!!不知怎的,.setScale(1)

javascript – KineticJS：Group vs. Layer

尽管我有最好的Google-fu,但在主教程或KineticJS文档中没有明确说明组和层之间的区别. Kinetic的“Getting Started”页面解决了这个问题 – 它提到图层有特殊的渲染器,虽然我不太明白这意味着什么.群体没有这些渲染器吗？组不在图层内吗？是什么使层(或组)不仅仅是一组父节点到组织/转