當我畫我的SVG內容的畫布，SVG的裁剪

我有一堆SVG的文本行，我需要畫到畫布。我將我的SVG對象轉換爲SVG數據URI，將其應用於圖像源，然後將該圖像繪製到畫布上，但由於某種原因，它會在特定寬度和高度後剪裁文本。當我畫我的SVG內容的畫布，SVG的裁剪

我知道這個問題是不是畫布大小，因爲我也是第一次繪製其他圖像到畫布（that're比文本方式更寬，更高），沒有任何問題。另一個奇怪的事情是，如果我把這張照片貼在身上，它就會完美呈現出來。

var imageText = new Image(); 
imageText.src = "data:image/svg+xml;base64," + btoa($("#text_container").html()); 
imageText.onload = function() { context.drawImage(imageText, 0, 0); };

#text_container是我的DIV，它保存所有的SVG代碼。

編輯：爲了讓更多的細節，這裏有一個評論我下面寫道：我建立一個JS應用程序，允許用戶創建自定義的足球。你可以改變球和文本的不同顏色和特徵，所以它可以歸結爲幾個帶有SVG文本的DIV（因爲文本沿着弧形路徑）。我可以將DIV的背景圖像繪製到畫布上，以創建足球。當我嘗試將文本拖到畫布上時發生問題，因爲它正在裁剪。然後，我將採用該畫布元素並將其變爲用戶保存的PNG。

我感動的文字並向左更多，所以你可以看到裁剪好。正如你所看到的那樣，球很好。 http://i.imgur.com/Sngu4.png

來源

2012-12-07 user1807782

爲什麼要那樣做？所有支持畫布的瀏覽器都支持SVG。 –

我正在構建一個讓用戶創建自定義足球的JS應用程序。你可以改變球和文本的不同顏色和特徵，所以它可以歸結爲幾個帶有SVG文本的DIV（因爲文本沿着弧形路徑）。我可以將DIV的背景圖像繪製到畫布上，以創建足球。當我嘗試將文本拖到畫布上時發生問題，因爲它正在裁剪。然後，我將採用該畫布元素並將其變爲用戶保存的PNG。 – user1807782

在黑暗中拍攝.... drawImage()有一些你可以設置的尺寸參數？也許它有一個默認的大小，然後裁剪其餘的。只是一個想法...

也可能是因爲你的圖像是動態創建的，有一些圖像大小參數缺失，通常會包含在一個.jpg中，其中drawImage()函數可能是尋找。

來源

2012-12-07 19:51:00

假設context是你的畫布RenderingContext（‘2D’），你應該包括‘命運寬度’和您context.drawImage()功能‘命運高度’參數：

context.drawImage(image, dx, dy, dw, dh)

如果myCanvas是的id你的畫布對象（和$是jQuery的函數），你可以調用：

var dw = $('myCanvas').width(); 
var dh = $('myCanvas').height(); 
context.drawImage(image, 0, 0, dw, dh);

這將縮放圖像，以適應整個畫布。我的建議是首先「看」svg圖像是什麼（即將其添加到身體並測量文本的座標：sx，sy，sw和sh，在上面的鏈接中），因爲您可能必須裁剪它「故意」，以便將它定位在要：

context.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)

來源

2012-12-08 03:53:03 Roimer

沒有骰子。它最終取得了大量的文本並將其炸燬。 – user1807782

我有這個確切同樣的問題，但我想我只是找到了解決辦法。

僅在您的SVG元素上設置width和height是不夠的。顯然，你還需要設置viewBox：

<svg width="720" height="400" viewBox="0 0 720 400"></svg>

這應該正確地呈現在畫布上的圖像。 :)

來源

2016-04-29 23:46:48 caleb531

當我畫我的SVG內容的畫布，SVG的裁剪

回答

相關問題