gpt4 book ai didi

javascript - 更新 fabric.Path 中的选择框

转载 作者:行者123 更新时间:2023-12-01 15:27:06 30 4
gpt4 key购买 nike

版本

3.4.0

环境信息

谷歌浏览器 | 77.0.3865.120(官方版本)(64 位)(队列:稳定)
修订 | 416d6d8013e9adb6dd33b0c12e7614ff403d1a94-refs/branch-heads/3865@{#884}
操作系统 | Windows 10 操作系统版本 1803(内部版本 17134.1099)
JavaScript | V8 7.7.299.13

测试用例

https://jsfiddle.net/areuohm/y2not8em/32/

(function(){
var canvas = new fabric.Canvas('canvasWorkspaceFamiliogram', { selection: false });
fabric.Object.prototype.originX = fabric.Object.prototype.originY = 'center';

var itemM = new fabric.Rect({width: 30,height: 30,fill: 'white',stroke: 'black',strokeWidth: 1, left:50,top:50});
var itemF = new fabric.Circle({radius: 15,fill: 'white',stroke: 'black',strokeWidth: 1,left: 400,top: 200});

itemF.relations = [];
itemM.relations = [];

canvas.add(itemM);
canvas.add(itemF);
createSVGPath(itemF,itemM,canvas);
canvas.renderAll();

}());
function createSVGPath(startObj, endObj, context){
var svgCommands = [
[ 'L', startObj.left, startObj.top],
[ 'V', startObj.top + 50],
[ 'H', endObj.left, endObj.top + 50],
[ 'V', endObj.top]
];

var line = new fabric.Path(svgCommands, {
fill: '', stroke: 'black', objectCaching: false, dirty: false,
perPixelTargetFind: true, selectable: true, hasControls: false
});

context.add(line);
let mi = svgCommands.length - 1;

startObj.relations.push({relation: line, maxIndex: mi, type:'M'});
endObj.relations.push({relation: line, maxIndex: mi, type:'Z'});

startObj.on('moving', function (e) {
this.relations.forEach((T,index) => {
if(T.type === 'M'){
T.relation.path[0][1] = e.target.left;
T.relation.path[0][2] = e.target.top;
}
});
context.requestRenderAll();
});

endObj.on('moving', function (e) {
this.relations.forEach((T,index) => {
if(T.type === 'Z'){
T.relation.path[T.maxIndex - 1][1] = e.target.left;
T.relation.path[T.maxIndex ][1] = e.target.top;
}
});
context.requestRenderAll();
});
}
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.4.0/fabric.min.js"></script>
<canvas id="canvasWorkspaceFamiliogram" width="500" height="470" style="border:1px solid #ccc"></canvas>


重现步骤

在我创建路径的初始状态下,选择框是根据行的。但是如果我移动圆形或方形,路径行中的选择框不会更新

预期行为

¿如何刷新或更新此框?

Github 中的问题

https://github.com/fabricjs/fabric.js/issues/5928

最佳答案

您需要更新路径对象的 pathoffset 并在修改任何起点或终点后调用 setCoords。

演示

(function() {
const canvas = new fabric.Canvas('canvasWorkspaceFamiliogram', {
selection: false
});
fabric.Object.prototype.originX = fabric.Object.prototype.originY = 'center';

const itemM = new fabric.Rect({
width: 30,
height: 30,
fill: 'white',
stroke: 'black',
strokeWidth: 1,
left: 50,
top: 50
});
const itemF = new fabric.Circle({
radius: 15,
fill: 'white',
stroke: 'black',
strokeWidth: 1,
left: 400,
top: 200
});

itemF.relations = [];
itemM.relations = [];

canvas.add(itemM);
canvas.add(itemF);
createSVGPath(itemF, itemM, canvas);
canvas.renderAll();

}());

function createSVGPath(startObj, endObj, context) {
const svgCommands = [
['L', startObj.left, startObj.top],
['V', startObj.top + 50],
['H', endObj.left, endObj.top + 50],
['V', endObj.top]
];

const line = new fabric.Path(svgCommands, {
fill: '',
stroke: 'black',
objectCaching: false,
dirty: false,
perPixelTargetFind: true,
selectable: true,
hasControls: false
});

context.add(line);
const mi = svgCommands.length - 1;

startObj.relations.push({
relation: line,
maxIndex: mi,
type: 'M'
});
endObj.relations.push({
relation: line,
maxIndex: mi,
type: 'Z'
});

startObj.on('moving', function(e) {
this.relations.forEach((T, index) => {
if (T.type === 'M') {
T.relation.path[0][1] = e.target.left;
T.relation.path[0][2] = e.target.top;
}
});
context.requestRenderAll();
});

endObj.on('moving', function(e) {
this.relations.forEach((T, index) => {
if (T.type === 'Z') {
T.relation.path[T.maxIndex - 1][1] = e.target.left;
T.relation.path[T.maxIndex][1] = e.target.top;
}
});
context.requestRenderAll();
});

startObj.on('modified', updatePath);
endObj.on('modified', updatePath);
}

function updatePath() {
this.relations.forEach((T, index) => {
const obj = T.relation;
if (obj.type === 'path') {
fabric.Polyline.prototype._setPositionDimensions.call(obj, {});
obj.setCoords();
}
})
}
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.4.0/fabric.min.js"></script>
<canvas id="canvasWorkspaceFamiliogram" width="500" height="470" style="border:1px solid #ccc"></canvas>

关于javascript - 更新 fabric.Path 中的选择框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58440350/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com