- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试将 JointJS 与端口功能一起使用:
(...)
var model = joint.shapes.devs.Model({
size: { width: width, height: height },
label: node.label,
inPorts: node.inputPorts,
outPorts: node.outputPorts,
attrs: {
'.label': { text: node.label, 'ref-x': .4, 'ref-y': .2 },
rect: { fill: '#2ECC71' },
'.inPorts circle': { fill: '#16A085' },
'.outPorts circle': { fill: '#E74C3C' }
}
(...)
但是输入端口出现在左边,输出端口出现在右边。我想要顶部的输入端口和底部的输出端口。
使用 joint.shapes.devs.Model 将端口位置更改为 Top-Bottom 的最佳方法是什么?
提前致谢。
最佳答案
端口的位置在 devs.Model.prototype.getPortAttrs
中计算。您可以做的只是交换 x
和 y
端口坐标,如下例所示。
joint.shapes.devs.Model = joint.shapes.basic.Generic.extend(_.extend({}, joint.shapes.basic.PortsModelInterface, {
markup: '<g class="rotatable"><g class="scalable"><rect class="body"/></g><text class="label"/><g class="inPorts"/><g class="outPorts"/></g>',
portMarkup: '<g class="port port<%= id %>"><circle class="port-body"/><text class="port-label"/></g>',
defaults: joint.util.deepSupplement({
type: 'devs.Model',
size: { width: 1, height: 1 },
inPorts: [],
outPorts: [],
attrs: {
'.': { magnet: false },
'.body': {
width: 150, height: 250,
stroke: 'black'
},
'.port-body': {
r: 10,
magnet: true,
stroke: 'black'
},
text: {
fill: 'black',
'pointer-events': 'none'
},
'.label': { text: 'Model', 'ref-x': 10, 'ref-y': .2, 'ref': '.body' },
// CHANGED: find better positions for port labels
'.inPorts .port-label': { dy:-30, x: 4 },
'.outPorts .port-label':{ dy: 15, x: 4 }
//
}
}, joint.shapes.basic.Generic.prototype.defaults),
getPortAttrs: function(portName, index, total, selector, type) {
var attrs = {};
var portClass = 'port' + index;
var portSelector = selector + '>.' + portClass;
var portLabelSelector = portSelector + '>.port-label';
var portBodySelector = portSelector + '>.port-body';
attrs[portLabelSelector] = { text: portName };
attrs[portBodySelector] = { port: { id: portName || _.uniqueId(type) , type: type } };
// CHANGED: swap x and y ports coordinates ('ref-y' => 'ref-x')
attrs[portSelector] = { ref: '.body', 'ref-x': (index + 0.5) * (1 / total) };
// ('ref-dx' => 'ref-dy')
if (selector === '.outPorts') { attrs[portSelector]['ref-dy'] = 0; }
//
return attrs;
}
}));
JS fiddle :http://jsfiddle.net/kumilingus/L2f73cbf/
更新:
这是一个如何使用 JointJS v1.0.1+
实现相同功能的示例。
不再需要使用 PortsModelInterface
扩展类。端口 API 现在由 joint.dia.Element
实现,即可以轻松地使用端口丰富任意元素。
var shape = new joint.shapes.devs.Model({
inPorts: ['in1', 'in2'],
outPorts: ['out1', 'out2'],
ports: {
groups: {
'in': { position: 'top'},
'out': { position: 'bottom' }
}
}
});
JSFiddle:http://jsfiddle.net/kumilingus/trk63agg/
有关更多信息,请参阅文档:
关于JointJs 顶部底部端口,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25001487/
我想知道两者都可以 UnicastRemoteObject.exportObject(Remote,portNo) & LocateRegistry.createRegistry(portNo); p
我有一个运行 tomcat 8.0.23 和 apache httpd 服务器的 vps。在 tomcat 中我有 3 个项目让我们用下面的名字来调用它们: /firstpro /secondpro
我试图将非 SSL 端口 8080 上的流量重定向到 SSL 端口 8443(在 Jboss 4.2.3.GA 版本上),但它不起作用。当我在此端口上访问我的 web 应用程序时,它会停留在该端口上并
跟进: Possible to query the native inbox of a mobile from J2ME? 我怎么知道Kannel将 SMS 发送到 native 收件箱端口(我想是端
我想用 python 开发一个代码,它将在本地主机中打开一个端口并将日志发送到该端口。日志只是 python 文件的命令输出。 喜欢: hello.py i = 0 while True:
我的 tomcat 在我的 linux 机器上独立运行在端口 7778 上。我已经将 apache 配置为在端口 443 上的 ssl 上运行。 我的 httpd.conf 如下: Liste
我正在使用 React Native 作为我想要部署到 iOS 和 Android 的头像生成器。我正在为我的服务器使用 Express,它使用 localhost:3000,react native
我正在使用主板(MSI Gaming主板)和两个支持NIC卡的e1000e驱动程序构建自定义操作系统。我想使用NIC卡中的端口而不是板载端口。 为了禁用板载端口,我尝试使用 70-persistanc
我目前使用的是xampp 1.7.0,我的php版本是5.2.8 我将我的 php.ini 文件更改为: [mail function] ; For Win32 only. SMTP = smtp.g
我有以下代码来配置 Jetty 服务器: @Configuration public class RedirectHttpToHttpsOnJetty2Config { @Bean p
我使用 Ubuntu 使用 Certbot 生成了一个 SSL。这已经自动更新了我的 Nginx 配置文件并添加了一个额外的监听端口。我担心我是否只需要监听一个端口(80 或 443)而不是两个端口,
我被困在一个点,我必须调用 pentaho API 来验证来自 reactJS 应用程序的用户。两者都在我的本地机器上。到目前为止我尝试过的事情: a) 在 reactJS 配置文件 - packag
我的 native 项目在 android 模拟器上运行 但是每当我尝试将我的项目与我的 android 设备连接时,就会出现上述错误。 注意:我的手机和笔记本电脑使用相同的 wifi 连接。 请帮我
我正在运行 Elasticsearch 服务器。除了 9200/9300 端口外,Elasticsearch 还开放了很多端口,如下所示。 elasticsearch-service-x64.exe
<portType> 元素是最重要的 WSDL 元素 <portType>可描述一个 web service、可被执行的操作,以及相关的消息 我们可以把 <portT
Stack Overflow 的其他地方有一个关于让 Icecast 出现在端口 80 上的问题,我已经阅读了该问题,但仍然无法让我的服务器在端口 80 上工作。 我的 icecast.xml 有这些
如果这是一个简单的问题,我很抱歉,我对这种事情不熟悉。 我正在尝试确定我的代理服务器 ip 和端口号,以便使用 google 日历同步程序。我使用谷歌浏览器下载了 proxy.pac 文件。最后一行是
我想知道 cassnadra 是否对所有 JMX 连接/节点间通信使用 7199 端口?与早期版本一样,7199 仅用于初始握手,但后来它使用随机选择 1024-65355 端口之间的任何端口。 谢谢
在docker hub中,有一个容器,该容器在启动时会默认打开9000端口。可以通过传递环境变量server__port来覆盖该端口。 我正在尝试在dockerfile中传递Heroku $ PORT
我已经在互联网上公开的虚拟机中安装了 docker。我已经在 VM 的 docker 容器中安装了 mongodb。Mongodb 正在监听 27017港口。 我已经使用以下步骤安装 docker
我是一名优秀的程序员,十分优秀!