Hi,
I’m implementing a sort of image map using an SVG image and its rendered PNG through the following steps:
- Read SVG image from bundle and extract its polygons.
- Expose a function who uses a point-in-polygon algorithm.
- Put a Button element with a Clicked handler.
- Put a Image element with the rendered PNG image inside the Button element.
- Capture the user click or tap and send it to the testPointInPolygon function
What would be the recommended way to translate the X, Y point from the Button element to their counterparts in the SVG?
Normally, I would capture the size of the button from the testPointInPolygon function and divide by the size of the SVG image in order to translate to the SVG coordinate system. But I still can not find a way to read the height and width of the button from my testPointInPolygon function in Javascript in realtime.
Example code:
<JavaScript>
var Observable = require('FuseJS/Observable');
var Bundle = require('FuseJS/Bundle');
var testPointInPolygon = require('./bundle.js');
var imageWidth = Observable();
var imageHeight = Observable();
var svgsource = Bundle.readSync("diagram.svg");
var shapes = ["shape1", "shape2", ...];
function buttonClicked(arg){
var x = (arg.x * 1.21052631578947); //F=414/342
var y = (arg.y * 1.39787234042553); //F=657/470
console.log("eval point: " + x + "," + y + " imageWidth: " + imageWidth + ", imageHeight: " + imageHeight);
//imageWidth and imageHeight are undefined at this point. Can't translate between coordinate systems.
for (var i = 0; i < shapes.length; i++) {
var result = testPointInPolygon(x, y, shapes[i], svgsource);
if(result == true ) {
console.log("Shape: " + shapes[i] + " in point: " + x + "," + y);
}
}
}
module.exports = {
buttonClicked: buttonClicked,
imageWidth: imageWidth,
imageHeight: imageHeight
};
</JavaScript>
...
<ScrollView Dock="Top">
<Button Clicked="{buttonClicked}">
<Image Name="diagram" Width="{imageWidth}" Height="{imageHeight}" StretchMode="Fill" Files="./diagram.jpg" />
</Button>
</ScrollView>
...