|
|
相关文章推荐
|
叛逆的花生 · Android studio源码-阿里云· 4 月前 · |
|
|
温柔的煎鸡蛋 · c++ - std::pair<U,V> ...· 12 月前 · |
|
|
宽容的野马 · 用户 'NT ...· 12 月前 · |
|
|
魁梧的眼镜 · 使用 Azure 容器应用生成和部署 ...· 1 年前 · |
|
|
正直的冲锋衣 · 微信深色模式为什么要把图片变暗？ - 知乎· 1 年前 · |
我试图动态地向path对象添加点。当我这样做，路径呈现正确，但边界矩形从来没有得到更新，使用户几乎不可能选择和移动路径在画布上。
正如您在下面的代码中所看到的，路径最初是用一个点创建的，然后我动态地添加了第二个点和一个控制点。完成此操作后，边框将不会更新：
var canvas = new fabric.Canvas('c');
canvas.backgroundColor = '#f5f5f5';
var path = new fabric.Path('M 0 20',{
left: 100,
top: 100,
stroke: 'black',
fill: ''
canvas.add(path);
var commandArray = [];
commandArray[0] = 'Q';
commandArray[1] = 50;
commandArray[2] = 100;
commandArray[3] = 100;
commandArray[4] = 20;
path.path[1] = commandArray;
canvas.renderAll();
我也试着打电话给
path.setCoords()
，但这并没有什么区别。在向路径添加点后，如何获得边界矩形以更新其维度？
5 个回答
高票数
最新
Stack Overflow用户
修改于2015-03-13 13:44
得票数
4
请注意，到目前为止，捏造不支持点滴加点。为了使它正常工作，您可以像正在做的那样添加点，然后在每次添加点数时使用内部方法
path._parseDimensions()
，并希望更新边界框维度。
var dims = path._parseDimensions();
path.setWidth(dims.width);
path.setHeight(dims.height);
path.pathOffset.x = path.width/2;
path.pathOffset.y = path.height/2;
path.setCoords();看这个更新的小提琴，有必要的代码来解决你的问题。我希望它适用于每一种情况。
Stack Overflow用户
回答于2015-03-13 22:20
已采纳
得票数
4
结果变得更复杂了。如果将一个点添加到导致
_parseDimensions
返回负
left
值的路径中，则路径将跳过屏幕。对于我的用例，在添加和操作点时，我需要路径保持不变。这把小提琴展示了我的工作解决方案：
http://jsfiddle.net/flyingL123/8763bx2q/8/
如果您在打开JS控制台的情况下运行它，您将看到脚本在每个附加点被添加或当前点被操作之后暂停。在这种情况下，您将看到路径不会沿着画布移动，这是所需的行为。在所有断点完成后，您将看到曲线在其选择框中居中。
如果有更简单的方法来实现这种行为，我很想知道。
下面是我用来设置尺寸的函数，以防小提琴链接消失：
function updateDims() {
var dims = path._parseDimensions(),
prevDims = path.prevDims || {},
leftDiff = dims.left - (prevDims.left || 0),
topDiff = dims.top - (prevDims.top || 0);
path.setWidth(dims.width);
path.setHeight(dims.height);
if (dims.left < 0) {
path.pathOffset.x = path.width/2 + dims.left;
path.left = path.left + leftDiff;
} else {
path.pathOffset.x = path.width/2;
if (dims.top < 0) {
path.pathOffset.y = path.height/2 + dims.top;
path.top = path.top + topDiff;
} else {
path.pathOffset.y = path.height/2;
path.prevDims = dims;
path.setCoords();
}
Stack Overflow用户
修改于2019-07-09 12:46
得票数
2
我找不到任何新方法来做这件事。但我想出了如下所示；
- 创建一个带有修改的SVG路径字符串。
- 创建一个新的fabric path对象。
- 用新path对象的属性替换原始path对象的路径、宽度、高度和pathOffset属性。
- setCoords。renderAll等..。
这可能不太有效。但这是我的解决办法。
var pathObject = new fabric.Path("M0,0 L100,100 ~ Z");
var updatedPath = new fabric.Path("M50,100 L120,46 ~ Z");
pathObject.set({
path : updatedPath.path,
width : updatedPath.width,
height : updatedPath.height,
pathOffset: updatedPath.pathOffset
pathObject.setCoords();在我的设置中，它说 path._parseDimensions不是函数 。我没有试图解决这个问题。我必须改变所有的路径内容。因此，我的解决方案似乎更适合我:)