Question

我在Drupal中使用箭头符号。箭头在jsfiddle中旋转得很好，但在Drupal中却没有。

我使用旋转属性。再次在jsfiddle中有效，但不适用于Drupal。我在两种环境下都使用相同的浏览器。

我正在尝试复制此图中的箭头。我已经完成了流程图 https://www.epa.gov/sites/production/files/2019-07/active_cases_under_review-7_1_19-boxes.png

https://jsfiddle.net/ermacwins/bugz54h7/

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>

var arrWidth = 14,
    arrHeight = 25,
  startX = 350,
  startY = 500,
  endX = 450,
  endY = 460,
  renderer;

renderer = new Highcharts.Renderer(
  $('#container')[0],
  800,
  800
);

renderer.symbol('triangle', startX - arrWidth/2, startY - arrHeight, arrWidth, arrHeight)
.attr({
  fill: '#D3D3D3',
  rotation: -30,
  rotationOriginX: startX,
  rotationOriginY: startY
}).add();

renderer.symbol('triangle', endX - arrWidth/2, endY - arrHeight, arrWidth, arrHeight)
.attr({
  fill: '#D3D3D3',
  rotation: 15,
  rotationOriginX: endX -10,
  rotationOriginY: endY +15
}).add();

renderer.path([
    'M',
  startX,
  startY,
  'C',
  (startX + endX) - 400,
  startY +65,
  (startX + endX) - 300,
  endY +5,
  endX,
  endY
]).attr({
    stroke: '#D3D3D3',
  'stroke-width': 2,
  dashstyle: 'dash'
  })
.add();

var arrWidth2 = 14,
    arrHeight2 = 25,
  startX2 = 400,
  startY2 = 300,
  endX2 = 480,
  endY2 = 300,
  renderer;


renderer.symbol('triangle', startX2 - arrWidth/2, startY2 - arrHeight2, arrWidth2, arrHeight2)
.attr({
  fill: '#D3D3D3',
  rotation: -70,
  rotationOriginX: startX2,
  rotationOriginY: startY2
}).add();

renderer.symbol('triangle', endX2 - arrWidth/2, endY2 - arrHeight2, arrWidth2, arrHeight2)
.attr({
  fill: '#D3D3D3',
  rotation: 30,
  rotationOriginX: endX2,
  rotationOriginY: endY2
}).add();

renderer.path([
    'M',
  startX2,
  startY2,
  'C',
  (startX2 + endX2) - 585,
  startY2 +10,
  (startX2 + endX2) - 280,
  endY2 +30,
  endX2,
  endY2
]).attr({
    stroke: '#D3D3D3',
  'stroke-width': 2,
  dashstyle: 'dash'
  })
.add();

我需要箭头像jsfiddle一样在Drupal（即将演示）中表现

Answer 1

尝试使用CSS transform: rotate()设置类似地实现它。

renderer.symbol(
    'triangle',
    startX2 - arrWidth / 2,
    startY2 - arrHeight2,
    arrWidth2,
    arrHeight2
  )
  .attr({
    fill: '#D3D3D3',
  })
  .css({
    transform: 'rotate(80deg)',
    'transform-origin': startX2 + 'px ' + startY2 + 'px'
  })
  .add();

演示：

https://jsfiddle.net/BlackLabel/w3d51yrz/

在Drupal中查看时箭头未旋转

1 个答案: