如何在相机坐标系中确定图表的原点的位置

[heyi11]

如题，我想请问一下，我怎么能确定图表原点坐标呢（排除掉padding、legends，纯粹的图表的原点）？因为我想控制这个图表在画面上沿着某一个轨迹运动并且控制它的旋转，需要一个精确的图表的原点坐标，否则就会有很大误差。

[heyi11]

能否修改图表的6d（x，y，z，alpha，beta，gamma）位姿

[neuqzxy]

@heyi11 猜测你想获得这个红点位置，可以通过右侧API获取

[xuanhun]

期待分享你的demo，好奇是个啥效果

[heyi11]

@heyi11 猜测你想获得这个红点位置，可以通过右侧API获取

get！那我有办法自由控制这个坐标吗？ 因为我想通过修改他的6d pose（x，y，z，alpha，beta，gamma）

[neuqzxy]

@heyi11 猜测你想获得这个红点位置，可以通过右侧API获取

get！那我有办法自由控制这个坐标吗？ 因为我想通过修改他的6d pose（x，y，z，alpha，beta，gamma）

控制坐标就是移动VChart的位置，正常情况下VChart是在dom容器中的，修改dom位置即可，你可以获得锚点位置，那么执行dom的3d transform感觉就可以 @heyi11

[heyi11]

@heyi11 猜测你想获得这个红点位置，可以通过右侧API获取

get！那我有办法自由控制这个坐标吗？ 因为我想通过修改他的6d pose（x，y，z，alpha，beta，gamma）

控制坐标就是移动VChart的位置，正常情况下VChart是在dom容器中的，修改dom位置即可，你可以获得锚点位置，那么执行dom的3d transform感觉就可以 @heyi11

1. 也就是说，我没法直接通过配置项改变对吗？那我可以通过这个options3d控制旋转角吗，alpha、beta、gamma他们的旋转中心是什么，是通过center配置吗 const options = { options3d: { enable: true, enableView3dTransform: true, alpha: 0, beta: 0, fieldRatio: 15, fieldDepth: 500, center: { x: 500, y: 520 } } }
2. 这个旋转角可以使用响应式修改吗？

[neuqzxy]

@heyi11 猜测你想获得这个红点位置，可以通过右侧API获取

get！那我有办法自由控制这个坐标吗？ 因为我想通过修改他的6d pose（x，y，z，alpha，beta，gamma）

控制坐标就是移动VChart的位置，正常情况下VChart是在dom容器中的，修改dom位置即可，你可以获得锚点位置，那么执行dom的3d transform感觉就可以 @heyi11

1. 也就是说，我没法直接通过配置项改变对吗？那我可以通过这个options3d控制旋转角吗，alpha、beta、gamma他们的旋转中心是什么，是通过center配置吗 const options = { options3d: { enable: true, enableView3dTransform: true, alpha: 0, beta: 0, fieldRatio: 15, fieldDepth: 500, center: { x: 500, y: 520 } } }
2. 这个旋转角可以使用响应式修改吗？

@heyi11

const spec = {
  type: 'common',
  seriesField: 'color',
  title: {
    text: '这是个标题aaa'
  },
  data: [
    {
      id: 'id0',
      values: [
        { x: '周一', type: '早餐', y: 15 },
        { x: '周一', type: '午餐', y: 25 },
        { x: '周二', type: '早餐', y: 12 },
        { x: '周二', type: '午餐', y: 30 },
        { x: '周三', type: '早餐', y: 15 },
        { x: '周三', type: '午餐', y: 24 },
        { x: '周四', type: '早餐', y: 10 },
        { x: '周四', type: '午餐', y: 25 },
        { x: '周五', type: '早餐', y: 13 },
        { x: '周五', type: '午餐', y: 20 },
        { x: '周六', type: '早餐', y: 10 },
        { x: '周六', type: '午餐', y: 22 },
        { x: '周日', type: '早餐', y: 12 },
        { x: '周日', type: '午餐', y: 19 }
      ]
    },
    {
      id: 'id1',
      values: [
        { x: '周一', type: '饮料', y: 22 },
        { x: '周二', type: '饮料', y: 43 },
        { x: '周三', type: '饮料', y: 33 },
        { x: '周四', type: '饮料', y: 22 },
        { x: '周五', type: '饮料', y: 10 },
        { x: '周六', type: '饮料', y: 30 },
        { x: '周日', type: '饮料', y: 50 }
      ]
    }
  ],
  series: [
    {
      type: 'bar',
      support3d: true,
      id: 'bar',
      dataIndex: 0,
      label: { visible: true },
      seriesField: 'type',
      dataIndex: 0,
      xField: ['x', 'type'],
      yField: 'y'
    },
    {
      type: 'line',
      support3d: true,
      id: 'line',
      dataIndex: 1,
      label: { visible: true },
      seriesField: 'type',
      xField: 'x',
      yField: 'y',
      stack: false
    }
  ],
  axes: [
    { orient: 'left', mode: '3d', seriesIndex: [0] },
    { orient: 'right', mode: '3d', seriesId: ['line'], grid: { visible: false } },
    { orient: 'bottom', mode: '3d', label: { visible: true }, type: 'band' }
  ],
  legends: {
    visible: true,
    orient: 'bottom', mode: '3d'
  }
};

const vchart = new VChart(spec, {
  dom: CONTAINER_ID,
  options3d: {
    enable: true,
    enableView3dTransform: true,
    center: { x: 0, y: 0 }
  }
});
vchart.renderSync();

// Just for the convenience of console debugging, DO NOT COPY!
window['vchart'] = vchart;

你可以在官网试试这个demo，看看是否满足你的需求，可以鼠标拖拽图表进行旋转