个人中心
gpt4 book ai didi

javascript - arbor.js 自定义每个节点的形状

转载 作者：行者123 更新时间：2023-11-30 10:44:02 32 4
gpt4 key购买 nike

以下代码绘制了 egg 的图像在 html5 Canvas 上

function init() {

  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");

  draw(ctx);
}

function draw(ctx) {

  // layer1/Path
  ctx.save();
  ctx.beginPath();
  ctx.moveTo(100.0, 90.0);
  ctx.bezierCurveTo(100.0, 95.5, 95.5, 100.0, 90.0, 100.0);
  ctx.lineTo(10.0, 100.0);
  ctx.bezierCurveTo(4.5, 100.0, 0.0, 95.5, 0.0, 90.0);
  ctx.lineTo(0.0, 10.0);
  ctx.bezierCurveTo(0.0, 4.5, 4.5, 0.0, 10.0, 0.0);
  ctx.lineTo(90.0, 0.0);
  ctx.bezierCurveTo(95.5, 0.0, 100.0, 4.5, 100.0, 10.0);
  ctx.lineTo(100.0, 90.0);
  ctx.closePath();
  ctx.fillStyle = "rgb(229, 229, 229)";
  ctx.fill();

  // layer1/Path
  ctx.beginPath();
  ctx.moveTo(10.0, 28.0);
  ctx.bezierCurveTo(10.0, 37.9, 18.1, 46.0, 28.0, 46.0);
  ctx.bezierCurveTo(37.9, 46.0, 46.0, 37.9, 46.0, 28.0);
  ctx.bezierCurveTo(46.0, 18.1, 37.9, 10.0, 28.0, 10.0);
  ctx.bezierCurveTo(18.1, 10.0, 10.0, 18.1, 10.0, 28.0);
  ctx.closePath();
  ctx.fillStyle = "rgb(255, 191, 30)";
  ctx.fill();
  ctx.restore();
}
<body onload="init()">
  <canvas id="canvas" width="100" height="100"></canvas>
</body>

我试图让 arbor.js 将鸡蛋显示为一个节点，我还将展示其他插图，例如交互式餐厅菜单的培根和面包。它应该进入每个节点，我相信？但不太确定如何。

