Как изменить размер холста p5, основываясь на его родительской ширине и высоте, но масштабируя каждый рисунок - PullRequest
Новая
       11

Как изменить размер холста p5, основываясь на его родительской ширине и высоте, но масштабируя каждый рисунок

0 голосов
/ 10 мая 2019

Я создаю приложение, которое использует Vue.js, и внутри приложения есть холст, на котором я хочу нарисовать несколько прямоугольников и изображений (пример). Я уже настроил холст и поместил его в элемент div. Но я хочу сделать следующее: я хочу нарисовать все на определенной высоте и ширине для холста (например, 1200x800). Но затем, после моего рисунка, я хочу изменить масштаб моего холста на основе размера моего окна, сохранив все, что я уже нарисовал.

Я пытался использовать функцию p5 'windowResized', чтобы изменить размер моего холста до определенной ширины и высоты при изменении размера моего экрана. 

<template>
    <div id='planta1'>
        <div id='canvasPlanta1' style='border-style: solid; height: 80vh; overflow: hidden'>
        </div>
        <IOExterno></IOExterno>
    </div>
</template>

<script>
    import IOExterno from '@/components/IOExterno'
    export default{
        components:{
            IOExterno
        },
        mounted(){
            const script = function(p5){
                p5.setup = function(){
                    var canvas = p5.createCanvas(500, 500);
                    canvas.parent('canvasPlanta1');
                    p5.ellipse(p5.width / 2, p5.height / 2, 500, 500);
                }
                p5.windowResized = function(){
                    p5.resizeCanvas(p5.windowWidth, p5.windowHeight * 0.8);
                }
                p5.draw = function(){
                    p5.ellipse(p5.width / 2, p5.height / 2, 100, 100);
                }
            }
            const P5 = require('p5');
            new P5(script)
        }
    }
</script>

Работает нормально, размер холста фактически изменяется, когда я меняю размер окна, и круг, который я рисую, всегда находится в центре, поскольку я рисую его, основываясь на ширине и высоте холста. Но на самом деле я хотел нарисовать что-нибудь в (600 400) (учитывая, что я использую оригинальный размер холста 1200x800), и для каждого следующего размера холста это продолжается в центре. Другой пример: я помещаю изображение в (600 400), и если я изменю размер моего окна до половины его первоначального размера, изображение будет по-прежнему в центре и с половиной его исходного размера.

Подводя итог: Beign может рисовать все с определенным размером холста, но затем масштабировать его, чтобы соответствовать моему div.

...