我正在嘗試使用JavaScript和畫布創建類似於this的應用程序。在畫布中使用svg對象而不是raste圖像對象
我已經創建了一個使用kineticjs作爲畫布庫的草稿。這些牙齒都是png圖像,並且線條是使用Line對象由動態js繪製的。
我的一位朋友建議我把所有東西都畫成一個大的svg(牙齒和線條),每個牙齒和每條線都是另一條不同的路徑,它們在畫布上加載不同的id並使用id操縱它們。
我嘗試閱讀kineticjs文檔和fabricjs對象,但沒有找到類似的東西。我的意思是存儲svg並使用fabricjs或kineticjs將其加載到畫布上。然後庫應該解析它並在畫布上創建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來代替,即由牙齒和線目前加載牙齒圖像。
你試過了什麼,可以和我們分享代碼嗎? – K3N 2014-12-04 10:48:23
目前我使用KineticJs,並且所有的東西都加載爲PNG圖像,而Kinetic.Line用於水平平行線。我無法找到任何地方如何使用svg圖像和使用KineticJS或Fabric可能操縱svg的部分。現在有很多代碼。我可以舉一些如何加載圖像的例子。 – Apostolos 2014-12-04 11:14:34