Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/430.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 如何在JointJS中基于浏览器修改basic.path文本属性?_Javascript_Jquery_Css_Jointjs - Fatal编程技术网

Javascript 如何在JointJS中基于浏览器修改basic.path文本属性?

Javascript 如何在JointJS中基于浏览器修改basic.path文本属性?,javascript,jquery,css,jointjs,Javascript,Jquery,Css,Jointjs,我使用JointJS库创建了一个自定义元素。使用svg生成的路径值创建元素,以形成交互式结构 当我提供transform:translate(x,y)时,文本将基于x,y值显示在元素上,但仅在mozilla浏览器中显示,而不是在chrome浏览器中显示 注意:当我提供transform:translate。。我可以在firebug中看到两次转换 当我提供ref:path,ref-y=.5时,文本只在chrome中显示在元素上,而在mozilla中不显示 我想显示元素的文本值中心。我还想指定css

我使用JointJS库创建了一个自定义元素。使用svg生成的路径值创建元素,以形成交互式结构

当我提供transform:translate(x,y)时,文本将基于x,y值显示在元素上,但仅在mozilla浏览器中显示,而不是在chrome浏览器中显示

注意:当我提供transform:translate。。我可以在firebug中看到两次转换

当我提供ref:path,ref-y=.5时,文本只在chrome中显示在元素上,而在mozilla中不显示

我想显示元素的文本值中心。我还想指定css元素,比如webkit transform

有人能帮我吗。 对不起,如果我解释得不够清楚的话

下面是定义自定义对象的类

