Now I draw another svg of the same size on the canvas of cpr. I need to extract the center line coordinates of the cpr plane of this image and draw a triangle mark on the center line of svg. With the mouse dragging and rotating, the canvas of cpr and the center line of svg need to transform and interact. And the two positions are not misaligned
const getOrientationAtPoint = (index) => {
const orientations = mapper.getOrientedCenterline().getOrientations()
if (orientations && orientations[index]) {
return orientations[index]
}
return quat.create()
}
const computeLocalXDirection = (index) => {
const quat = getOrientationAtPoint(index)
const localXDirection = vec3.create()
let tangentDirection = mapper.getTangentDirection()
return vec3.transformQuat(localXDirection, tangentDirection, quat)
}
const _centerline = mapper.getOrientedCenterline()
let points = []
let centerPoint = mapper.getCenterPoint()
let distancesToFirstPoint = _centerline.getDistancesToFirstPoint()
let pointsArr = _centerline.getPoints().getData()
for (let pointIndex = 0; pointIndex < pointsArr.length / 3; pointIndex++) {
const point = pointsArr.slice(pointIndex * 3, pointIndex * 3 + 3)
const newY = height - distancesToFirstPoint[pointIndex]
let newX = 0
if (centerPoint) {
const localXDirection = computeLocalXDirection(pointIndex)
newX = vec3.dot(vec3.subtract([], centerPoint, point), localXDirection)
} else {
newX = width
}
const newZ = 0
points.push([newX, newY, newZ])
}
const matrix = actor.getUserMatrix()
const worldCoord = vec3.create()
let _linepoint = []
points.map((point, index) => {
vec3.transformMat4(worldCoord, point, matrix)
this.params.worldCoords.push(worldCoord)
const coordinate = vtkCoordinate.newInstance()
coordinate.setCoordinateSystemToWorld()
coordinate.setValue(worldCoord[0], worldCoord[1], worldCoord[2])
const displayCoord = coordinate.getComputedDisplayValue(stretchRenderer)
_linepoint.push([displayCoord[0], displayCoord[1]])
})
console.log(_linepoint)