I am trying to add my own images for a custom marker in vue2-google-maps without success.
I know this is a bug and when I add an :icon="{url:'../assets/my_image'}" in tag the marker disappears.
Has anyone managed to make it work?
You need to load the image in this case, like this:
:icon="{ url: require('../../assets/img/marker-a.png')}"
An example:
<GmapMarker
v-for="(m, index) in markers"
:key="index"
:ref="`marker${index}`"
:position="m.position"
:clickable="true"
:draggable="true"
:icon="{ url: require('../../assets/img/marker-a.png')}" />
Just in case if you like to scale the size of the custom marker to look better in retina screen:
in <template>
<GmapMarker
v-for="(m, index) in markers"
:key="index"
:ref="`marker${index}`"
:position="m.position"
:clickable="true"
:draggable="true"
:icon="markerOptions" />
in script
const mapMarker = require('~/assets/images/layout/map-marker.png');
data() {
return {
markerOptions: {
url: mapMarker,
size: {width: 60, height: 90, f: 'px', b: 'px',},
scaledSize: {width: 30, height: 45, f: 'px', b: 'px',},
},
};
},
Related
Trying to load an image in the center of a QR Code on a Vue3 project. Been reading through the API documentation online and it appears I'm supposed to load it as a string through the "image" parameter, but every time I try to load the image by QR Code disappears entirely.
The page I'm specifically working through is here: https://www.npmjs.com/package/qrcode-vue3
Below is the current working of the code:
<QRCodeVue3
:width="200"
:height="200"
value="HelloWorld"
:qrOptions="{ typeNumber: 0, mode: 'Byte', errorCorrectionLevel: 'H' }"
image="https://cryptologos.cc/logos/ravencoin-rvn-logo.png"
:imageOptions="{ hideBackgroundDots: true, imageSize: 0.4, margin: 0 }"
backgroundColor="white"
:dotsOptions="{
type: 'dots',
color: '#26249a',
gradient: {
type: 'linear',
rotation: 0,
colorStops: [
{ offset: 0, color: '#26249a' },
{ offset: 1, color: '#26249a' },
],
},
}"
:backgroundOptions="{ color: '#ffffff' }"
:cornersSquareOptions="{ type: 'dot', color: '#000000' }"
:cornersDotOptions="{ type: undefined, color: '#000000' }"
/>
End goal I would prefer to load the image from my assets folder but I can't even get a simple image that works to load. I know it's possible because I see the examples QR codes on the npm page but no example code to demonstrate it.
Realized I needed to add the crossOrigin = 'Anonymous' as well as I implemented a v-bind to a url of my local image. Final working solution is as follows:
New component:
<QRCodeVue3
:width="200"
:height="200"
value="HelloWorld"
:qrOptions="{ typeNumber: 0, mode: 'Byte', errorCorrectionLevel: 'H' }"
v-bind:image="iconUrl"
:imageOptions="{ hideBackgroundDots: true, imageSize: 0.4, margin: 3, crossOrigin: 'Anonymous' }"
backgroundColor="white"
:dotsOptions="{
type: 'dots',
color: '#26249a',
gradient: {
type: 'linear',
rotation: 0,
colorStops: [
{ offset: 0, color: '#26249a' },
{ offset: 1, color: '#26249a' },
],
},
}"
:backgroundOptions="{ color: '#ffffff' }"
:cornersSquareOptions="{ type: 'dot', color: '#000000' }"
:cornersDotOptions="{ type: undefined, color: '#000000' }"
/>
Loading image:
export default {
name: "HomeView",
components: {
QRCodeVue3,
},
data() {
return {
iconUrl: require('../assets/ravencoin-rvn-logo.png')
};
},
I'm working on a project, and I'm using react-google-charts to chart my data. The problem that I am having is that no matter what I do, I can't seem to get rid of the extra white space below my control panel. Does anyone know how to get rid of this? I would really appreciate any help or advice on how to correct this. Thank you!
<div>
<h2 className="graphname">Sales</h2>
{summary.dailySales.length === 0 ? (
<MessageBox>No Orders</MessageBox>
) : (
<Chart
width="100%"
height="400px"
chartType="AreaChart"
loader={<div>Loading Chart</div>}
data={[
['Date', 'Sales'],
...summary.dailySales.map((x) => [new Date(x._id), x.sales]),
]}
options={{
chartArea: {
left: '10%',
right: '10%',
}
}}
chartPackages={["corechart", "controls"]}
controls={[
{
controlType: "ChartRangeFilter",
options: {
filterColumnIndex: 0,
ui: {
chartType: "LineChart",
chartOptions: {
chartArea: { width: "90%",
height: "20%"
},
hAxis: { baselineColor: "none" }
}
}
},
controlPosition: "bottom",
}
]}
></Chart>
)}
</div>
I want to create a drawing project.
But It order by vue code.
<v-stage
ref="stage"
:config="stageSize"
#mousemove="move"
#touchmove="handleMouseMove"
#mouseDown="handleMouseDown"
#touchstart="handleMouseDown"
#mouseUp="handleMouseUp"
#touchend="handleMouseUp"
>
<v-layer ref="layer">
<v-image
:config="{ image: image, draggable: true, centeredScaling: true }"
/>
<v-image :config="{ image: image2, draggable: true }" />
<v-rect
v-for="(rec, recIndex) in recs"
:key="`recIndex_${recIndex}`"
:config="{
x: Math.min(rec.startPointX, rec.startPointX + rec.width),
y: Math.min(rec.startPointY, rec.startPointY + rec.height),
width: Math.abs(rec.width),
height: Math.abs(rec.height),
fill: 'rgb(0,0,0,0)',
stroke: 'black',
strokeWidth: 3,
}"
/>
<v-text
ref="text"
:config="{
x: 10,
y: 10,
fontSize: 20,
text: text,
fill: 'black',
}"
/>
<v-line
v-for="(line, lineIndex) in lines"
:key="`lineIndex_${lineIndex}`"
:config="{
stroke: line.color,
strokeWidth: line.width,
globalCompositeOperation: line.globalCompositeOperation,
lineCap: 'round',
points: line.points,
}"
></v-line>
</v-layer>
</v-stage>
My step is
draw red line
draw square
draw pink line
I want canvas render by drawing order, Is square up than red line
I didn't use z-index because that all change z-index but I just want after brush move up
can anyone help me?
I followed the documentation and Github I did the following steps:
install vue-konva and konva and canvas using npm install vue-konva konva --save and npm install canvas --save.
Created vuekonva.js under plugins folder with below content:
import Vue from 'vue'
import VueKonva from 'vue-konva'
Vue.use(VueKonva)
Added plugins: [ "~/plugins/vuekonva"], under nuxt.config.js
I tried adding under nuxt-config.js but still no luck:
build: {
standalone: true
},
Created a page under pages folder and added code from documenation:
<template>
<div>
<v-stage ref="stage" :config="stageSize">
<v-layer>
<v-text :config="{ text: 'Some text on canvas', fontSize: 15 }" />
<v-rect
:config="{
x: 20,
y: 50,
width: 100,
height: 100,
fill: 'red',
shadowBlur: 10,
}"
/>
<v-circle
:config="{
x: 200,
y: 100,
radius: 50,
fill: 'green',
}"
/>
<v-line
:config="{
x: 20,
y: 200,
points: [0, 0, 100, 0, 100, 100],
tension: 0.5,
closed: true,
stroke: 'black',
fillLinearGradientStartPoint: { x: -50, y: -50 },
fillLinearGradientEndPoint: { x: 50, y: 50 },
fillLinearGradientColorStops: [0, 'red', 1, 'yellow'],
}"
/>
</v-layer>
<v-layer ref="dragLayer" />
</v-stage>
</div>
</template>
<script>
export default {
data () {
return {
stageSize: {
width,
height
}
}
},
mounted () {
if (process.browser) {
this.stageSize.width = window.innerWidth
this.stageSize.height = window.innerHeight
}
}
}
</script>
I get the error:
Must use import to load ES Module:
I tried without plugins and it is throwing the error:
vue.runtime.esm.js:620 [Vue warn]: Unknown custom element: <v-stage> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
Not understanding whats the issue please help.
According to Nuxt documentation some plugins export an ES6 module. I think this is the case for konva node module. I followed the steps you mentioned above. But in the nuxt.config.js file I configured the plugin as follow:
plugins: [
{ src: "~/plugins/vuekonva", mode: 'client' }
],
build: {
transpile: ['konva']
},
After that I replaced the code of your page with the code of konvajs as follows:
<template>
<v-stage :config="configKonva">
<v-layer>
<v-circle :config="configCircle"></v-circle>
</v-layer>
</v-stage>
</template>
<script>
export default {
data() {
return {
configKonva: {
width: 200,
height: 200
},
configCircle: {
x: 100,
y: 100,
radius: 70,
fill: "red",
stroke: "black",
strokeWidth: 4
}
};
}
};
</script>
That is working for me when I link to the page with nuxt-link. but if I refresh the page I get some errors that is maybe for SSR. I am not sure but if you read this documentation you maybe could solve the problem for SSR.
The component's style doesn't update with the itemStyleMap[index] value chage:
<view
class="item"
v-for="(item, index) in itemList"
:key="index"
:style="itemStyleMap[index]"
/>
I also tried:
<view
class="item"
v-for="(item, index) in itemList"
:key="index"
:style="{
background: itemStyleMap[index]['background'],
display: itemStyleMap[index]['display'],
zIndex: itemStyleMap[index]['zIndex'],
transform: itemStyleMap[index]['transform'],
transformOrigin: itemStyleMap[index]['transformOrigin'],
}"
/>
The itemStyleMap in data is something like this:
{
1: {
background: 'unset',
display: 'none',
zIndex: 'unset',
transform: 'unset',
transformOrigin: 'unset',
},
2: {
background: 'unset',
display: 'none',
zIndex: 'unset',
transform: 'unset',
transformOrigin: 'unset',
},
3: {
background: 'unset',
display: 'none',
zIndex: 'unset',
transform: 'unset',
transformOrigin: 'unset',
},
}
A more simple demo can be find here: https://jsfiddle.net/wfx6dhy5/7/
Is there any other better way to control infinate amount of style sets like this?
I don't know what is wrong in your project but I did something like this and it works.
check this out.
https://jsfiddle.net/softvini/c4j8ou9r/4/
<div id="app">
<div v-for="item of itemList" :key="item" :style="itemStyleMap[item]">
{{item}}
</div>
</div>
var vm = new Vue({
el: "#app",
data() {
return {
itemList: [0, 1, 2],
itemStyleMap: [{
background: "purple",
display: "block",
zIndex: "unset",
transform: "unset",
transformOrigin: "unset",
},
{
background: "red",
display: "block",
zIndex: "unset",
transform: "unset",
transformOrigin: "unset",
},
{
background: "brown",
display: "block",
zIndex: "unset",
transform: "unset",
transformOrigin: "unset",
},
],
};
},
})
Maybe you need to read more about reactivity. So you can read it here:
https://v2.vuejs.org/v2/guide/reactivity.html
in your https://jsfiddle.net/wfx6dhy5/7/ data should be a function.
el: "#app",
data(){
return {
spanStyle: {
t:{
fontSize: "36px",
color: 'yellow',
border: null
}
}
}
},
methods: {
changeColors() {
this.spanStyle.color = (this.spanStyle.t.color == 'red') ? 'blue' : 'red';
this.spanStyl.border = (this.spanStyle.t.border == '3px solid blue') ? '3px solid red' : '3px solid blue';
}
}
});
Also, you missed .t in changeColors method. this.spanStyle.color should be this.spanStyle.t.color and this.spanStyl.border should be this.spanStyl.t.border