[英]Add middle point handles on selection bounding rectangle for a selected shape
在 paperjs 中选择形状时,例如使用以下代码:
var p = new Shape.Circle(new Point(200, 200), 100)
p.strokeColor = 'black';
p.bounds.selected = true;
如何像在带有中间手柄的图片边框中一样轻松地在边框边的中间添加手柄?
Path
边界矩形每条边的中点已经存储在:
p.bounds.topCenter
p.bounds.bottomCenter
p.bounds.leftCenter
p.bounds.rightCenter
因此,在这些点上创建形状变得相当简单:
var p = new Shape.Circle(new Point(200, 200), 100)
p.strokeColor = 'black';
p.bounds.selected = true;
[
p.bounds.topCenter,
p.bounds.bottomCenter,
p.bounds.leftCenter,
p.bounds.rightCenter
].forEach(function(midpoint) {
var handle = new Path.Rectangle(new Rectangle(midpoint.subtract(5), 10));
handle.fillColor = '#1A9FE9';
})
这是代码的草图。
当您执行以下item.selected = true
时,您无法更改 Paper.js 绘制的默认选择边界矩形: item.selected = true
。 每次要选择某些内容时,都必须自己绘制它们。
在这种情况下,我通常会写一个函数来为我选择形状; 该函数还将绘制我的自定义边界矩形。
例如:
var p = new Shape.Circle(new Point(200, 200), 100)
p.strokeColor = 'black';
function selectItem(item) {
item.selected = true;
[
item.bounds.topCenter,
item.bounds.bottomCenter,
item.bounds.leftCenter,
item.bounds.rightCenter
].forEach(function(midpoint) {
var handle = new Path.Rectangle(new Rectangle(midpoint.subtract(5), 10));
handle.fillColor = '#1A9FE9';
})
}
selectItem(p)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.