Vue-konva : Unable to fill rectangles with an image
I draw correctly severals rectangles with the library vue-konva (my project is made with Vue.js 2).
However I want to fill these drawn rectangles with images. The vue-konva doc say to use the property fillPatternImage but it doesn't work
Here my code
template :
<div id="scene">
<v-stage :config="configKonva">
<v-layer>
<div v-for="(coordonate, index) in coordonatesList" v-bind:key="index">
<v-rect :config="getConfigRect(coordonate)"></v-rect>
</div>
</v-layer>
</v-stage>
</div>
script:
methods:
getConfigRect: function(element)
return
x: element.x,
y: element.y - (RECT_HEIGHT / 2),
width: 20,
height: 20,
fill: element.color,
fillPatternImage: '../../assets/cell.png',
The path of the png is correct. If put a img tag in my template with the above path in src, I can see my image.
You can test a sample of code at this url : https://codesandbox.io/s/6x1r9jxklz
Why any image are not displayed in this case ?
javascript canvas vuejs2 konvajs
asked Nov 13 '18 at 10:57
onedkronedkr
7252824
add a comment |
I draw correctly severals rectangles with the library vue-konva (my project is made with Vue.js 2).
However I want to fill these drawn rectangles with images. The vue-konva doc say to use the property fillPatternImage but it doesn't work
Here my code
template :
<div id="scene">
<v-stage :config="configKonva">
<v-layer>
<div v-for="(coordonate, index) in coordonatesList" v-bind:key="index">
<v-rect :config="getConfigRect(coordonate)"></v-rect>
</div>
</v-layer>
</v-stage>
</div>
script:
methods:
getConfigRect: function(element)
return
x: element.x,
y: element.y - (RECT_HEIGHT / 2),
width: 20,
height: 20,
fill: element.color,
fillPatternImage: '../../assets/cell.png',
The path of the png is correct. If put a img tag in my template with the above path in src, I can see my image.
You can test a sample of code at this url : https://codesandbox.io/s/6x1r9jxklz
Why any image are not displayed in this case ?
javascript canvas vuejs2 konvajs
asked Nov 13 '18 at 10:57
onedkronedkr
7252824
add a comment |
I draw correctly severals rectangles with the library vue-konva (my project is made with Vue.js 2).
However I want to fill these drawn rectangles with images. The vue-konva doc say to use the property fillPatternImage but it doesn't work
Here my code
template :
<div id="scene">
<v-stage :config="configKonva">
<v-layer>
<div v-for="(coordonate, index) in coordonatesList" v-bind:key="index">
<v-rect :config="getConfigRect(coordonate)"></v-rect>
</div>
</v-layer>
</v-stage>
</div>
script:
methods:
getConfigRect: function(element)
return
x: element.x,
y: element.y - (RECT_HEIGHT / 2),
width: 20,
height: 20,
fill: element.color,
fillPatternImage: '../../assets/cell.png',
The path of the png is correct. If put a img tag in my template with the above path in src, I can see my image.
You can test a sample of code at this url : https://codesandbox.io/s/6x1r9jxklz
Why any image are not displayed in this case ?
javascript canvas vuejs2 konvajs
asked Nov 13 '18 at 10:57
onedkronedkr
7252824
I draw correctly severals rectangles with the library vue-konva (my project is made with Vue.js 2).
However I want to fill these drawn rectangles with images. The vue-konva doc say to use the property fillPatternImage but it doesn't work
Here my code
template :
<div id="scene">
<v-stage :config="configKonva">
<v-layer>
<div v-for="(coordonate, index) in coordonatesList" v-bind:key="index">
<v-rect :config="getConfigRect(coordonate)"></v-rect>
</div>
</v-layer>
</v-stage>
</div>
script:
methods:
getConfigRect: function(element)
return
x: element.x,
y: element.y - (RECT_HEIGHT / 2),
width: 20,
height: 20,
fill: element.color,
fillPatternImage: '../../assets/cell.png',
The path of the png is correct. If put a img tag in my template with the above path in src, I can see my image.
You can test a sample of code at this url : https://codesandbox.io/s/6x1r9jxklz
Why any image are not displayed in this case ?
javascript canvas vuejs2 konvajs
javascript canvas vuejs2 konvajs
asked Nov 13 '18 at 10:57
onedkronedkr
7252824
asked Nov 13 '18 at 10:57
onedkronedkr
7252824
edited Nov 13 '18 at 12:59
onedkr
asked Nov 13 '18 at 10:57
onedkronedkr
7252824
asked Nov 13 '18 at 10:57
onedkronedkr
7252824
asked Nov 13 '18 at 10:57
onedkronedkr
7252824
7252824
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
according to the vue-konva documentation, your code must be within the data, no in methods.
Example:
<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
;
;
answered Nov 13 '18 at 11:10
Hamilton GabrielHamilton Gabriel
965
Even if I pass a rect config for each element in my arraycoordonatesListimage are not displayed
– onedkr
Nov 13 '18 at 12:35
post code in gist.github
– Hamilton Gabriel
Nov 13 '18 at 12:42
codesandbox.io/s/6x1r9jxklz
– onedkr
Nov 13 '18 at 12:59
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53279496%2fvue-konva-unable-to-fill-rectangles-with-an-image%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
according to the vue-konva documentation, your code must be within the data, no in methods.
Example:
<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
;
;
answered Nov 13 '18 at 11:10
Hamilton GabrielHamilton Gabriel
965
Even if I pass a rect config for each element in my arraycoordonatesListimage are not displayed
– onedkr
Nov 13 '18 at 12:35
post code in gist.github
– Hamilton Gabriel
Nov 13 '18 at 12:42
codesandbox.io/s/6x1r9jxklz
– onedkr
Nov 13 '18 at 12:59
add a comment |
according to the vue-konva documentation, your code must be within the data, no in methods.
Example:
<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
;
;
answered Nov 13 '18 at 11:10
Hamilton GabrielHamilton Gabriel
965
Even if I pass a rect config for each element in my arraycoordonatesListimage are not displayed
– onedkr
Nov 13 '18 at 12:35
post code in gist.github
– Hamilton Gabriel
Nov 13 '18 at 12:42
codesandbox.io/s/6x1r9jxklz
– onedkr
Nov 13 '18 at 12:59
add a comment |
according to the vue-konva documentation, your code must be within the data, no in methods.
Example:
<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
;
;
answered Nov 13 '18 at 11:10
Hamilton GabrielHamilton Gabriel
965
according to the vue-konva documentation, your code must be within the data, no in methods.
Example:
<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
;
;
answered Nov 13 '18 at 11:10
Hamilton GabrielHamilton Gabriel
965
answered Nov 13 '18 at 11:10
Hamilton GabrielHamilton Gabriel
965
answered Nov 13 '18 at 11:10
Hamilton GabrielHamilton Gabriel
965
answered Nov 13 '18 at 11:10
Hamilton GabrielHamilton Gabriel
965
965
Even if I pass a rect config for each element in my arraycoordonatesListimage are not displayed
– onedkr
Nov 13 '18 at 12:35
post code in gist.github
– Hamilton Gabriel
Nov 13 '18 at 12:42
codesandbox.io/s/6x1r9jxklz
– onedkr
Nov 13 '18 at 12:59
add a comment |
Even if I pass a rect config for each element in my arraycoordonatesListimage are not displayed
– onedkr
Nov 13 '18 at 12:35
post code in gist.github
– Hamilton Gabriel
Nov 13 '18 at 12:42
codesandbox.io/s/6x1r9jxklz
– onedkr
Nov 13 '18 at 12:59
Even if I pass a rect config for each element in my array
coordonatesList image are not displayed– onedkr
Nov 13 '18 at 12:35
Even if I pass a rect config for each element in my array
coordonatesList image are not displayed– onedkr
Nov 13 '18 at 12:35
post code in gist.github
– Hamilton Gabriel
Nov 13 '18 at 12:42
post code in gist.github
– Hamilton Gabriel
Nov 13 '18 at 12:42
codesandbox.io/s/6x1r9jxklz
– onedkr
Nov 13 '18 at 12:59
codesandbox.io/s/6x1r9jxklz
– onedkr
Nov 13 '18 at 12:59
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53279496%2fvue-konva-unable-to-fill-rectangles-with-an-image%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
