javascript - 在kineticJS中检测单个对象上的放置事件-6ren

javascript - 在kineticJS中检测单个对象上的放置事件

转载作者：行者123 更新时间：2023-12-03 12:05:12

25

4

主要思想

根据以下练习创建匹配，右侧点为拖动，左侧点为目标。

enter image description here

红点可拖动并放置在蓝点上。

目标

每个点都有一个与之相关的值，此外，一旦红点落在蓝点上，就不能再将其他红点放置在同一个蓝点上。

方法

将每个蓝点的坐标存储在数组中，一旦将红点放置在蓝点附近，与该点相关的信息就会从数组中删除(从而使其不可见)。

问题

如何检测每个红点的放置事件，大多数在线解决方案建议即使在 shape 上也有一个 .on。但是，我应该如何唯一地识别哪一个呢？

资源

JSFiddle:http://jsfiddle.net/wLcxchfv/1/

最佳答案

这是检测红色圆圈放置事件并测试它们是否与蓝色圆圈相交的一种方法。

在定义每个蓝色圆圈时分配name:'blue'(动力学“名称”就像CSS“类”):
名称:'蓝色'
监听所有红色圆圈上的拖放:
anyRedCircle.on('dragend',function(){});
获取所有蓝色圆圈:
stage.find(".blue")

测试这个红色圆圈是否落在其中一个蓝色圆圈上:

// fetch all circles with name=='blue' and feed them into a function 
stage.find(".blue").each(function(b){
    // b is a blue circle
    var dx=this.x()-b.x();
    var dy=this.y()-b.y();
    if(dx*dx+dy*dy<radius*radius){
        // this red circle was dropped on this blue circle
    }
});

});

示例代码和演示: http://jsfiddle.net/m1erickson/apdohmcm/

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Prototype</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.1.min.js"></script>
<style>
body{padding:20px;}
#container{
  border:solid 1px #ccc;
  margin-top: 10px;
  width:350px;
  height:350px;
}
</style>        
<script>
$(function(){

    var stage = new Kinetic.Stage({
        container: 'container',
        width: 350,
        height: 350
    });
    var layer = new Kinetic.Layer();
    stage.add(layer);

    var radius=10;
    var $last=$("#lastHit");

    for(var i=0;i<5;i++){
        makeCirclePair(30,i*30+40,150,i*30+40,(i+1)*10);
    }


    function makeCirclePair(redX,redY,blueX,blueY,value){
        var blue=makeCircle(blueX,blueY,'blue',false,value);
        var red=makeCircle(redX,redY,'red',true,0);
        red.on('dragend',function(){
            var red=this;
            var rx=this.x();
            var ry=this.y();
            stage.find(".blue").each(function(b){
                var dx=rx-b.x();
                var dy=ry-b.y();
                if(dx*dx+dy*dy<radius*radius){
                    b.name('gold');
                    b.fill('gold');
                    red.hide();
                    $last.text("Last covered circle had value="+b.value);
                }
            });
            layer.draw();
        });
        red.target=blue;
        var text=new Kinetic.Text({
            x:blueX+20,
            y:blueY-5,
            text:value,
            fill:'black',
        });
        layer.add(text);
        layer.draw();
    }


    function makeCircle(x,y,color,isDraggable,value){
        var circle = new Kinetic.Circle({
            name:color,
            x:x,
            y:y,
            radius:radius,
            fill:color,
            stroke: 'black',
            strokeWidth:2,
            draggable:isDraggable
        });
        circle.value=value;
        layer.add(circle);
        return(circle);
    }


}); // end $(function(){});

</script>       
</head>
<body>
    <h4 id=lastHit>Drag red to blue.</h4>
    <div id="container"></div>
</body>
</html>

关于javascript - 在kineticJS中检测单个对象上的放置事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25217595/

25

4

0

文章推荐： javascript - 如何将参数传递给链式 Promise 回调

文章推荐： image-processing - 为什么imagemagick的字体列表是空的？

文章推荐： scala - 如何从 Scala 的集合中获取随机元素

