logo
Tags down

shadow

Using paperjs on a vuejs project based on SFC


By : user2176400
Date : October 14 2020, 02:21 PM
To fix the issue you can do I have a vuejs project based on single file components. I want to add a canvas and dinamically draw things with paperjs, based on my component data. What is the proper way to do it? , Self response. A working SFC.
code :
<template>
    <canvas resize id="main-canvas">{{circle_diameter}}</canvas>
</template>
<script>
import paper from 'paper'
export default {
    data: () => ({ x: 20, y: 20 }),
    props: ['circle_diameter'],
    methods: {
        updateDrawing() {
            paper.setup(document.getElementById('main-canvas'))
            // Now, draw your things based on component state.
            const point = new paper.Point(this.x, this.y)
            const circle = new paper.Path.Circle(point, this.circle_diameter/2)
            circle.fillColor = 'grey'
            circle.strokeColor = 'black'
        },
    },
    updated() {
        this.updateDrawing()
    },
}
</script>


Share : facebook icon twitter icon

how to stay on same route in vuejs after page reload when running vuejs project in dev mode on some port?


By : Ram
Date : March 29 2020, 07:55 AM
I think the issue was by ths following , Though, it shouldn't happen but I think the exact property in vue-router could help you, try:
code :
<router-link to="/counter" exact>Counter</router-link>

PaperJs Add 2 raster as 2 symbols in the same project


By : user2022960
Date : March 29 2020, 07:55 AM
I think the issue was by ths following , There are some mistakes in your code:
The most important one, that make you think that the second raster doesn't work, is that you are creating the second raster with the variable url instead of url2. So both rasters use the same image as source... You need to place the second symbol like you do with the first one otherwise it will never get rendered. When iterating through active layer children, make sure to iterate over all children by using project.activeLayer.children.length (as you are placing count * 2 symbols). When checking for bottom reaching items, use height instead of width.
code :
var COUNT = 10;

var raster = new Raster('http://www.clker.com/cliparts/q/I/s/P/E/3/yellow-umbrella-md.png');
raster.rotate(10);
raster.scale(0.4);

var secondRaster = new Raster('https://images.vexels.com/media/users/3/145373/isolated/preview/98721f602aa3fadb040e0a161ab3f966-waterdrop-vislumbrante-vis-o-ilustra--o-by-vexels.png');
secondRaster.scale(0.15);

var symbol = new Symbol(raster);
var secondSymbol = new Symbol(secondRaster);

for (var i = 1; i <= COUNT; i++) {
    // first symbol
    symbol.place(Point.random() * view.size).scale(i / COUNT);
    // second symbol
    secondSymbol.place(Point.random() * view.size).scale(i / COUNT);
}

function onFrame(event) {
    for (var i = 0; i < project.activeLayer.children.length; i++) {
        var item = project.activeLayer.children[i];

        item.position.y += item.bounds.height / 80;

        if (item.bounds.bottom > view.size.height) {
            item.position.y = -item.bounds.height;
        }
    }
}

Can't build VueJS webpack based project after removing node_modules folder


By : user3183662
Date : March 29 2020, 07:55 AM
Does that help Ok, I found the reason why Docker's image wasn't building with the following error:
code :
npm WARN tar ENOENT: no such file or directory, open '/app/node_modules/.staging/vue-form-wizard-25ea249a/src/components/WizardStep.vue'
COPY package.json package-lock.json ./
COPY package.json package-lock.json .npmrc ./

what will happen for vuejs projects based on class components in vuejs v3.0?


By : ExponentiaI
Date : March 29 2020, 07:55 AM
Any of those help Currently there is no official class-based API. RFC was about adding one but was dropped for the reason discussed there.
Existing projects are using vue-class-component library which builds on top of official object-based component API. This should continue to work in 3.0 (because object-based component API stays the same) but suffer from the same drawbacks mentioned in the RFC. Here is a comment from maintainer declaring support for Vue 3.

Paperjs causing class syntax error when not using Paperjs code


By : twitterlesssyd
Date : September 27 2020, 02:00 AM
help you fix your problem By specifying type="text/paperscript" on your
shadow
Privacy Policy - Terms - Contact Us © voile276.org