arbor.js自定义每个节点的形状
arbor.js自定义每个节点的形状
提问于 2012-02-23 22:21:08
以下代码在html5画布上绘制egg图像
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
});在此之前，非常感谢您。
回答 1
Stack Overflow用户
回答已采纳
发布于 2012-02-24 04:29:17
因此，打开包含在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，如示例中所述。
编辑
好了，完成了。将整个块替换为以下内容：
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();
})
正如您所看到的，它们不是居中的，但希望这能为如何继续提供足够的理想。:)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/9414832
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号