KineticJS安卓平台的尺寸
确定kineticjs阶段我这样去: var stage = new Kinetic.Stage({ container: 'container', width: 320, height: 480 }); 因此,阶段的宽度和高度为固定尺寸. 如果分辨率不同,如何将其拉伸到手机屏幕上? 解决方案 好吧,这确实是一个JavaScript问题.您想使舞台的大小与窗口大小相同.这对我的Android项目有用: var stage = new Kinetic.Stage({ container: 'container', width: window.innerWidth, height: window.innerHeight }); 编辑: 此外,我也建议您还添加jQuery,以便您可以检查方向更改,然后您可以执行以下操作: window.onresize = function(event)
0 2024-02-07
编程技术问答社区
安卓4+html5画布不重绘
我目前正在使用PhoneGap开发Android应用程序.我有一个我正在绘制和动画对象的HTML5画布.它在Android 2.3上效果很好,但是在Android 4+上,它并没有重新绘制画布.我尝试使用kinetic.js和easel.js/tween.js进行动画,而没有清除这两个库都不清除画布的问题.我取得了一些成功,并在画布上隐藏了一个div,但它并非一直工作.我只能假设这是一个Android 4+特定的错误或某种类型的功能,可以增强HTML5 Canvas性能. 有人知道我可以更改某些设置还是可以在Android 4或JavaScript中调用的方法,这可以使我在动画期间强制我的HTML5画布的重新绘制? 还应注意,这些动画似乎可以与4.1 Google API模拟器(Canvas Clears and Redraws)中的Easel.js/tween.js一起使用,但在运行4.1.1的电话上不使用. 我已经对正在发生的事情进行了一些进一步的研究.从本质上讲,
0 2024-01-31
编程技术问答社区
如何使 Canvas 中的选择框选择它所接触的任何对象,而不仅仅是它所包围的对象?
有一个很棒的教程以下JavaScript代码表示算法: var pos = rectSel.getAbsolutePosition(); //get the extents of the selection box var selRecXStart = parseInt(pos.x); var selRecXEnd = parseInt(pos.x) + parseInt(rectSel.attrs.width); var selRecYStart = parseInt(pos.y); var selRecYEnd = parseInt(pos.y) + parseInt(rectSel.attrs.height); //get the extents of the group to compare to var grpXStart = parseInt(grp.attrs.x); var grpXEnd = parseInt(grp.attrs.x) +
0 2024-01-23
编程技术问答社区
在Javascript中获取动态图像的屏幕坐标?
我正在编写一个应用程序,并使用Kinetic JS库从客户端的计算机上加载图像.该图像包含在照片对象中,并以下如下 初始化 var photoObj = new Image(); photoObj.onload = function() { var photoImage = new Kinetic.Image({ x: 0, y: 0, image: photoObj, width: photoObj.width, height: photoObj.height, name: "photo", id: "photo" }); photoGroup.removeChildren(); photoGroup.a
0 2024-01-17
编程技术问答社区
我可以#39;使用kineticjs添加新层后,编辑层上的文本
我已经做了这个 http://jsfiddle.net.net/62wjc/5/5/在一层更改文字,但这是静态的.现在,我为动态添加字段 +添加图层 +变更图层制作脚本. 我的脚本具有三个功能,其中是: 函数CreateTxt用于创建元素,并使用kineticjs创建图层. 函数fRField删除元素 函数ChangeTxt用于图层上的更改文本. 这是我的脚本: $(document).ready(function() { var nwValue = []; var nwLayer = {}; var nwTxt = {}; var tulisan = 'Your text here'; var con = $('#idEditor'); var cW = con.width(); var cH = con.height(); var stage = new Kinetic.Stage({
2 2024-01-17
编程技术问答社区
从工具条上拖放多个图片到画布上
我正在制作一个应用程序,用户可以将多个对象从工具栏拖动到画布上.将特定对象拖动到画布上后用户可以在画布中移动该对象.将使它消失. http://jsfiddle.net/gkefk/26/ 要从工具栏上拖动多个对象,我在函数dragdrop() 中添加了以下添加 var image2 = new Kinetic.Image({ name: data, id: "image"+(imageCount++), x: x, y: y, image2: theImage2, draggable: true }); image2.on('dblclick', function() { image2.remove(); layer.draw(); }); layer.add(image2); layer.draw(); var image3 = new Kinetic.Image({ name: data,
4 2024-01-17
编程技术问答社区
KineticJS-用鼠标自由绘画
我正在构建一个帆布涂料工具,其中的用途只是将鼠标拖到画布上.据我了解,这是工作的最佳方法.因此,在鼠标向下时,我会创建一个kineticjs线对象,当用户拖动时,我在最后一个鼠标位置和电流之间添加一个点.注意,我只有一个有多个点的行对象. 当用户发布鼠标时,线路完成,每当您再次单击以绘制更多绘制时,我都会创建一个新的行对象. 问题是,如果您要绘制文本,请说"我的名字是x",它将导致许多行对象,每个字符1(对于" x"和" i"). 有更好的方法吗?我的想法是只有一个线对象,而您的想法只是您根本不会添加上一个位置中的一行,然后当您拖动时.但是我不认为Kineticjs线支持. 基本上,我可以改善用户绘制的方式吗? 解决方案 您目前的设计定义一个字母的1-2个多数是可以的. 画布和动力学都可以在性能落后之前支持整个字符的段落. 如果您想要一个整个句子的单个定义,则可以使用自定义kinetic.shape. 使用形状,您可以完全访问包裹的帆布上下文
2 2024-01-17
编程技术问答社区
Jquery Image Lens-Kinetic JS图像ID
我试图在动力学JS帆布上使用jQuery Imager镜头 myImage.onload = function () { var yoda = new Kinetic.Image({ x: 0, y: 0, image: myImage, width: 400, height: 400, id: 'thumb' }); layer.add(yoda); layer.draw(); }; myImage.src = 'http://www.html5canvastutorials.com/demos/assets/yoda.jpg'; $('#thumb').imageLens({ lensSize: 200 }); 没有运气,感谢您的建议,谢谢. 解决方案 在尝试时使用kineticjs和Imagelens是不合适的.非常不同的技术. 所以您有这样的方法: 不要使用kineticjs.仅与DOM图像一起工作. 将kineticjs对象转换为图像 http://
2 2024-01-17
编程技术问答社区
KineticJS中的限制性/比例性缩放
当拖动图像的4个角手柄中的任何一个时,图像应按比例向上或向下缩放. 问题:在我当前的尝试中,如下所示的JSFiddle所示,当topLeft手柄垂直拖动时,图像会按比例地重新缩放,但另一个则处理闪烁.当水平拖动相同的topLeft手柄时,图像简单地移动而无需调整大小. 如何使用kineticjs实施比例缩放?谢谢!!! jsfiddle: http://jsfiddle.net/zb3km/ P> 解决方案 通过此.... MATH/ALGORITHM FIT图像以筛选保留纵横比 我得到了这个..... function update(group, activeAnchor) { var topLeft = group.get(".topLeft")[0]; var topRight = group.get(".topRight")[0]; var bottomRight = group.get(".bottom
0 2024-01-16
编程技术问答社区
使用jquery draggable UI与kineticJs使元素扣在网格上?
我是新手 我已经使用kinetic.js实施了拖放操作 我在HTML中有一些图像,并且将它们传递到JavaScript函数并使它们可拖动..有两组图像. 现在,我想让它们彼此靠近. 我是jQuery的新手,所以我不知道如何将动力学JS图像变量传递到通过IMG ID标签的jQuery操作中. 另外,我无法弄清楚在哪里放置jQuery函数以及如何放置.. 这是代码. 有人请帮忙.. canvas { border: 1px solid #9C9898; } #img { position:absolute; left:700px;
0 2024-01-16
编程技术问答社区
HTML5画布-保存和恢复拖放画布状态
使用此 js js小提琴在所有不同的画布之间创建画布并拖放图像. var next = 4 function addCanvas() { // create a new canvas element var newCanvas = document.createElement("canvas"); newCanvas.id = "addedcanvases" + next; //added this to give each new canvas a unique id next++; newCanvas.width = canvasWidth; newCanvas.height = canvasHeight; // add a context for the new canvas to the contexts[] array contexts
0 2024-01-16
编程技术问答社区
KineticJS:右键点击火力点
我正在使用kineticjs,我正在定义这样的矩形事件 this.rect.on('click tap', function(){ foo(); }); 当我左键单击时,也可以在右键单击时发射该事件.我如何避免使用右键单击发射此事件? (我不能禁用页面中的右键单击,因为如果我右键单击,我想打开上下文菜单) 谢谢 解决方案 您需要右鼠标右键单击 this.rect.on('click tap', function(e){ // 1:left, 2: middle, 3: right, for IE 8, e.button != 2 if (e.which != 3) { foo(); } }
2 2024-01-15
编程技术问答社区
使用KineticJS对鼠标移动时的形状进行重新着色
我有一个帆布,它可以容纳中等至大量的形状(50-500). 我成功地绘制了我想要使用这些工具的形状的轮廓: function DrawPolygon(diagramLayer, polygon) { var diagramImage = new Kinetic.Shape(function () { var context = this.getContext(); context.beginPath(); context.lineWidth = 1; context.strokeStyle = "#ff0000"; var lastVertice = polygon.Vertices[polygon.Vertices.length - 1]; context.moveTo(lastVertice.X, lastVertice.Y); for (var
0 2024-01-14
编程技术问答社区
创建矢量和碰撞
我有一个球和棍子(用于台球比赛). 首先,球放在桌子的位置.单击球时,棍子出现了,以使我们可以通过单击球来确定棍子的角度(单击时,我们确定鼠标与球中心的角度球). 所以现在的棍子也在桌子中.现在,我只沿着该角度拖动棍子,如果以另一个角度拖动的角度,它比初始角度返回false. 在阻力端,我正在计算棍子移动的距离,棍子返回到触摸球的初始位置.然后,我试图就棍子的角度和棍棒移动的距离移动球. 球在这里移动,但在其中任何一个方面都没有移动.这已经成为我的问题,我更新了小提琴strikerGroup.on('dragend', function () { var strikerLastPos = strikerGroup.getAbsolutePosition(); strikerGroup.setPosition(initStrikerGrpX, initStrikerGrpY); striker.speedX = striker.speedY = 2; var str
0 2024-01-12
编程技术问答社区
用jQuery拖动页面滚动
我尝试使用kinetic.js和以下代码,但是当我在IE11中尝试时,每次滚动时都会一直跳到顶部: $("html").kinetic(); 我想在平板电脑和IE10和11上滚动页面,以便用户可以像在移动设备上一样向下滚动页面向下滚动. 我该如何在纯js或jQuery中进行此操作,而不会跳到顶部? 解决方案 您可以通过单击时记录鼠标的位置以及被拖动时的当前位置来完成此操作.尝试以下操作: var clicked = false, clickY; $(document).on({ 'mousemove': function(e) { clicked && updateScrollPos(e); }, 'mousedown': function(e) { clicked = true; clickY = e.pageY; }, 'mouseup': function() {
2 2024-01-11
编程技术问答社区
使用Kineticjs拖动和缩放文本
我正在尝试缩放和泛滥的文本,该文本已经可以拖动了.所有示例都在图像或形状上,看来我无法将其调整为文本对象.我的问题是: 我是否必须使用锚或更简单的方法来缩放文本? 我找到了一个有关缩放形状和代码崩溃的示例: var layer = new Kinetic.Layer({ drawFunc : drawTriangle //drawTriangle is a function defined already }); 在创建图层时,我们可以调用功能吗? 我通常会创建一个图层,然后在其中添加功能的结果. 任何想法都会很棒,谢谢. 解决方案 我想到了您可以做到这一点的多种方法,但这是我最终实施的方法: jsfiddle "> jsfiddle 基本上,您有一个锚点(不一定总是在那里,如果愿意,您可以隐藏并显示它.让我知道您是否需要帮助),如果您将锚拖下锚固量会增加,它会增加fontSize,如果将锚向上拖动,则降低了fontSize.
2 2023-12-26
编程技术问答社区
用KineticJS缩放一个组
这是我有的结构 Layer: ParentGroup: -Kinetic Image -ChildGroup - Kinetic rectangle - Kinetic Text 在我的动力学图像(从服务器中检索)上,有一个有趣的区域.该感兴趣的区域由矩形(这里的动力学矩形)显示.我在该区域内写了一些标签(这是动力学文本). 我想对整个组应用一些操纵.翻译还可以,但是我在变焦和旋转方面有问题.这是我的变焦功能 function zoomIn() { var scale=parentGroup.getScale(); scale.x *= zoomFactor; //zoomFactor is a global variable scale.y *= zoomFactor; parentGroup.setScale(scale); layer.dr
0 2023-12-26
编程技术问答社区
在KineticJS中缩放和平移
有没有一种方法可以使用Kineticjs放大和锅?我发现这个库 kineticjs-viewport 之所 另外,我什至对在感兴趣区域绘制矩形并放大到该特定区域的想法开放.关于如何实现这一目标有什么想法?一个JSFIDDLE示例很棒! 解决方案 您可以简单地将.setDraggable("draggable")添加到一层中,只要光标下方有一个对象,就可以将其拖动.您可以添加一个透明的大型rect,以使所有内容都可以拖动.可以通过设置图层的比例来实现变焦.在此示例中,我正在通过鼠标轮毂控制它,但这只是您要缩放的数量的功能(正缩放,负面缩放).这是代码: var stage = new Kinetic.Stage({ container: "canvas", width: 500, height: 500 }); var draggableLayer = new Kinetic.Layer(); draggableLayer.setDraggable
4 2023-11-19
编程技术问答社区