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

Question

当窗口调整大小事件触发时，我想在自定义 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 作为画布初始尺寸，但我的最终目的是使用父容器尺寸。

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>