如何在自定义Polymer元素上调整绘图html 5画布的大小？

Question

当窗口调整大小事件发生火灾时，我想在自定义Polymer元素上调整html5画布的大小！

我尝试使用window.onresize事件，但我无法获得canvas函数。

我们可以通过鼠标和触摸事件监听在这个html5画布上绘制东西！ 我们使用聚合物和聚合物手势。

 canvas { background:url(BackgroundPattern.png); } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { canvas { background:url(BackgroundPattern@2x.png); } } 

 <link rel="import" href="../polymer/polymer.html"> <link rel="import" href="../polymer-gestures/polymer-gestures.html"> <polymer-element name="mycustom-canvas"> <template> <link rel="stylesheet" href="./mycustom-canvas.css"> <canvas id="canvas" touch-action="none"></canvas> </template> <script> Polymer({ init: function (){ var canvas = this.$.canvas, context = canvas.getContext('2d'), windowWidth = window.innerWidth, windowHeight = window.innerHeight, scale = this.getPixelRatio(); canvas.width = windowWidth - canvas.offsetLeft; canvas.height = windowHeight - canvas.offsetTop; if (scale > 1) { var newWidth = canvas.width * scale, newHeight = canvas.height * scale; canvas.style.width = canvas.width + 'px'; canvas.style.height = canvas.height + 'px'; canvas.width = newWidth; canvas.height = newHeight; context = canvas.getContext('2d'); } context.lineWidth = 2 * scale; context.lineCap = 'round'; context.lineJoin = 'round'; context.strokeStyle = 'rgb(0, 0, 0)'; }, getCoords: function (inEvent) { var scale = this.getPixelRatio(); if (inEvent.offsetX) { return { x: scale * inEvent.offsetX, y: scale * inEvent.offsetY }; } else if (inEvent.layerX) { return { x: scale * inEvent.layerX, y: scale * inEvent.layerY }; } else { return { x: scale * (inEvent.pageX - inEvent.target.offsetLeft), y: scale * (inEvent.pageY - inEvent.target.offsetTop) }; } }, getPixelRatio: function () { if ('devicePixelRatio' in window) { if (window.devicePixelRatio > 1) { return window.devicePixelRatio; } } return 1; }, ready: function () { var events = [ // base events 'down', 'up', 'trackstart', 'track', 'trackend', 'tap', 'hold', 'holdpulse', 'release' ]; this.init(); events.forEach(function(en) { PolymerGestures.addEventListener(this, en, function (inEvent) { var coords = this.getCoords(inEvent); switch (en) { case 'down': this.fire('mycustom-canvas-down', {event: inEvent, x : coords.x, y : coords.y}); break; case 'track': this.fire('mycustom-canvas-track', {event: inEvent, x : coords.x, y : coords.y}); break; case 'up': this.fire('mycustom-canvas-up', {event: inEvent, x : coords.x, y : coords.y}); break; } inEvent.preventDefault(); }); }, this); } }); </script> </polymer-element> 

现在我使用window.height和window.width作为画布初始大小，但我的最终目的是使用父容器尺寸。

Answer 1

我终于成功了，我想做。 我使用Polymer / core-resizable。

这就是我所做的：

 <link rel="import" href="../polymer/polymer.html"> <link rel="import" href="../polymer-gestures/polymer-gestures.html"> <link rel="import" href="../core-resizable/core-resizable.html"> <polymer-element name="mycustom-canvas"> <template> <link rel="stylesheet" href="./mycustom-canvas.css"> <!--<div center horizontal layout>--> <!--<content>--> <canvas id="canvas" touch-action="none"></canvas> <!--</content>--> <!--</div>--> </template> <script> Polymer(Polymer.mixin({ eventDelegates: { 'core-resize': 'resizeHandler' }, init: function (){ var canvas = this.$.canvas, context = canvas.getContext('2d'), windowWidth = this.parentNode.clientWidth, windowHeight = window.innerHeight, scale = this.getPixelRatio(); canvas.width = windowWidth - canvas.offsetLeft; canvas.height = windowHeight - canvas.offsetTop; if (scale > 1) { var newWidth = canvas.width * scale, newHeight = canvas.height * scale; canvas.style.width = canvas.width + 'px'; canvas.style.height = canvas.height + 'px'; canvas.width = newWidth; canvas.height = newHeight; context = canvas.getContext('2d'); } context.lineWidth = 2 * scale; context.lineCap = 'round'; context.lineJoin = 'round'; context.strokeStyle = 'rgb(0, 0, 0)'; }, getCoords: function (inEvent) { var scale = this.getPixelRatio(); if (inEvent.offsetX) { return { x: scale * inEvent.offsetX, y: scale * inEvent.offsetY }; } else if (inEvent.layerX) { return { x: scale * inEvent.layerX, y: scale * inEvent.layerY }; } else { return { x: scale * (inEvent.pageX - inEvent.target.offsetLeft), y: scale * (inEvent.pageY - inEvent.target.offsetTop) }; } }, getPixelRatio: function () { if ('devicePixelRatio' in window) { if (window.devicePixelRatio > 1) { return window.devicePixelRatio; } } return 1; }, ready: function () { var events = [ // base events 'down', 'up', 'trackstart', 'track', 'trackend', 'tap', 'hold', 'holdpulse', 'release' ]; this.init(); events.forEach(function(en) { PolymerGestures.addEventListener(this, en, function (inEvent) { var coords = this.getCoords(inEvent); switch (en) { case 'down': this.fire('mycustom-canvas-down', {event: inEvent, x : coords.x, y : coords.y}); break; case 'track': this.fire('mycustom-canvas-track', {event: inEvent, x : coords.x, y : coords.y}); break; case 'up': this.fire('mycustom-canvas-up', {event: inEvent, x : coords.x, y : coords.y}); break; } inEvent.preventDefault(); }); }, this); }, domReady: function() { this.async('resizeHandler'); }, attached: function() { this.resizableAttachedHandler(); }, detached: function() { this.resizableDetachedHandler(); }, resizeHandler: function() { this.init(); this.logCanvasSize(); }, logCanvasSize: function(){ console.log('Canvas width : ' + this.$.canvas.width + ' - Canvas height : ' + this.$.canvas.height ); } }, Polymer.CoreResizable)); </script> </polymer-element>