当窗口调整大小事件触发时，我想调整自定义Polymer元素上的html5画布大小！
我尝试使用window.onresize事件，但我无法获得画布功能。
我们可以通过鼠标和触摸事件监听在这个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作为画布初始大小，但我的最终目的是使用父容器尺寸。
答案 0 :(得分：0)
我终于成功了，我想做。我使用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>