使用konvajs的自定义形状不可拖动

Question

我正在使用 konvajs 绘制自定义形状，并且渲染效果很好。但是，当我尝试拖动它时，它不可拖动。

请找到代码链接。

自定义形状不可拖动

请为我指明正确的方向。

谢谢你。

Answer 1

在 Konva.js 中，通常最好避免直接在

stroke()

中使用

sceneFunc

。相反，请使用

fillStrokeShape

函数来一致地处理渲染。

在 Konva.js 中绘制具有多条曲线或直线的自定义形状时，必须遵循逻辑顺序。例如，如果您想绘制两条由线连接的相反方向的曲线，请确保路径从第一条曲线开始，沿着连接线，向后绘制第二条曲线，最后闭合形状以进行正确填充。

var shape = new Konva.Shape({
  sceneFunc: function(context) {
    context.beginPath();

    // Draw the first Bezier curve
    context.moveTo(start1.x, start1.y);
    context.bezierCurveTo(control1.x, control1.y, control2.x, control2.y, end1.x, end1.y);

    // Draw a line down to the second curve's starting point
    context.lineTo(end2.x, end2.y);

    // Draw the second Bezier curve backwards
    context.bezierCurveTo(control4.x, control4.y, control3.x, control3.y, start2.x, start2.y);

    // Connect back to the starting point to close the shape
    context.lineTo(start1.x, start1.y);

    // Close the path and fill/stroke the shape
    context.closePath();
    context.fillStrokeShape(shape);
  },
  fill: '#00D2FF',
  strokeWidth: 4,
  stroke: 'black',
});