相关疑难解决方法(0)

我必须在路径上移动小矩形.在画布内单击后,矩形会移动.

我无法为它设置动画,因为对象只是跳到所需的点.

请在小提琴上找到代码.

HTML

<canvas id="myCanvas" width=578 height=200></canvas>

CSS

#myCanvas {
    width:578px;
    height:200px;
    border:2px thin;
}

JavaScript的

var myRectangle = {
    x: 100,
    y: 20,
    width: 25,
    height: 10,
    borderWidth: 1
};

$(document).ready(function () {
    $('#myCanvas').css("border", "2px solid black");
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');
    var cntxt = canvas.getContext('2d');
    drawPath(context);
    drawRect(myRectangle, cntxt);

    $('#myCanvas').click(function () {
        function animate(myRectangle, canvas, cntxt, startTime) {
            var time = (new Date()).getTime() - startTime;
            var linearSpeed = 10;
            var newX = Math.round(Math.sqrt((100 …

链接到我的代码笔在这里

我想知道如何让画布点以更流畅,更液体的方式移动.

我已经尝试限制一定数量的渲染(draw())的方向,这已经改善了一点!但它仍然缺乏流动性,只是僵硬和"硬编码".

此switch语句是方向设置的方式,可以传递随机整数或前一个方向.

 switch (direction) {
                    case 1:
                      star.x--;
                      break;
                    case 2:
                      star.x++;
                      break;
                    case 3:
                      star.y--;
                      break;
                    case 4:
                      star.y++;
                      break;
                    case 5:
                      star.y--;
                      star.x--;
                      break;
                    case 6:
                      star.y--;
                      star.x++;
                      break;
                    case 7:
                      star.y++;
                      star.x++;
                      break;
                    case 8:
                      star.y++;
                      star.x--;
                      break;
}

谢谢!

如果找到新用户或现有用户有新连接,我想在每个AJAX请求上更新我的画布.

我有他们之间的用户和连接:

 var data=[
           {
              "Id": 38,
               "Connections":[39,40],
               "Name":"ABc"
          },
           {
              "Id": 39,
               "Connections":[40],
               "Name":"pqr"
           },
           {
               "Id": 40,
               "Connections":[],
               "Name":"lmn"
           }]

在上面的示例中,用户Id:38已连接到user 39 and 40并且user 39 is connected to user 40 and user 40已连接到user 39 and user 38 so user 40 Connection array is blank.

我有一个Web服务,我将每1-2秒触发一次,以显示此页面上新加入的用户以及我存储在我的表中的现有用户之间的新连接,此Web服务将获取所有用户及其连接.

所以首先我的页面会加载,但之后我的页面将不会刷新,新的用户应该显示,新的连接应该与AJAX调用连接到我的Web服务.

但是随着ajax请求,一切都搞砸了.这是我创建的JSBin.

输出我得到:

我只有4个用户和3个连接,你可以在我的JSBin输出中看到它应该只有4个矩形,我不是添加更多的用户,但仍然得到这个混乱的输出.

源代码参考:参考小提琴

我试图获得输出,如上面的小提琴,但没有得到.

预期输出:4个带动画的矩形

更新了Js bin Demo:更新了JSBin

使用上面更新的JSBin我得到这个输出,但他们没有移动(动画不工作):

到目前为止，平滑线上的线程都不是正确的。

如何使用javascript HTML5画布通过N个点绘制平滑曲线？

在画布中平滑用户绘制的线条

两者都会导致锯齿状线条。平滑我的意思是使用 x,y 点作为控制点来使线条平滑。这条线不需要经过这些点。它只需要在给定 n 个点的情况下绘制一条平滑的线。

基本上我正在记录每个线段，然后当用户将鼠标悬停时，它会平滑线条。

我已经使用 bezierCurveTo 尝试了我自己的方法，但这只会平滑其他点，然后连接点仍然很粗糙。互联网似乎认为我在寻找什么叫做 B-Spline 曲线。我尝试将线性代数矩阵应用于该问题，但我失败了，哈哈。

这是我能得到的最好的曲线，（图片）。红色的线是“平滑”的线，你可以看到它平滑每隔一个点，但不是连续的。这是使用来自的代码

如何使用javascript HTML5画布通过N个点绘制平滑曲线？

我的代码做同样的事情

http://www.square-bracket.com/images/smoothlines.png

谢谢你的帮助！

我想绘制任何(随机)曲线,给定:

• 起点
• 终点
• 曲线长度

我怎么能做这样的东西限制画布边界,加上曲线不能交叉.我试图找到一些解决方案,但我无法弄明白.谢谢你的时间.

以下是我想要完成的更详细的视图:

这是在画布上绘制的二次曲线.一切都好.问题是,如何在没有所有点的情况下绘制这个,只需要以像素为单位的固定长度,随机点,以画布大小和非交叉为界.

代码看起来像这样:

function fixedCurve( A, B, length ){
    for(int i = A; i < B; i++){
        //Calculate random point with propper distance to get first base point, random direction could be calculated before loop.
        //Basicly this loop should calculate integrate of the curve and draw it each step.
    }
}

d3.line(data)返回路径数据字符串。但是，如果我理解正确，d3.line(data).context(context)直接在画布上画线。如何获取用于在画布上绘制线条的点数组？

并且，是否可以d3.line().curve()通过传递所需点的数量来改变线的精度？

这是我想要实现的目标：

makeACurvedLine([p1, p2, p3], 6)

并从平滑线中获取6个点的坐标数组。

实现它的最佳方法是什么？

我需要使用本机 Javascript 绘制并获取每个步骤的贝塞尔曲线的坐标，而不需要 ctx.bezierCurveTo 方法。

我尝试了下面的方法，但它不能正常工作。这里我附上了我的代码和输出曲线。

const accuracy = 0.01; let temp = 4;

 function draw(event) {
      if (!isDrawing) { return; }
      points.push({ x: event.clientX, y: event.clientY });    
      let count = 0;
      if(points.length === temp) {
      ctx.beginPath();
      ctx.moveTo(points[points.length - 4].x, points[points.length - 4].y)
      for (let i = 0; i <= 1; i += accuracy) {
        const p = bezier2(i, points[points.length - 4], points[points.length - 3] , 
        points[points.length - 2], points[points.length-1]);
        ctx.lineTo(p.x,p.y)
      }
     temp += 3
     ctx.stroke();
     ctx.closePath();
    }
  }

function …

给定一条由多个点组成的线，如何通过添加中间点使线更平滑/更弯曲/更柔和——同时保持原始点完整且不变？

为了说明这一点，我想在此图中从上图转到下图：

请注意，在上图中，如果我们从底部开始，将会有一个更急的右转。然而，在底部图像中，通过添加位于两个点中间的中间点并使用其他线的角度的平均值，使这种急速右转变得“更柔和”一些。（换句话来说，想象一下赛车行驶的路线，因为它不能突然改变方向。）但是请注意，没有一个原始点被“触及”，我只是添加了更多点。

谢谢！！无论如何，我使用 JavaScript 和 Canvas 来实现它。

我正在寻找一种从二进制图像（只有黑色和白色像素）创建类似 svg 的路径的方法。图像本身将是一个形状不规则的斑点，其中可能有孔。

如果没有洞，我只需要一个边界路径来重新创建斑点的边界。当斑点中有洞时，我可以使用额外的路径（我猜，单独一条路径无法重新创建它）。最后我只需要知道哪条路径是外部路径，哪些是洞。

我已经找到了这些：

• 如何在 JavaScript 画布中向透明 PNG 图像添加描边/轮廓
• 从图像边缘创建路径
• 如何找到二维矩阵中的空洞？

另外我需要检测漏洞。结果是多边形还是路径对我来说并不重要。我只需要精度足够高的点，使曲线保持弯曲:)

如果有人有一个想法甚至一些进一步的来源，那就太好了。

PS：如果这有什么区别的话，我正在使用canvas和javascript（fabricJS）。