[英]Use svg objects instead of raste image object in canvas
我想创建一个应用程序这样使用JavaScript和画布。
我已经创建了一个草稿,使用了dynamicjs作为画布库。 牙齿都是png图像,线条是通过使用行对象的动力学js绘制的。
我的一个朋友建议我将所有内容绘制为一个大的svg(牙齿和线条),其中每个牙齿和线条都是另一条不同的路径,将其以独特的ID加载到画布上,并使用ID对其进行操作。
我试着阅读了dynamicjs docs和fabricjs对象,但没有找到类似的东西。 我的意思是存储svg并使用fabricjs或dynamicjs将其加载到画布上。 然后库应该解析它并在画布上创建svg,我可以通过id对其进行操作。
可能吗? 我对这个svg图形非常陌生。 我的想法甚至可能吗?
我目前正在使用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
});
}
};
});
}
我希望通过加载整个由牙齿和线条组成的svg代替所有这些。
FabricJS会将现有的单个SVG URL /字符串转换,分解和重组为Fabric.PathGroup。 然后,您可以使用mySvgGroup.getObjects()
来获取可以根据需要进行操作的单个牙齿路径。
http://fabricjs.com/fabric-intro-part-3/#deserialization
KineticJS将接受单个SVG牙齿的路径数据并将其显示在画布上。
http://kineticjs.com/docs/Kinetic.Path.html
尽管如此,为每个牙齿创建单独的SVG路径并将这些单独的SVG馈送到KineticJS或FabricJS中可能更加灵活。
然后,您可以根据需要通过id对其进行操作:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.