My goal is to develop an application similar to this using JavaScript and canvas elements.
To achieve this, I initially used KineticJS as the canvas library to create a draft. The teeth are represented by PNG images while the lines are drawn using KineticJS Line objects.
A friend recommended a different approach of drawing everything as one large SVG file where each tooth and line is defined as a separate path. This SVG would then be loaded onto the canvas with distinct IDs for manipulation purposes.
Although I explored the documentation for both fabric.js and KineticJS, I couldn't find a straightforward method to load and parse an entire SVG on the canvas for manipulation based on unique IDs.
Given my limited experience with SVG graphics, I'm unsure if my envisioned approach is feasible. Can this idea of loading a complete SVG composed of teeth and lines be realized?
Currently, I am loading individual teeth as images using KineticJS.
Periodontogram.prototype.initializeImageObjects = function (){
var obj = this;
if (this.DEBUG){
console.log("initializing ImageObjects:")
}
var check = function (item){return item !== undefined;}
var url = this.options.url;
var imageObj;
var image;
this.options.imageFilenames.forEach(function (filename, index){
if (obj.DEBUG){
console.log("Loading "+filename+" image");
}
var src = url+'/'+filename;
imageObj = new Image();
imageObj.src = src;
imageObj.onload = function (){
if (obj.DEBUG){
console.log("Image "+src+" successfully loaded");
}
image = new Kinetic.Image({
x:0,
y:0,
id: filename.split('.')[0],
width: this.width,
height: this.height,
image:this
});
obj.imageObjects[index] = this;
obj.teethImages[index] = image;
if (obj.imageObjects.filter(check).length === obj.options.imageFilenames.length ) {
if (obj.DEBUG){
console.log("All Images loaded successfully");
console.log("ready to call rest methods")
}
obj.positionImages();
obj.createLineGroups();
obj.createLabelGroups()
obj.createStage();
obj.drawOnScreen();
$("#"+obj.container).width(obj.stage.getWidth());
$("#"+obj.container).height(obj.stage.getHeight ());
obj.callback();
$.event.trigger({
type:'finishLoading',
obj: obj
});
}
};
});
}
I aim to simplify this process by replacing it with the loading of a single SVG file containing both teeth and lines.