如何使用raphael.js绘制每个角都有控制点的多边形
How to draw a polygon with control point for each corner using raphael.js
如何使用raphae.js.在多边形的每个角落绘制一个带有控制点的多边形
控制点应该是可拖动的,当控制点移动时,相关线也应该移动。你知道吗??
这里有一种方法。首先为每个控制点画一个圆圈,如下所示:
// 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");
接下来,我们需要以这样一种方式连接控制点,即如果更新,线将自动重新绘制。在这个问题中,有一个方便的函数可以做到这一点,我在这里复制了它,并根据我们的需要稍作修改(它现在监听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);
将所有这些放在一起会生成一个具有可拖动顶点和边的多边形,这些顶点和边会随着顶点的拖动而更新。
你可以在这里看到它的一个例子
我一直在寻找同样的东西。它不像前面的答案那样可以拖动,但多边形创建代码非常简单:
http://davidbau.com/javascript/learn/10-polygon.html
相关文章:
- JS编译器/包管理器,用于版本控制
- 是否可以控制获取哪些Google地图脚本(JavaScript API)
- 三星智能电视应用程序;Brightcove示例应用程序远程控制问题
- SVG/JavaScript:尝试选择和更改多边形点
- 如何控制组件'的createContent函数被激发
- 节点协同与生成器和Promise并行流量控制
- 否'访问控制允许来源'标头存在于IISNOde中请求的资源(AngularJS+NodeJs)上
- 使用:new Image()控制加载html.src=html_URL
- 传单缩放控制位置错误
- 如何获取谷歌地图多边形的当前fillColor
- Node.js使用Series函数(模式?)实现流控制时出现意外结果
- 如果类不是一个选项,如何在使用 jQuery 时控制(避免)嵌套 html 元素的样式
- 如何在OpenLayers中获取动态绘制的多边形的坐标
- 使用jQuery控制来自图像的音频
- CORS:否'访问控制允许来源'header-但是php设置头文件
- "访问控制允许起源”;通过javascript从http页面调用同一网站的httpsurl时出现问题
- 为什么可以't我将检索到的文档分配给控制台中的变量
- CORS:访问控制允许原点不等于提供的原点
- javascript window.open将无法在Chrome控制台上工作
- 使用Google Maps API驱动时间多边形