在畫布中使用svg對象而不是raste圖像對象

我正在嘗試使用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來代替，即由牙齒和線目前加載牙齒圖像。

來源

2014-12-04 Apostolos

你試過了什麼，可以和我們分享代碼嗎？ – K3N 2014-12-04 10:48:23

目前我使用KineticJs，並且所有的東西都加載爲PNG圖像，而Kinetic.Line用於水平平行線。我無法找到任何地方如何使用svg圖像和使用KineticJS或Fabric可能操縱svg的部分。現在有很多代碼。我可以舉一些如何加載圖像的例子。 – Apostolos 2014-12-04 11:14:34

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路徑和那些個別SVGs送入要麼KineticJS或FabricJS。

然後，你可以按你的希望通過ID的操縱它們：用

將每個人的牙齒[X，Y]座標，
調整大小無馬賽克，
將每顆牙齒在一個組，在牙齒上製作註釋/圖畫，

來源

2014-12-04 18:08:10 markE

在畫布中使用svg對象而不是raste圖像對象

回答

相關問題