kineticjs - KineticJS 可以采用什么类型的颜色？
似乎缺乏关于 KineticJS 中 Color 是什么的文档(如果我错了，请告诉我) 到目前为止，我通过反复试验发现，我实际上可以将以下内容传递给 setFill 类中的 Shape 之类的函数:
kineticjs - 如何应用 KineticJS 过滤器？
我发现 KineticJS 过滤器文档非常令人沮丧，无法在网上找到示例，尤其是考虑到亮度。 kinetic.filters 文档 link提及 Kinetic.Filters.Brighten(ima
kineticjs - 在 KineticJS 中使用变换矩阵
我有一个用 Box2Dweb 模拟的 body 和一个附着在 body 上的图像。我想采用 body 变换矩阵并将变换应用于图像(用变换绘制图像)，使其在屏幕上的位置和方向(相对)与 body 的位置
kineticjs - 如何使用 KineticJS 绘制动画 gif
我需要用 KineticJS 绘制动画 gif，但是，当我按照 image tutorial 时，我失败了.有什么方法可以画gif动画吗？最佳答案使用 KineticJS Sprite。动画 G
kineticjs - 有没有办法在 Kinetic.Text (KineticJS) 中设置字体粗细？
有没有办法在 KineticJS 的 Text 对象中设置字体粗细？这里是示例代码: var myText = new Kinetic.Text( { x: 350, y:
javascript - 使用 mousemove 绘制形状，使用 kineticjs 拖放和调整大小- KineticJS
我正在使用 KineticJS 开发一个简单的绘画程序。我要实现的是用鼠标移动绘制一个矩形、直线或圆形，绘制的形状可以通过鼠标拖动或调整大小。我的问题是，我必须使用 mousedown 和 mouse
javascript - KineticJS:如何将 SVG Sprite 与 KineticJS Sprite 一起使用？
我有一个 SVG Sprite ，其架构如下: Image Image Image Image Image Image Image Image Image 其中 Image 是图像，所有九个图像都
KineticJS:根据百分比设置宽度
我正在尝试 KineticJS 并查看此示例: var stage = new Kinetic.Stage({ container: 'container', width: 500, he
kineticjs - 不同浏览器上帧速率数的差异
突然，一个简单的动画在 Chrome(大约 30fps)和 firefox(大约 7fps)中具有不同的帧速率。这是正确的行为吗？我可以在动画函数中调整 framRate 吗？最佳答案试试这个 /
kineticjs - 如何从组中完全删除一个矩形？
我想实现一个函数，它将一个组和一个矩形作为参数，并检查该矩形是否属于该组。如果它属于组，我想从组和图层中完全删除该矩形。我尝试了 group.remove() 和 group.getChildren(
KineticJS:没有形状的阴影？
在 KinectJS ，如何创建阴影(即边缘模糊的半透明形状)而不绘制“转换”它的形状？一开始我以为可以让形状投下阴影，但将形状本身的不透明度设置为零。像这样: var rect = new Kin
resize - Kineticjs 如何在舞台上居中图像并根据浏览器调整大小
我正在向舞台添加一个图像作为背景图像和一个矩形。如何确保矩形在舞台上居中并且背景会根据浏览器调整大小？ var stage = new Kinetic.Stage({ container: 'c
image - KineticJS 鼠标悬停在图像上
我正在尝试更改鼠标悬停在图像上的鼠标指针，这是我的脚本: var sc = new Kinetic.Layer(); var sCirc
canvas - KineticJS - 连续应用多个变换
我正在使用 KineticJS 来允许用户操作他们的图像——裁剪、旋转、缩放、翻转等。当我对图像应用任何变换时，效果很好。但是当我应用第二个变换时，它作用于原始的、未变换的图像，而不是我的新图像。
javascript - Kineticjs:如何使用kineticjs使用钢笔工具？
我想使用使用kineticjs的钢笔工具(如photoshop)，我不知道如何实现这一目标。可不可以？如果可能的话请帮助我找出解决方案。我正在使用kinetic-v5.0.1.min.js和kin
javascript - KineticJs - 将图像合并到另一个图像上
我想知道 Kinetic 中是否有某种方法可以将图像与较低层上的另一个图像合并，从而根据“裁剪”图像的形状创建一种裁剪效果。因此图像必须具有透明背景，这对我来说是困难的主要来源。否则我只会使用关闭拖
javascript - KineticJs 鼠标移动错误
我一直在尝试在 KineticJs 阶段的“mousemove”上返回鼠标位置。我的想法是在舞台对象上添加 jQuery 事件处理程序... 我遇到了一个问题，但是有一个错误...... 未捕获类型错
javascript - KineticJS:如何缓存一组形状？
我想提高 Canvas 对象的移动拖放性能。我有一个包含不同形状(图像、星星、记录...)的组。我想使用缓存来提高拖放或旋转整个组时的性能。这是我创建的 JSFiddle:http://jsfidd
javascript - Kineticjs 复杂图像裁剪
我试图模仿这个 other's Stackoverflow canvas clipping function在 KineticJS 中具有可拖动图像的附加功能，但我无法完成它。 fiddle :htt
javascript - KineticJS:应用过滤器后图像没有描边
使用 KineticJS 5.1.0 我有一个带有描边的 KineticJS 图像。我想对此图像应用滤镜。缓存并应用过滤器后，笔划消失了。 Here is a JSFiddle和我的演示代码: var

首页

博学

6Ren·AI

商城

javascript - 在kineticJS中检测单个对象上的放置事件

主要思想

目标

方法

问题

资源