I use Vue2 and Vuex. My app draws a rectangle based on user input (length and width). I use mapState to get length and width from Vuex store. I can display those values in mainPage.vue so mapping and vuex works fine:
computed: {
...mapState("model2D", ["modelLength", "modelWidth"]),
},
The issue is when I try to refer to those values from mounted() - I set user input as rectangle length and width here (ZimModel.vue):
var line1 = new Line(this.modelLength, 1, black);
var line2 = new Line(this.modelWidth, 1, black);
but seems those vuex values are not passed here at all. When I return dimension in logs then I can see this:
r {x: 0, y: 0, width: 0, height: 0, setValues: ƒ ()…}
As you can see e.g. width is not assigned any value here. I use some 2D lib to draw shapes but I guess that regardless a library everything should work fine. I just simply pass vuex value. I don't know, maybe I'm doing sth wrong.
I add Sanbox here: https://codesandbox.io/s/vue-2-playground-vuex-2okckn?file=/src/components/ZimModel.vue:1218-1267
Main code where I try to draw a shape is located in ZimModel.vue component.
Related
Does pdf.js allow to render a PDF page only partially? More specifically, is it possible to tell pdf.js to render a selected "rectangle of pixels" out of an entire PDF page?
Assuming a resolution of 144 dpi, a typical page (DIN A4) would have approx. 684 (width) by 1190 (height) pixels. I would like to render (for example) a rectangle like [100, 100] (top left coordinate in pixels) and [400, 400] (bottom right coordinate in pixels).
A typical use case could be a scanned document with several handwritten notes that I would like to display and further process individually.
I do understand that a "workaround" could be to save the entire page as jpg (or any other suitable bitmap format) and apply some clipping function. But this would for sure be a less performant approach than selected rendering.
pdfs.js uses a viewport object (presumably containing parameters) for rendering. This object contains
height
width
offsetX
offsetY
rotation
scale
transform
viewBox (by default [0, 0, width / scale, height / scale])
One might think that manipulating the viewBox inside it might lead to the desired outcome, but I have found that changing the viewBox parameters does not do anything at all. The entire page is rendered every time that I apply the render method.
What might I have done wrong? Does pdf.js offer the desired functionality? And if so, how can I get it to work? Thank you very much!
Here is a very simple React component demonstrating my approach (that does not work):
import React, { useRef } from 'react';
import { pdfjs } from 'react-pdf';
pdfjs.GlobalWorkerOptions.workerSrc = 'pdf.worker.js';
function PdfTest() {
// useRef hooks
const myCanvas: React.RefObject<HTMLCanvasElement> = useRef(null);
const test = () => {
const loadDocument = pdfjs.getDocument('...');
loadDocument.promise
.then((pdf) => {
return pdf.getPage(1);
})
.then((page) => {
const viewport = page.getViewport({ scale: 2 });
// Here I modify the viewport object on purpose
viewport.viewBox = [100, 100, 400, 400];
if (myCanvas.current) {
const context = myCanvas.current.getContext('2d');
if (context) {
page.render({ canvasContext: context, viewport: viewport });
myCanvas.current.height = viewport.height;
myCanvas.current.width = viewport.width;
}
}
});
};
// Render function
return (
<div>
<button onClick={test}>Test!</button>
<canvas ref={myCanvas} />
</div>
);
}
export default PdfTest;
My initial thought was also to modify a viewBox of page Viewport. This was not the right guess (I hope that you already figured it out).
What do you need really to do to project only a part of a page to canvas is to prepare correctly the transformation of Viewport.
So it will look more or less like following:
const scale = 2
const viewport = page.getViewport({
scale,
offsetX: -100 * scale,
offsetY: - 100 * scale
})
This will move your your box section to the beginning of the canvas coordinates.
What probably you would like to do next is to make a canvas equal to the selected rectangle size (in your case is 300x300 scaled by your scale) and this solved the issue in my case.
I'm super new to Vue and I'm trying to get into components.
Basically, I have the main script file with my new vue app (with a countdown function based on setInterval and in the same file a vue component( it's a stamina bar made with canvas) with width increasing and decreasing methods. Basically, I would like to decrease the bar width every second but I don't get how to call the methods declared in the component. I guess that when they are declared inside the component I could access them from everywhere, but I didn't find a proper solution ( I tried with $refs but it's not working)
Is there any way where I can call the addWidth() and subWidth() function from a method in my new Vue app?
thank you
this is the component
Vue.component('stamina', {
template: '<div><canvas ref="stamina" style="height:25px;width:300px;" /></div>',
data(){
return {
stamina_width:300,
// vueCanvas: null
}
},
methods: {
drawStamina(){
// clear canvas
this.vueCanvas.clearRect(0, 0, 300, 50);
// draw rect
this.vueCanvas.rect(20,20, this.stamina_width, 100);
//colorize with gradient
var grd = this.vueCanvas.createLinearGradient(0, 0, 300, 0);
grd.addColorStop(0, "red");
grd.addColorStop(0.5, "orange");
grd.addColorStop(1, "green");
this.vueCanvas.fillStyle = grd;
//fill the rect with gradient
this.vueCanvas.fillRect(0, 10,this.stamina_width, 10);
},
addWidth() {
this.stamina_width += 20
this.drawStamina()
},
subWidth() {
this.stamina_width -= 20
this.drawStamina()
}
},
mounted () {
var ctx = this.$refs.stamina.getContext('2d');
this.vueCanvas = ctx;
var stam = this.stamina_width;
var grd = this.vueCanvas.createLinearGradient(0, 0, 300, 0);
grd.addColorStop(0, "red");
grd.addColorStop(0.5, "orange");
grd.addColorStop(1, "green");
this.vueCanvas.fillStyle = grd;
//fill the rect with gradient
this.vueCanvas.fillRect(0,25,stam,25);
}
});
and this is the main vue
var match = new Vue({
el:'#app',
methods:{
//call the methods from component stamina
}
yes you can call methods up/down of parent/child components. You may need to look at creating custom events and listen for them.
Another option I believe might be less complex is to consider using Vuex.
All of your addWidth and subWidth logic will reside in a centralized place this way. All of your components--no matter how nested can "subscribe" to these things (and modify them if needed).
Check out actions. You'll dispatch an action addWidth which sends it to Vuex. In your component that is responsible for rendering the stamina bar I would use a computed property to watch for updates. Something like this:
computed: {
barWidth() {
return this.$store.getters["bar/width"]; // 20
}
}
That is just a really rough example and will not likely be what you're looking for.
VueSchool has some nice (free) courses to help get you rolling with Vuex as well.
I am using the l-rectangle in a Vue leaflet project.
I am creating a rectangle like so:
<l-rectangle :bounds="rectangle"></l-rectangle>
which displays the rectangle on my map doing this in the .js-file:
new Vue({
el: '#app',
data: function() {
return {
rectangle: [[69.81310023846743, 16.929931640625004],[69.11310023846743, 16.129931640625004]]
}
}
});
I have created a map click event, in this function I am changing the coordinates of the rectangle array in order to make the rectangle change size/shape. But nothing is happening (the function gets called but the rectangle does not change):
clickEvent:function(event)
{
var point = [event.latlng.lat,event.latlng.lng];
this.rectangle[0] = this.rectangle[0];
this.rectangle[1] = point;
}
Thanks for any help and guidance!
As per Vue documentation, the reactivity for array will not work if you set value for a particular index, Instead you can use some array operation methods which are mentioned in Vue documentation
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
the following above methods makes the array reactive
The click event can be replaced with
clickEvent:function(event)
{
var point = [event.latlng.lat,event.latlng.lng];
this.rectangle.splice(0, 1, this.rectangle[0]);
this.rectangle.splice(1, 1, point);
}
First of all, sory my English.
I am working with some sprites using WebGL on CreateJS library. I need apply a custom color filter over the jpg used to create the spritsheet.
Here is my code:
let bmp = new createjs.Bitmap(rscTexture);
bmp.filters = [new createjs.AlphaFilter()];
bmp.cache(0, 0, rscTexture.width, rscTexture.height, {1, useGL:"stage"});
let frames = this.generateFrames();
this.sprite = new createjs.Sprite( new createjs.SpriteSheet({
framerate: 24,
"images": [bmp.cacheCanvas],
"frames": frames,
"animations": {
"run": [0, frames.length - 1],
}
}));
The problem is that this trow next error:
ERROR Cannot use 'stage' for cache because the object's parent stage
is not set, please addChild to the correct stage.
How can I add the element to the stage first, if I still do not create it?
If you have a StageGL instance that already exists, you can pass it in directly instead. The "stage" shortcut attempts to figure it out; however, sometimes you need to be specific and directly passing the reference is the only solution.
bmp.cache(0, 0, rscTexture.width, rscTexture.height, 1, { useGL: myStage });
The specific and full documentation can be found here:
https://createjs.com/docs/easeljs/classes/BitmapCache.html#method_define
I am rendering a bunch of HTML divs (I've named them cells) based on Vue data.
The colour of the cell is dictated by a hex code in the data.
On mouse over, a function should run to change the colour of the particular cell.
Here is how the data looks and how the function works at the moment:
new Vue({
el: '#app',
data: {
cells: [
{i: 1, hex: '#111111'},
{i: 2, hex: '#222222'},
{i: 3, hex: '#ffffff'}
]
},
methods: {
mouseOver: function (e){
this.cells[e.toElement.id].hex = (Math.floor(Math.random() * 16777215)).toString(16);
}
}
})
And here is the code for the v-for which renders the (in this case) 3 cells:
<div class='cell'
v-for="cell in cells"
:id="cell.i"
:key="cell.i"
:style="{ backgroundColor: cell.hex}"
#mouseenter="mouseOver">
</div>
However this does not work.
[Vue warn]: You may have an infinite update loop in a component render function.
(found in <Root>)
I theorise that this is because Vue re-renders all of the cells every time the data changes, and since the component is new, the function runs again.
However I'm new to Vue and not sure how to go about solving this!
Help much appreciated!
You forgot to add # at the beginning of your hex color code and you forgot to decrease the index for accessing the array by one.
Furthermore, e.toElement seems to be unsupported by some browsers. Rather use e.target
What is the difference between Event.target, Event.toElement and Event.srcElement?
this.cells[e.target.id-1].hex = '#' + (Math.floor(Math.random() * 16777215)).toString(16);
Working fiddle: https://jsfiddle.net/TobiObeck/qfpkvn9L/1/