I am currently utilizing a plugin from the SVG library to render graphics within a div (). However, I am encountering an issue when attempting to rotate it using the "transform" property. The rotation is purely visual and does not alter the X and Y axes of the image, leading to the drawing appearing in incorrect coordinates once rotated. How can I adjust the axes while rotating to ensure that the points are correctly placed on the rotated div? Thank you for any advice.
Update: Including some code snippets.
Function for drawing images:
drawImage = function (pointsRelative) {
var pointsToDraw = $scope.getAbsolutePoints(pointsRelative)
pointsToDraw = pointsToDraw.join()
var draw = SVG('cutImage').size('100%', '100%')
draw.polygon(pointsToDraw).attr({
fill: '#3d7e9a',
'fill-opacity': 0.4,
stroke: '#3d7e9a',
'stroke-width': 1
})
}
Function for capturing mouse-generated points and converting them to relative points:
getRelativePoints = function (clickPoints) {
let conv = []
for (let item of clickPoints) {
let x = item[0] / parseInt(widthImage)
let y = item[1] / parseInt(heigthImage)
conv.push([x, y])
}
return conv
}
Function for transforming relative points into absolute points for image rendering:
getAbsolutePoints = function (clickPoints) {
let conv = []
for (let item of clickPoints) {
let x = item[0] * parseInt(widthImage)
let y = item[1] * parseInt(heigthImage)
conv.push([x, y])
}
return conv
}
Sample HTML structure:
<div id="cutImage" style="width: 300px; height: 800px;"></div>Upon applying a 90-degree rotation transform, the div displays correctly but maintains its original width and height.