-1
我试图找出是否可能绘制包含在fabric.js(http://fabricjs.com/quadratic-curve)中的二次曲线函数的双线(如附加图像)。有人知道这是可能的或已经做到了吗? 感谢使用fabric.js绘制带有二次曲线的双线
我试图找出是否可能绘制包含在fabric.js(http://fabricjs.com/quadratic-curve)中的二次曲线函数的双线(如附加图像)。有人知道这是可能的或已经做到了吗? 感谢使用fabric.js绘制带有二次曲线的双线
如果你有兴趣的视觉效果而已,检查此双重渲染解决方案。
var canvas = this.__canvas = new fabric.Canvas('c');
fabric.Object.prototype.originX = fabric.Object.prototype.originY = 'center';
canvas.on({
'object:selected': onObjectSelected,
'object:moving': onObjectMoving,
'before:selection:cleared': onBeforeSelectionCleared,
'after:render': rerender
});
(function drawQuadratic() {
var line = new fabric.Path('M 65 0 Q 100, 100, 200, 0', { fill: '', stroke: 'black', strokeWidth: 6 });
line.path[0][1] = 100;
line.path[0][2] = 100;
line.path[1][1] = 200;
line.path[1][2] = 200;
line.path[1][3] = 300;
line.path[1][4] = 100;
line.selectable = false;
canvas.add(line);
var p1 = makeCurvePoint(200, 200, null, line, null)
p1.name = "p1";
canvas.add(p1);
var p0 = makeCurveCircle(100, 100, line, p1, null);
p0.name = "p0";
canvas.add(p0);
var p2 = makeCurveCircle(300, 100, null, p1, line);
p2.name = "p2";
canvas.add(p2);
})();
function makeCurveCircle(left, top, line1, line2, line3) {
var c = new fabric.Circle({
left: left,
top: top,
strokeWidth: 5,
radius: 12,
fill: '#fff',
stroke: '#666'
});
c.hasBorders = c.hasControls = false;
c.line1 = line1;
c.line2 = line2;
c.line3 = line3;
return c;
}
function makeCurvePoint(left, top, line1, line2, line3) {
var c = new fabric.Circle({
left: left,
top: top,
strokeWidth: 8,
radius: 14,
fill: '#fff',
stroke: '#666'
});
c.hasBorders = c.hasControls = false;
c.line1 = line1;
c.line2 = line2;
c.line3 = line3;
return c;
}
function onObjectSelected(e) {
var activeObject = e.target;
if (activeObject.name == "p0" || activeObject.name == "p2") {
activeObject.line2.animate('opacity', '1', {
duration: 200,
onChange: canvas.renderAll.bind(canvas),
});
activeObject.line2.selectable = true;
}
}
function onBeforeSelectionCleared(e) {
var activeObject = e.target;
if (activeObject.name == "p0" || activeObject.name == "p2") {
activeObject.line2.animate('opacity', '0', {
duration: 200,
onChange: canvas.renderAll.bind(canvas),
});
activeObject.line2.selectable = false;
}
else if (activeObject.name == "p1") {
activeObject.animate('opacity', '0', {
duration: 200,
onChange: canvas.renderAll.bind(canvas),
});
activeObject.selectable = false;
}
}
function rerender() {
var line = canvas.getObjects()[0];
line.stroke = 'white';
line.strokeWidth = 4;
line.render(canvas.contextContainer);
line.stroke = 'black';
line.strokeWidth = 6;
}
function onObjectMoving(e) {
if (e.target.name == "p0" || e.target.name == "p2") {
var p = e.target;
if (p.line1) {
p.line1.path[0][1] = p.left;
p.line1.path[0][2] = p.top;
}
else if (p.line3) {
p.line3.path[1][3] = p.left;
p.line3.path[1][4] = p.top;
}
}
else if (e.target.name == "p1") {
var p = e.target;
if (p.line2) {
p.line2.path[1][1] = p.left;
p.line2.path[1][2] = p.top;
}
}
else if (e.target.name == "p0" || e.target.name == "p2") {
var p = e.target;
p.line1 && p.line1.set({ 'x2': p.left, 'y2': p.top });
p.line2 && p.line2.set({ 'x1': p.left, 'y1': p.top });
p.line3 && p.line3.set({ 'x1': p.left, 'y1': p.top });
p.line4 && p.line4.set({ 'x1': p.left, 'y1': p.top });
}
}
<script src="https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id='c' width='500' height='500' ></canvas>
肯定。找到连接2个圆圈中心点的线。然后在该线的端点找到垂直线。沿距离n的垂线向外走(你选择n的值)。这一点是Q1端点。在距离n的垂直线上向外出发。这一点是Q2端点。对连接线的另一端点做相同的操作以获得其他Q1和Q2端点。在连接线的任何地方找到垂线。走出距离m(你选m)。那是Q1的ctrl pt。在垂线上继续另一个n。这是Q2的ctrl pt – markE
你已经做到了?你能告诉我一个例子吗? – user3572384