另一种形状的中心组元素svg keith wood

时间:2018-06-12 01:56:29

标签: javascript jquery svg polygon

我尝试使用keith-wood的svg插件水平和垂直地将元素放在另一个内部,但是没有效果。我想如果用户点击一个元素(大部分时间都是多边形),那么组元素就位于元素的中心。这张图片显示了它现在如何工作以及我想要的:

enter image description here

我总是点击任何多边形,代码将该行放在内部容器的顶部。

这是我使用的代码:

var x = diente.x || 0,
    y = diente.y || 0;

var defaultPolygon = {fill: 'white', stroke: '#444', strokeWidth: 0.5};
var dienteGroup = svg.group(parentGroup, {transform: 'translate(' + x + ',' + y + ')'});

var caraExteriorSuperior = svg.polygon(dienteGroup,
    [[-3,-5],[23,-5],[20,0],[0,0]],
    defaultPolygon);
caraExteriorSuperior = $(caraExteriorSuperior).data('cara', 'ES');

var caraSuperior = svg.polygon(dienteGroup,
    [[0,0],[20,0],[15,5],[5,5]],
    defaultPolygon);
caraSuperior = $(caraSuperior).data('cara', 'S');

var caraInferior = svg.polygon(dienteGroup,
    [[5,15],[15,15],[20,20],[0,20]],
    defaultPolygon);
caraInferior = $(caraInferior).data('cara', 'I');

var caraDerecha = svg.polygon(dienteGroup,
    [[15,5],[20,0],[20,20],[15,15]],
    defaultPolygon);
caraDerecha = $(caraDerecha).data('cara', 'D');

var caraIzquierda = svg.polygon(dienteGroup,
    [[0,0],[5,5],[5,15],[0,20]],
    defaultPolygon);
caraIzquierda = $(caraIzquierda).data('cara', 'Z');

var caraCentral = svg.polygon(dienteGroup,
    [[5,5],[15,5],[15,15],[5,15]],
    defaultPolygon);
caraCentral = $(caraCentral).data('cara', 'C');

var caraExteriorInferior = svg.polygon(dienteGroup,
    [[20,20],[23,25],[-3,25],[0,20]],
    defaultPolygon);
caraExteriorInferior = $(caraExteriorInferior).data('cara', 'EI');

var caraCompleto = svg.text(dienteGroup, 6, 33, diente.id.toString(), 
    { fill: '#444', stroke: '#f00', strokeWidth: 0.1, style: 'font-size: 6pt;font-weight:normal' });
caraCompleto = $(caraCompleto).data('cara', 'X');

//**********************//
inside click event
////////////////////
var datahtml = diagnostico.canvas;
var groupCanvas = svg.group(dienteGroup);
$(groupCanvas).data('diagnostico', diagnostico);
svg.add(groupCanvas, datahtml);
svg.change(groupCanvas, {cx: element_polygon.width() / 2, cy: me.height() / 2 });

显然,width选项仅适用于svg容器。我不知道如何解决这个问题。

我感谢你们给我带来的所有帮助。

PD:对不起我糟糕的英语。

0 个答案:

没有答案