- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
如何使用 raphael.js 在多边形的每个 Angular 绘制一个带有控制点的多边形。
控制点应该是可拖动的,当控制点移动时,相关的线也应该移动。有什么想法吗??
最佳答案
这是执行此操作的一种方法。首先为每个控制点画一个圆,像这样:
// Creates canvas
var paper = Raphael("canvas1", "100%", "100%");
// create small circle for each polygon point
var p1 = paper.circle(150, 50, 5).attr("fill", "blue");
var p2 = paper.circle(200, 100, 5).attr("fill", "blue");
var p3 = paper.circle(200, 200, 5).attr("fill", "blue");
var p4 = paper.circle(100, 200, 5).attr("fill", "blue");
var p5 = paper.circle(100, 100, 5).attr("fill", "blue");
接下来我们需要连接控制点,使线条在更新时自动重绘。在 this question 中有一个方便的功能可以做到这一点,我在这里复制了它,稍作修改以满足我们的需要(它现在监听 drag
事件,接受线属性作为参数并修复我在对原始问题的评论中指出的错误) :
// Modified from: https://stackoverflow.com/questions/9956186/raphael-js-maintain-path-between-two-objects
// Call paper.connect(obj1,obj2,attributes)
// That draws a line between the two objects and maintains the line when the objects are animated
Raphael.fn.connect = function(obj1, obj2, attribs) {
// list of paths each object has
if (!obj1.connections) obj1.connections = []
if (!obj2.connections) obj2.connections = []
// get the bounding box of each object
var box1 = obj1.getBBox()
var box2 = obj2.getBBox()
// create a line/path from object 1 to object 2
var p = this.path("M" + (box1.x + box1.width / 2) + ","
+ (box1.y + box1.height / 2) + "L" + (box2.x + box2.width / 2)
+ "," + (box2.y + box2.height / 2))
// adjust attributes of the path
p.attr(attribs)
// set the start and end element for this path
p.startElement = obj1;
p.endElement = obj2;
// add the path to each of the object
obj1.connections.push(p)
obj2.connections.push(p)
// mark each object as being connected
obj1.connected = true;
obj2.connected = true;
// listen for the Raphael frame event
eve.on("raphael.drag.*", function(obj) {
// if the object the frame event is fired on is connected
if (this.connected) {
// for each connection on this object
for ( var c in this.connections) {
var path = this.connections[c]; // temp path
var b1 = path.startElement.getBBox(); // get the current
// location of start
// element
var b2 = path.endElement.getBBox();// get the current location
// of end element
// move the path to the new locations
path.attr({
path : "M " + (b1.x + b1.width / 2) + " "
+ (b1.y + b1.height / 2) + "L "
+ (b2.x + b2.width / 2) + " "
+ (b2.y + b2.height / 2),
opacity : Math.max(path.startElement.attr('opacity'),
path.endElement.attr('opacity'))
});
}
}
});
}
使用这个函数我们现在可以连接相邻的控制点。
// connect adjacent polygon points
paper.connect(p1,p2,{stroke:"red"});
paper.connect(p2,p3,{stroke:"red"});
paper.connect(p3,p4,{stroke:"red"});
paper.connect(p4,p5,{stroke:"red"});
paper.connect(p5,p1,{stroke:"red"});
接下来我们想让我们的控制点可以拖动。我们可以这样做:
// make points draggable
var start = function () {
this.ox = this.attr("cx");
this.oy = this.attr("cy");
},
move = function (dx, dy) {
this.attr({cx: this.ox + dx, cy: this.oy + dy});
},
up = function () {};
paper.set(p1,p2,p3,p4,p5).drag(move, start, up);
将所有这些放在一起将为您提供一个具有可拖动顶点和边的多边形,这些边会随着顶点被拖动而更新。
您可以看到一个实际的例子 here
关于javascript - 如何使用 raphael.js 为每个 Angular 绘制带控制点的多边形,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18122072/
我正在尝试在项目中学习和添加 Angular 国际化。我只能理解 Angular 文档 (https://angular.io/guide/i18n-overview) 的编译时翻译。 我需要这样的东
在我的 Angular 应用程序中,基于登录用户,我想通过显示/隐藏不同的菜单项或允许/禁止某些路由来授予或限制功能。 目前成功登录后,我的 .NET Core API 会返回一个 JWT token
我是 Angular 的新手,目前我已经看过 angular.io 网站提供的一些示例。但是在component decorator在文档中的解释,它指出 Angular components are
这里是service employee-service.service.ts的代码 import { Injectable } from '@angular/core'; import { HttpC
我目前正在使用@angular/http URLSearchParams 类来检索 URL 参数。在 Angular 5 中,注意到这已被弃用,但我没有看到以我当前使用的方式替换 URLSearchP
我目前正在使用@angular/http URLSearchParams 类来检索 URL 参数。在 Angular 5 中,注意到这已被弃用,但我没有看到以我当前使用的方式替换 URLSearchP
如何正确安装 PUG/JADE 到 Angular 2 或更高版本 这样在工作和 AOT 和 JiT 的同时 工作单元和集成测试 并且在创建每个新组件时不会受到太多影响 最佳答案 我看到了很多解决方案
我的 Angular 12 应用程序中有一些通用组件,我计划将其创建为一个 Angular 库,以便其他应用程序也可以使用它。我们有一些应用程序在较低版本的 angular(例如 angular 8/
tl;dr; ng build 删除了包含我编译的自定义库的/dist 文件夹。这会使我项目代码中对该库的所有引用无效,从而导致 ng build 最终失败。我做错了什么? 我关注了documenta
我正在将一些“遗留”(非 typescript )js 库导入到我的 Angular SPA 中。 通常我只是从 cdn 添加一个负载到 index.html 就像: 在 Angular 分量中我只
我有这个 angular 应用程序,它基本上使用了库的概念。 我有 2 个名为 的库Lib1 和 lib2 根据他们所服务的微服务分组。 现在我将这些库导入主应用程序,即 应用1 事情一直到现在。 现
我在我的项目中启用了 angular Universal。我现在想完全删除它。我试图删除以下文件 /server.ts /webpack.server.config.js /src/tsconfig.
我已经有一个 AuthService 在登录时对用户进行身份验证,并且 AuthGuard 在未登录的情况下阻止访问。 某些页面我通过 UserProfile/Role 限制访问,但现在我需要阻止页面
我正在尝试使用 angular、TypeORM、SQLite 和其他组件作为 webpack 构建 Electron 应用程序。 我从在 GitHub 上找到的示例开始我的开发:https://git
我在从 Angular 8 更新到 9 并运行时遇到以下错误 ng 更新@angular/material: Package "@angular/flex-layout" has an incompa
我正在尝试使用 Angular 9,我想创建一个项目,然后创建一个库项目并开始向其中添加我想稍后在 GitHub 上发布的通用模块,并在我的本地使用这些库项目。 相关依赖如下: Angular CLI
我正在尝试使用 Angular 9,我想创建一个项目,然后创建一个库项目并开始向其中添加我想稍后在 GitHub 上发布的通用模块,并在我的本地使用这些库项目。 相关依赖如下: Angular CLI
我正在我的 h1 元素“之前”创建一个小的程式化三 Angular 形图案,但我无法正确地圆 Angular 。右上角没问题,但其他两个有剪裁问题。 这是输出以及形状的放大图像: 使用的代码如下: h
我有一个 Angular 元素,带有自定义标记名 - fancy-button。如何将 fancy-button 嵌入 Angular 应用程序? 我已经尝试了以下方法,但都没有用 - 在 index
我已将我的项目从 angular 5.2.9 升级到 angular 6.0.0-rc.5。 除了包路径中的几个快速 RxJS 修复外,一切看起来都不错。(此链接非常有用:Want to upgrad
我是一名优秀的程序员,十分优秀!