`

     function makeElement(elem) {
            var label = elem.title;
            var status = elem.status;
            var path = elem.path;
            var hight = elem.hight;
            var width = elem.width;
            var translate = elem.translate;
            var rotate= elem.rotate;
            var letterSize = 13;


            return new joint.shapes.basic.Path({
                type: 'basic.Path',
                id: label,
                url: elem.url,           
                //size: { width:elem.width, height: elem.hight},
                attrs: {
                    path: { d: elem.path, fill: colorMap[elem.color]},
                    text: { text: label + '\n' + elem.status, 'transform': elem.translate + ' ' + elem.rotate, 'font-size': letterSize, 'font-family': 'monospace'} 
                       },
                //rankDir: 'R'
            });
        }
.
.
.
function buildGraphFromElementsAndLink(elements, links) {
            var r_elements = [];
            var r_links = [];

            _.each(elements, function(element) {
                r_elements.push(makeElement(element));
            });

              _.each(links, function(values, key) {
                _.each(values, function(value) {
                  r_links.push(makeLink(key, value));
                });
            });

            return r_elements;
        }
var elements = [
            {
                title: 'start',
                status: '0 of 0',
                color: 'darkblue',
                width: '130.767',
                height: '80.7667',
                translate: 'translate (40, 120)',
                rotate: 'rotate (0)',
                path: 'M27.037,392.187L27.037,392.187c-5.768,0.089-10.423,4.797-10.426,10.712c0.002,0.122-.006,0.244,0,0.366l0,0v35.356l0,0c-0.016,0.212,0.004,0.425,0,0.638c0,5.98,4.761,8.828,10.593,8.829c0.337-0.003,0.674,0.036,1.009,0h32.758l0,0h21.214l28.452-27.137l-28.26-28.765H60.971l0,0H27.037L27.037,392.187z'
            },
       {
                title: 'website',
                status: '0 of 0',
                color: 'darkblue',
                width: '218.983',
                height: '78.9833',
                translate: 'translate (180, 120)',
                rotate: 'rotate (0)',
                path: 'M200.592,392.187h-0.102h-37.653l0,0H86.903l0,0l26.862,28.678l-26.862,27.224l0,0h75.935l0,0h46.972l0,0h12.058l27.673-27.322l-27.486-28.579H200.592L200.592,392.187z'
            },
{
                title: 'order',
                status: '0 of 0',
                color: 'darkblue',
                width: '228.95',
                height: '215.3',
                translate: 'translate (425, 375)',
                rotate: 'rotate (-90)',               
                path: 'm 369.669,288.302 c -0.627,10e-4 -1.254,-0.042 -1.88,0 l -44.679,0 0,0 -8.068,0 -27.484,26.398 27.672,28.376 27.172,0 0,0 0,0 0,49.111 -10.667,0 0,0 -104.42,0 0,0 26.862,28.678 -26.862,27.224 0,0 109.469,0 0,0 31.178,0 c 0.522,0.04 1.045,-0.012 1.569,0 0.681,-0.002 1.361,0.05 2.04,0 l 0.771,0 0,0 c 13.912,-1.381 24.618,-12.681 25.036,-26.229 l 0.014,0 0,-0.266 c 0.011,-0.172 0.02,-0.344 0.027,-0.516 -0.006,-0.241 -0.015,-0.481 -0.027,-0.722 l 0,-103.239 c 0.107,-0.95 0.162,-1.904 0.164,-2.859 -0.019,-14.345 -11.595,-25.177 -26.373,-25.956 l 0,0 -0.186,0 c -0.442,-0.033 -0.885,0.011 -1.328,0 l 0,0 z'
            },
{
                title: 'process',
                status: '0 of 0',
                color: 'darkblue',
                width: '276.483',
                height: '77.5',
                translate: 'translate (250, 80)',
                rotate: 'rotate (0)',
                path: 'M132.084,288.302L104.6,314.43l27.672,28.646h21.089h0.175h157.561l0,0l-26.862-28.29l26.862-26.484l0,0H153.857h-0.309H132.084z'
            },
{
                title: 'cancel',
                status: '0 of 0',
                color: 'darkblue',
                width: '156.1',
                height: '218.317',
                translate: 'translate (40, 250)',
                rotate: 'rotate (-90)',
                path:'M59.233,181.015c-1.14,0.006-0.929,0.01-1.755,0c-15.402,0-27.887,11.671-27.888,26.6c0.011,0.985-0.021,1.515,0,3.099v101.242c0.024,1.075,0.006,1.88,0,2.912c0,14.929,12.485,28.208,27.888,28.208c1.436,0.056,2.544-0.382,3.838,0h66.741l0,0l-26.863-28.29l26.863-26.484l0,0H84.256v-53.949h16.153l0,0h16.2l27.673-26.324l-27.486-27.013C97.059,180.981,76.482,180.847,59.233,181.015L59.233,181.015z'
            },
{
                title: 'fulfill',
                status: '0 of 0',
                color: 'darkblue',
                width: '274.9',
                height: '75.6167',
                translate: 'translate (250, 30)',
                rotate: 'rotate (0)',
                path: 'M277.323,181.015h-0.428H121l0,0l26.863,26.862L121,234.352l0,0h156.455h0.056H298.6l27.674-26.556l-27.486-26.781H277.323z'
            },
 {
                title: 'payment',
                status: '0 of 0',
                color: 'darkblue',
                width: '150.383',
                height: '214.767',
                translate: 'translate (350, 140)',
                rotate: 'rotate (-90)',
                path: 'M309.445,74.941l-27.484,26.624l27.672,27.613c19.109-0.071,24.054-0.01,32.769,0v51.837h-38.657l0,0l26.862,26.742l-26.862,26.595l0,0c20.017-0.11,40.823-0.15,60.561,0c14.651-0.015,26.792-10.083,27.792-24.251h0.197V102.556h-0.186c0.033-0.433,0.055-0.865,0.066-1.299c-0.01-13.7-10.592-24.717-24.629-26.316h0.018C348.501,74.877,327.47,74.94,309.445,74.941L309.445,74.941z'
            },
{
                title: 'returns',
                status: '0 of 0',
                color: 'darkblue',
                width: '361.633',
                height: '77.0833',
                translate: 'translate (200, -10)',
                rotate: 'rotate (0)',
                path: 'M45.067,74.941c-0.34-0.034-1.516,0-1.858,0c-5.672,0.001-9.401,3.542-9.401,9.214c0.001,0.273-0.023,1.177,0,1.449v31.945v1.01c-0.071,0.475,0.005-0.512,0-0.032c0.006,5.409,3.908,10.3,9.305,10.651h1.263H43.1c87.476,0.256,184.04,0.279,262.075,0l0,0l-26.862-27.375l26.862-26.862l0,0C219.786,75.025,124.68,74.941,45.067,74.941z'
            },
 {
                title: 'suppliers',
                status: '0 of 0',
                color: 'lightblue',
                width: '127.083',
                height: '80.4833',
                translate: 'translate (375, 120)',
                rotate: 'rotate (0)',
                path: 'M415.11,392.187L415.11,392.187c-5.609,0.084-10.138,6.248-10.141,11.859c0.002,0.115-0.006,0.231,0,0.347l0,0v33.537l0,0c-0.016,0.201,0.004,0.403,0,0.605c0,5.672,4.631,9.552,10.303,9.553c0.328-0.003,0.656,0.035,0.982,0h31.86l0,0h20.633l27.674-26.919l-27.486-28.982h-20.82l0,0H415.11L415.11,392.187z'
            },
{
                title: 'products',
                status: '0 of 0',
                color: 'lightblue',
                width: '145.817',
                height: '215.233',
                translate: 'translate (510, 375)',
                rotate: 'rotate (-90)',
                path: 'M512.683,288.302L512.683,288.302h-22.179l-27.484,27.105l27.672,27.669h21.991l0,0l0,0v49.111h-38.718l0,0l26.863,28.57l-26.863,27.331l0,0h67.275l0,0c0.049,0.003,0.098-0.003,0.146,0c15.402,0,28.416-12.148,28.416-27.076c-0.004-0.479,0.031-0.957,0-1.435l0,0V318.375c0.166-1.159-0.01-2.328,0-3.499c-0.001-14.91-12.459-26.55-27.842-26.574l0,0H512.683L512.683,288.302z'
            },
{
                title: 'inventory',
                status: '0 of 0',
                color: 'lightblue',
                width : '144.2',
                height : '77.5',
                translate: 'translate (400, 80)',
                rotate: 'rotate (0)',
                path: 'M380.842,288.302c10.933,3.734,18.599,13.352,18.606,25.009c-0.012,0.434-0.034,0.866-0.067,1.299h0.187v28.467h24.256l0,0h20.146l0,0h42.489l0,0l-26.862-27.482l26.827-27.292h0.035h-42.453h-0.071h-20.051l0,0H380.842z'
            },

{
                title: 'forward',
                status: '0 of 0',
                color: 'lightblue',
                width: '128.167',
                height: '77.1167',
                translate: 'translate (375, 30)',
                rotate: 'rotate (0)',
                path: 'M409.79,181.015L409.79,181.015c-5.588,0.112-10.062,2.7-10.065,8.29c0.005,0.431-0.058,0.86,0,1.287v33.114c-0.009,0.125,0.004,0.249,0,0.374c0,5.672,4.673,10.271,10.346,10.271c0.001,0,0.001,0,0.001,0c0.351-0.004,0.701,0.04,1.049,0h32.037l0,0h0.059h21.089l27.673-27.739l-27.485-25.598h-21.335l0,0H409.79L409.79,181.015z'
            },
    {
                title: 'reverse',
                status: '0 of 0',
                color: 'lightblue',
                width: '261.083',
                height: '214.967',
                translate: 'translate (640, 140)',
                rotate: 'rotate (-90)',
                path: 'M375.117,74.941c10.933,3.733,18.598,12.951,18.606,24.608c-0.012,0.433-0.035,0.866-0.068,1.298h0.187v28.331h118.841v51.837h-44.052l0,0l26.862,25.781l-26.862,27.556l0,0h61.497l0,0c1.796,0.349,3.623-0.002,5.454,0c15.355-0.004,34.157-12.147,34.221-27.029l0,0V104.427c0.126-1.022-0.006-2.051,0-3.08c-0.018-14.307-17.363-25.577-32.099-26.406l0,0H375.117L375.117,74.941z'
            }           
        ];

`
多谢各位