##

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <script src="js/fabric.1.7.22.js"></script>

    <script src="js/jquery-1.9.1.min.js"></script>

</head>

<body>

    <canvas id="c" width="500" height="500"></canvas>

    <button id="discard">Group定位</button>

    <script>

        var canvas = new fabric.Canvas('c');

        var h = 50;

        var w = 100;

        var body = new fabric.Rect({ width: w, height: h, fill: '#f55', top: 15, left: 50 });

        var port = new fabric.Rect({ width: 20, height: 30, fill: 'yellow', top: 15, left: 50 + w - 10 });

        var group = new fabric.Group([body, port], { hasControls: false, hasBorders: false });

        group.top = 100;

        group.left = 250;

        canvas.add(group);

        group.on('mousemove', function (e) {

            var innerTarget = group._searchPossibleTargets(e.e);

            console.log(innerTarget);

        });

        group._searchPossibleTargets = function (e) {

            var pointer = this.canvas.getPointer(e, true);

            var i = 2,//简化:示例为两个对象

            normalizedPointer = this.canvas._normalizePointer(this, pointer);

            while (i--) {

                if (this.canvas._checkTarget(normalizedPointer, this._objects[i])) {

                    return this._objects[i];

                }

            }

            return null;

        }

    </script>

</body>

</html>

Group精确定位（canvas定位）的更多相关文章

  1. 承载地图的div如果隐藏再显示，则定位时会定位到页面左上角

    承载地图的div如果隐藏再显示,则定位时会定位到页面左上角. 解决方法:不隐藏,改变div的高度.在div上利用z-index加一个新的不透明的div.

  2. HTML四种定位-固定定位

    固定定位 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset=&q ...

  3. Blazor组件自做七 : 使用JS隔离制作定位/持续定位组件

    1. 运行截图 演示地址 2. 在文件夹wwwroot/lib,添加geolocation子文件夹,添加geolocation.js文件 本组件主要是调用浏览器两个API实现基于浏览器的定位功能,现代 ...

  4. CSS层定位——固定定位，相对定位，绝对定位

    主要写关于层定位的相关知识 ㈠定位概述 ⑴像图像软件中的图层一样可以对每一个layer能够精确定位操作 ⑵层定位的position属性决定了当前的一个网页元素,可以叠加到另一个网页元素上面,那么我们把 ...

  5. android定位GPS定位 代码实现

    package com.lx.util;   import android.content.Context; import android.content.SharedPreferences; imp ...

  6. iOS定位 - 普通定位(没有地图) - 反地理编码(得到具体位置)

    #import <CoreLocation/CoreLocation.h> 使用到的头文件 要引入CoreLocation这个包 <CLLocationManagerDelegate ...

  7. Wi-Fi定位,AP定位

    Wi-Fi实时定位系统 基于Wi-Fi的无线局域网实时定位系统(Wi-Fi RTLS)结合无线局域网络(WLAN).射频识别(RFID)和实时定位等多种技术,广泛地应用在有无线局域网覆盖的区域,实现复 ...

  8. 元素定位-XPATH定位方法总结

    1.Xpath定位方法探讨 xpath是比较常用的一种定位元素的方式,因为它很方便,缺点是,消耗系统性能.如果Xpath使用的比较好,几乎可以定位到任何页面元素,而且受页面变化影响较小. 1.1.什么 ...

  9. Android系统中是否开启定位及定位模式的判断

    1.关于Android系统中不同的定位模式 Android系统中包括3中定位模式:   使用GPS.WLAN和移动网络 使用WLAN和移动网络 仅使用GPS 截图 特点 同时使用GPS.WIFI及基站 ...

随机推荐

  1. position的absolute与fixed，absolute与relative共同点与不同点

    absolute与fixed 共同点: (1) 改变行内元素的呈现方式,display被置为block: (2) 让元素脱离普通流,不占据空间: (3) 默认会覆盖到非定位元素上 不同点: absol ...

  2. ios简单国际化

    1.在PROJECT中Info得Localizations中添加语言 2.新建Localizable.strings(一定是这个文件名),在右侧属性栏的Localization中勾选出你需要的语言 3 ...

  3. python bisect 排序模块 二分查找与 bisect 模块

    python 3.6.5 import bisect bisect_list=dir(bisect)print(bisect_list)bisect_list = ['__builtins__', ' ...

  4. c# usercontrol 用户自定义控件无法显示在工具箱的解决办法

    由于最开始x86平台,后来换成anyCPU 重新编译也没有删除x86目录下的dll ,也没重新生成 费x86 下的dll , 导致工具箱无法找到目录下的dll 无法加载自定义控件 右击工具栏中的内容选 ...

  5. PAT 1060 爱丁顿数（25）（STL-multiset+思路）

    1060 爱丁顿数(25 分) 英国天文学家爱丁顿很喜欢骑车.据说他为了炫耀自己的骑车功力,还定义了一个"爱丁顿数" E ,即满足有 E 天骑车超过 E 英里的最大整数 E.据说爱 ...

  6. 05. pt-diskstats

    pt-diskstats --devices-regex=sda --interval=1 --iterations=3 --show-timestamps #ts device rd_s rd_av ...

  7. LibreOJ #6013. 「网络流 24 题」负载平衡 最小费用最大流 供应平衡问题

    #6013. 「网络流 24 题」负载平衡 内存限制:256 MiB时间限制:1000 ms标准输入输出 题目类型:传统评测方式:文本比较 上传者: 匿名 提交提交记录统计讨论测试数据   题目描述 ...

  8. vim删除单词

    参考资料: https://blog.csdn.net/grey_csdn/article/details/72355735 混迹于Windows.Linux以及Mac,选择加强自己的VIM水平应该不 ...

  9. 异步Servlet和异步过虑器

    异步处理功能可以节约容器线程.此功能的作用是释放正在等待完成的线程,是该线程能够被另一请求所使用. 要编写支持异步处理的 Servlet 或者过虑器,需要设置 asyncSupported 属性为 t ...

  10. java如何实现发邮件功能。

    http://blog.sina.com.cn/s/blog_59ca2c2a01013800.html http://www.cnblogs.com/xdp-gacl/p/4216311.html