如何解決在HTML5畫布上繪製的形狀並更改其屬性？

我開始探索HTML5畫布，我很抱歉提出我的問題的天真。使用Flash CC，我已經產生了矩形畫布上：如何解決在HTML5畫布上繪製的形狀並更改其屬性？

(function (lib, img, cjs, ss) { 
var p; // shortcut to reference prototypes 
// library properties: 
lib.properties = { 
    width: 550, 
    height: 400, 
    fps: 24, 
    color: "#FFFFFF", 
    manifest: [] 
}; 
// symbols: 
// stage content: 
(lib.canvas_test = function() { 
    this.initialize(); 
    // Layer 1 
    this.shape = new cjs.Shape(); 
    this.shape.graphics.beginFill().beginStroke("#669966") 
    .setStrokeStyle(1,1,1).moveTo(-94,-62).lineTo(94,-62).lineTo(94,62).lineTo(-94,62).closePath(); 
    this.shape.setTransform(198,136); 
    this.shape_1 = new cjs.Shape(); 
    this.shape_1.graphics.beginFill("#FF933C") 
    .beginStroke().moveTo(-94,62).lineTo(-94,-62).lineTo(94,-62).lineTo(94,62).closePath(); 
    this.shape_1.setTransform(198,136); 
    this.addChild(this.shape_1,this.shape); 
}).prototype = p = new cjs.Container(); 
p.nominalBounds = new cjs.Rectangle(378,273,190,126); 
})(lib = lib||{}, images = images||{}, createjs = createjs||{}, ss = ss||{}); 
var lib, images, createjs, ss;

現在我卡住了。如何使用JavaScript函數檢索（並更改）矩形的顏色？我曾希望這些形狀只是畫布的孩子，但似乎並非如此。

來源

2016-01-06 aag

繪製在畫布上的東西只是圖像數據 - 它們不是作爲任何實際實體存在的，您需要自己跟蹤它們。也就是說，看起來已經生成的代碼正在使用[CreateJS]（http://www.createjs.com/），看起來好像它可能會爲你追蹤一些對象（即'new cjs。形狀（）'）。 –

早期的答案是約畫布是基本的位圖是正確的，但EaselJS給你一個保留的圖形模式，所以你可以改變屬性和更新階段/月，以反映它們。

您正在使用Flash導出生成您的內容，所以你應該能夠通過exportRoot，這是在HTML創建訪問您的元素。這實質上就是Flash的「舞臺」，由導出的庫中的canvas_test定義的EaselJS容器表示。

exportRoot = new lib.canvas_test();

您可以在canvas_test代碼中看到每個「子」被定義。任何圖形都包含在EaselJS Shape實例中。還有處理組（容器），位圖，文本和動畫（動畫剪輯）的類。

下面是上面把你的出口代碼添加到舞臺： http://jsfiddle.net/lannymcnie/b5me4xa2/

這是很容易一旦創建修改形狀，但你必須考慮到這一點定義它們。 Flash導出並不能真正爲您提供此功能，因爲它只是將所有內容導出爲單個鏈接的圖形指令列表。但是，您可以很容易地反省，找到您想要修改的命令。 警告：這需要EaselJS 0.7.0+才能工作。早期版本將無法使用這種方法

您提供的演示有一個單一的矩形工作。不幸的是，在當前版本的Flash中存在一個錯誤，它將其導出爲2個形狀，一個用於筆劃，另一個用於填充。這個例子將修改筆畫。

var shape = exportRoot.shape; // Access the shape instance that has the stroke 
var stroke = shape.graphics._stroke; 
stroke.style = "#ff0000"; // Set to red.

做填充，你可以做shape_1同樣的事情，但影響_fill代替。下面是一個updated sample

您也可以訪問任何的指示，並影響其性能。您可以在Graphics docs中看到完整的命令列表（請參閱邊欄獲取完整列表）。這裏是一個快速的樣品上的行程修改第一moveTo命令：

var shape = exportRoot.shape; 
shape.graphics._activeInstructions[0].x = -110;

你可以看到，代碼在這裏的一個示例：http://jsfiddle.net/lannymcnie/b5me4xa2/2/ - 你將不得不修改這兩個填充和筆觸將它們移至兩個:)

來源

2016-01-08 00:21:32 Lanny

只是一個頭，這不是_recommended_方法，只是在這個例子中的作品。如果你依賴這一點，並改變你的出口，它可能會中斷。例如，_fill和_stroke _sometimes_指向您期望的填充和筆畫，但可能不會。 – Lanny

畫布基本上是一個位圖，它沒有孩子。 SVG的工作原理與您想象的一樣，但畫布只有像素。如果您想更改畫布，則要麼必須通過它才能找到像素，要麼創建一個代表繪圖對象（矩形）的JavaScript對象，將它與畫布背景分開，並重新繪製背景並在有任何變化時提供對象。

[已添加] 我對Flash CC並不熟悉，但正如評論中指出的那樣，可能已經有一些功能可以執行評論者和我自己所描述的內容 - 恐怕我不會知道。

來源

2016-01-06 17:07:13 Aerik

你是對的，除了這個例子使用EaselJS（從Flash CC導出），這是你建議的JavaScript對象方法。 – Lanny

如何解決在HTML5畫布上繪製的形狀並更改其屬性？

回答

相關問題