Sto cercando di creare una tela da disegno libera usando WebComponent, Polymer per essere più precisi. Ho creato un componente e il codice è:
<polymer-element name="video-canvas" attributes="pad sourceVideo widthVideo heightVideo preloadVideo">
<template>
<div id= "content-container" >
<div class="canvas-container" >
<canvas id="c" height={{canvasHeight}} width={{canvasWidth}} style="border: 1px solid rgb(170, 170, 170); left: 10px; top: 10px; -moz-user-select: none; cursor: crosshair;"></canvas>
</div>
</div>
<style>
:host {
display: block;
}
#video{
margin-left: {{videoMargin}}px;
margin-top:{{canvasMarginTop}}px;
}
</style>
</template>
<script>
Polymer("video-canvas",{
width: "320",
height: "240",
src:"http://golovin.de/ba/parking.mp4",
padding:"3",
canvas:null,
domReady: function() {
this.canvas = this.__canvas = new fabric.Canvas("c", {
isDrawingMode: true
});
this.canvas.freeDrawingBrush.width = 10,
this.canvas.freeDrawingBrush.color = "#FF0000",
console.log(this.canvas)
}
});
</script>
</polymer-element>
Questo è il componente video-canvas.html. Il file di indice ha il seguente aspetto:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Video Canvas</title>
<!-- Importing Web Component"s Polyfill -->
<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
<!-- Importing Custom Elements -->
<link rel="import" href="video-canvas.html">
<link rel="import" href="bower_components/polymer/polymer.html">
</head>
<body>
<!-- Using Custom Elements -->
<video-canvas id = "videoCanvas" pad="100" sourceVideo="http://golovin.de/ba/parking.mp4" widthVideo="640" heightVideo="300" preloadVideo="auto"></video-canvas>
</body>
</html>
Il mio problema è che in Firefox 36.0.Zone 1 adolescente funziona aged perfettamente, aged ma in Google Chrome 41.0.2272.101 non funziona. Posso vedere che la tela Fabric.js non è inizializzata correttamente. Sono sicuro che dovrebbe esserci uno stupido mio errore, ma non riesco a capirlo. O potrebbe essere un problema di Fabric.js?
risposte:
0 per risposta № 1Il problema è stato risolto quando ho cambiato questa linea:
this.canvas = this.__canvas = new fabric.Canvas("c", {
isDrawingMode: true
});
a:
this.canvas = this.__canvas = new fabric.Canvas(this.$.c, {
isDrawingMode: true
});
Ora funziona perfettamente bene.