particleSystem.eachNode(function(node, pt){
          // node: {mass:#, p:{x,y}, name:"", data:{}}
          // pt:   {x:#, y:#}  node position in screen coords


          // determine the box size and round off the coords if we'll be 
          // drawing a text label (awful alignment jitter otherwise...)
          var w = ctx.measureText(node.data.label||"").width + 6
          var label = node.data.label
          if (!(label||"").match(/^[ \t]*$/)){
            pt.x = Math.floor(pt.x)
            pt.y = Math.floor(pt.y)
          }else{
            label = null
          }

          // clear any edges below the text label
          // ctx.fillStyle = 'rgba(255,255,255,.6)'
          // ctx.fillRect(pt.x-w/2, pt.y-7, w,14)


          ctx.clearRect(pt.x-w/2, pt.y-7, w,14)



          // draw the text
          if (label){
            ctx.font = "bold 11px Arial"
            ctx.textAlign = "center"

            // if (node.data.region) ctx.fillStyle = palette[node.data.region]
            // else ctx.fillStyle = "#888888"
            ctx.fillStyle = "#888888"

            // ctx.fillText(label||"", pt.x, pt.y+4)
            ctx.fillText(label||"", pt.x, pt.y+4)
          }
        })          
      },

      resize:function(){
        var w = $(window).width(),
            h = $(window).height();
        canvas.width = w; canvas.height = h // resize the canvas element to fill the screen
        particleSystem.screenSize(w,h) // inform the system so it can map coords for us
        that.redraw()
      },

        initMouseHandling:function(){
        // no-nonsense drag and drop (thanks springy.js)
        selected = null;
        nearest = null;
        var dragged = null;
        var oldmass = 1

        $(canvas).mousedown(function(e){
            var pos = $(this).offset();
            var p = {x:e.pageX-pos.left, y:e.pageY-pos.top}
            selected = nearest = dragged = particleSystem.nearest(p);

            if (selected.node !== null){
            // dragged.node.tempMass = 10000
            dragged.node.fixed = true
            }
            return false
        });

非常感谢。

最佳答案

因此，打开 arbor 0.92 附带的示例项目。在 main.js 中，找到附加到 eachNode 的匿名函数:

particleSystem.eachNode(function(node, pt){
  // node: {mass:#, p:{x,y}, name:"", data:{}}
  // pt:   {x:#, y:#}  node position in screen coords

  // draw a rectangle centered at pt
  var w = 20
  ctx.fillStyle = (node.data.alone) ? "orange" : "black"
  ctx.fillRect(pt.x-w/2, pt.y-w/2, w/2,w)
})

这是我们需要用您的“蛋”代码替换的部分。问题是您不能直接将绘图函数放入其中，因为它使用的是绝对 坐标，而我们需要使用相对于节点渲染位置的坐标。本质上，您需要修改 draw(ctx) 函数中的每个调用以使用 pt.x 和 pt.y，如所述在示例中。

编辑

好的，完成了。用这个替换整个 block :

    particleSystem.eachNode(function(node, pt){
      // node: {mass:#, p:{x,y}, name:"", data:{}}
      // pt:   {x:#, y:#}  node position in screen coords

      // draw a rectangle centered at pt

            ctx.beginPath();
  ctx.moveTo(100.0 + pt.x, 90.0 + pt.y);
  ctx.bezierCurveTo(100.0 + pt.x, 95.5 + pt.y, 95.5 + pt.x, 100.0 + pt.y, 90.0 + pt.x, 100.0 + pt.y);
  ctx.lineTo(10.0 + pt.x, 100.0 + pt.y);
  ctx.bezierCurveTo(4.5 + pt.x, 100.0 + pt.y, 0.0 + pt.x, 95.5 + pt.y, 0.0 + pt.x, 90.0 + pt.y);
  ctx.lineTo(0.0 + pt.x, 10.0 + pt.y);
  ctx.bezierCurveTo(0.0 + pt.x, 4.5 + pt.y, 4.5 + pt.x, 0.0 + pt.y, 10.0 + pt.x, 0.0 + pt.y);
  ctx.lineTo(90.0 + pt.x, 0.0 + pt.y);
  ctx.bezierCurveTo(95.5 + pt.x, 0.0 + pt.y, 100.0 + pt.x, 4.5 + pt.y, 100.0 + pt.x, 10.0 + pt.y);
  ctx.lineTo(100.0 + pt.x, 90.0 + pt.y);
  ctx.closePath();
  ctx.fillStyle = "rgb(229, 229, 229)";
  ctx.fill();

  // layer1/Path
  ctx.beginPath();
  ctx.moveTo(10.0 + pt.x, 28.0 + pt.y);
  ctx.bezierCurveTo(10.0 + pt.x, 37.9 + pt.y, 18.1 + pt.x, 46.0 + pt.y, 28.0 + pt.x, 46.0 + pt.y);
  ctx.bezierCurveTo(37.9 + pt.x, 46.0 + pt.y, 46.0 + pt.x, 37.9 + pt.y, 46.0 + pt.x, 28.0 + pt.y);
  ctx.bezierCurveTo(46.0 + pt.x, 18.1 + pt.y, 37.9 + pt.x, 10.0 + pt.y, 28.0 + pt.x, 10.0 + pt.y);
  ctx.bezierCurveTo(18.1 + pt.x, 10.0 + pt.y, 10.0 + pt.x, 18.1 + pt.y, 10.0 + pt.x, 28.0 + pt.y);
  ctx.closePath();
  ctx.fillStyle = "rgb(255, 191, 30)";
  ctx.fill();
    })

enter image description here

它们并不像您所看到的那样居中，但希望这能为如何继续提供足够的理想。 :)

关于javascript - arbor.js 自定义每个节点的形状，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9414832/

32 4 0
文章推荐： swift | UIViewController 不显示为弹出窗口而是全屏显示
文章推荐： swift - 如何在不使用 UIActivityViewController 的情况下为 Airdrop 共享创建自定义 UI？
文章推荐： swift - UICollectionView header 中的标题无法正确显示
文章推荐： swift - 如何切掉 UIButton 的角，而不是圆角？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com