在jointjs中的样式特定端口 [英] style specific port in jointjs

问题描述

1）我正在使用JointJS图表库。我想在使用 joint.shapes.devs 时更改特定 inPort 的css。

1) I'm using JointJS diagramming lib. I want to change the css of a particular inPort when using joint.shapes.devs.

使用

source：{id：source.id，selector ：source.getPortSelector（sourcePort）}

它给我准确的源端口，但是如何应用css在这个特定端口知道它我的源连接器？有办法吗？

It's giving me accurate source port, but how to apply css on this particular port after knowing it as my source connector? Is there a way?

2）如果标签的宽度大于元素宽度，我们是否可以在元素中自动套用标签？我使用 joint.shapes.devs.Atomic 元素。

2) Can we fit/wrap the label automatically inside the element if its width is longer than the element-width? I'm using joint.shapes.devs.Atomic element(s).

$ c> foreignobject 但不知道如何使用它呢？
任何人都可以点亮它吗？

I came across foreignobject but don't know how to use it? Can anyone throw some light on it?

推荐答案

1）

myShape.attr('[port="a"]/fill', 'blue')

其中斜杠之前的第一个参数的第一部分是指向端口圆SVG元素的CSS选择器，第二个部分是要在该元素上设置的SVG属性，第二个argument是要为该属性设置的值。执行相同操作的另一种语法是：

where the first part of the first argument before slash is a CSS selector pointing to the port circle SVG element, the second part is an SVG attribute to be set on that element and the second argument is a value to be set for that attribute. An alternative syntax for doing the same thing would be:

myShape.attr({ '[port="a"]': { fill: 'blue' } })

请参阅 attr / code>方法参考详细信息： http://jointjs.com/api#

See the attr() method reference for details: http://jointjs.com/api#joint.dia.Element:attr.

2） joint.shapes.devs.Atomic 形状不会自动做到这一点。您必须创建自己的形状，并通过 foreighObject 或在JavaScript中以编程方式执行。作为使用 foreignObject 的参考，请参阅在此文件中定义的 joint.shapes.basic.TextBlock 形状： https://github.com/DavidDurman/joint/ blob / master / plugins / joint.shapes.basic.js 。

2) The joint.shapes.devs.Atomic shape does not automatically do that. You would have to create your own shape and do it there either via foreighObject or programmatically in JavaScript. As a reference for using foreignObject, please see the joint.shapes.basic.TextBlock shape that is defined in this file: https://github.com/DavidDurman/joint/blob/master/plugins/joint.shapes.basic.js.

这篇关于在jointjs中的样式特定端口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！