Comments (2)
Hi! ๐
I don't know Vue unfortunately, but this is more of a question for Vue (how to get an element reference in Vue). oCanvas needs a CSS selector to an element that exists in the document at the point when you call oCanvas.create
, or it needs the element reference directly.
from ocanvas.
I find the answer by myself, in case any one have the same issue, I would like to post it here:
<template>
<div class="hello">
<h1>{{ title }}</h1>
<canvas id='guitar'></canvas>
</div>
</template>
<script>
import oCanvas from 'ocanvas';
export default {
name: 'GuitarCanvas',
props: {
title: String
},
mounted: function(){
var canvas = oCanvas.create({
canvas: '#guitar',
background: '#eec',
});
canvas.width=200;
canvas.height=280;
var line = canvas.display.line({
start:{ x: 20, y:20 },
end: { x: 120, y: 20 },
stroke: '3px #369',
cap: 'round'
});
canvas.addChild(line);
}
}
</script>
from ocanvas.
Related Issues (20)
- text function๏ผ HOT 1
- text-decoration HOT 1
- getOrigin for fllipse widgets returns wrong value HOT 1
- getOrigin method for ellipse widget calculates wrong values HOT 2
- can't use the scale
- Ellipse widget: mouse events at wrong position, when ellipse origin is "left", "top" HOT 2
- text lineHeight
- Request for a new display object "freeform"
- Canvas zoom operation support HOT 3
- hava a function like getImageData? HOT 2
- zIndex is not work HOT 3
- about letter-spacing HOT 1
- Please help. How to draw dashed line? searched docs did not find anywhere. HOT 1
- addchild() will redraw everything? HOT 1
- Get new coordinate after drag and drop HOT 1
- I think performance is the biggest problem of ocanvas HOT 1
- rounded rectangle HOT 8
- Does it support webGL backend ? HOT 1
- transformPointerPosition gives incorrect coordinates when the context is scaled HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ๐๐๐
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google โค๏ธ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ocanvas.