DecSoft Soporte - Dynamically Adding Pictures to the Screen

Dynamically Adding Pictures to the Screen

Ahorre dinero comprando nuestros paquetes de NeoPlugins. ¡Cinco, Diez e incluso nuestra colección entera a un precio increíble!

DecSoft HTML Compiler incluye un conveniente Compilador por línea de comandos para compilar sus apps desde la consola.

Cree apps y expanda sus capacidades usando el lenguaje más popular del mundo: Javascript.

¡Eche un vistazo a nuestro canal de YouTube y suscríbase para recibir notificaciones sobre nuevos vídeos!

Diseñe para pantallas pequeñas y distribuya también (sin cambios) en dispositivos como tablets.

Los NeoPlugins de DecSoft tienen versiones "designtime" y "runtime" para reducir el tamaño de sus apps.

DecSoft App Builder integra un asistente de Open AI para ayudarle mientras desarrolla sus apps.

Cree apps multiplataforma con DecSoft App Builder, incluyendo Android e iOS, con la misma base de código.

Ahorre tiempo, recursos y dinero creando apps para Android, iOS y más con la misma base de código.

DecSoft HTML Compiler es fácil de usar: personalize su proyecto y compile sus apps y sus juegos rápidamente.

Compile, convierta sus modernas apps y juegos HTML en programas ejecutables sin dependencias para Microsoft Windows.

Cree modernas apps y juegos HTML a otro nivel haciendo cosas que incluso las modernas apps y juegos HTML no pueden.

DecSoft NeoPlugins pone sus proyectos de VisualNeo en otro nivel con +1.000 nuevas acciones para sus apps.

Los plugins oficiales de Apache Cordova se incluyen de serie y hay cientos de ellos disponibles para su uso.

DecSoft App Builder incluye un conveniente Compilador por línea de comandos para compilar sus apps desde la consola.

¡Eche un vistazo a algunas de preguntas más frecuentes sobre nosotros y nuestros productos!

John Clarke

I want to create an application where if I click on the screen it dynamically adds an image to it. So lets say this image is 30 pixels by 30 pixels. If I click on the app screen 10 times I will have 10 instances of that image (one instance at each point I clicked). How can I achieve this ?

DecSoft

Hello John,

You place a non too much specific question, that is, something like "I am trying this and this other but I expect this result and get this error message..."... It's possible to do something like you wanted using a bit of Javascript, and, one of the ways in which we can think is what you can see in the below app sample:

<?xml version="1.0" encoding="utf-8"?>
<AppBuilder Version="2019.44">
  <App>
    <ID>com.appbuilder</ID>
    <Name>New App 1</Name>
    <ShortName>New App 1</ShortName>
    <Version>1.0.0</Version>
    <Width>320</Width>
    <Height>480</Height>
    <Description>Another App Builder app</Description>
    <AuthorName>App Builder</AuthorName>
    <AuthorUrl>https://www.decsoftutils.com/</AuthorUrl>
    <AuthorEmail>info@decsoftutils.com</AuthorEmail>
    <Created>2019-06-28T13:22:39.592</Created>
    <Modified>2019-06-28T13:37:23.904</Modified>
    <Metadata />
    <Webapp />
    <ProWebApp />
    <WebExtension />
    <Cordova>
      <General />
      <Plugins />
      <Electron />
      <Android />
      <IOS />
      <Windows />
      <Phonegap />
      <Platforms />
      <Splash />
      <Config />
      <Paths />
    </Cordova>
  </App>
  <Views>
    <View>
      <Name>Master</Name>
      <IsMaster>1</IsMaster>
      <Controls />
    </View>
    <View>
      <Name>View1</Name>
      <ShowEvent>
        <![CDATA[
SetVar "[ImagesCount]" "0" "Number"]]>
      </ShowEvent>
      <ClickEvent>
        <![CDATA[
StartJS

  var
    currentNum = window.App.RootScope.ImagesCount++;

  $('#View1').append('<img style="display: none;" src="app/images/butterfly.png" id="image-' + currentNum + '">');

  $('#image-' + currentNum)
   .css({
     "width": "60px",
     "height": "60px",
     "position": "absolute",
     "top": window.App.RootScope.View1.Event.clientY + "px",
     "left": window.App.RootScope.View1.Event.clientX + "px"
   })
   .fadeIn();

EndJS]]>
      </ClickEvent>
      <Controls>
        <Control Role="40001">
          <Name>Comment1</Name>
          <Top>64</Top>
          <Left>376</Left>
          <Width>400</Width>
          <Height>72</Height>
          <Text>
            <![CDATA[You can take a look at the view's Show and Click events.]]>
          </Text>
        </Control>
      </Controls>
    </View>
  </Views>
  <Functions />
  <Files>
    <Styles />
    <Scripts />
    <Folders />
    <Images>
      <Path>butterfly.png</Path>
    </Images>
    <Others />
  </Files>
  <Generator>
    <Name>App Builder</Name>
    <Version>2019.44 (6/24/2019)</Version>
    <Email>mailto:info@decsoftutils.com</Email>
    <Website>https://www.decsoftutils.com/</Website>
    <Copyright>©2019 App Builder by DecSoft</Copyright>
  </Generator>
</AppBuilder>

Save the above code in a file and save it as "MyApp.ab", for example. Before open the file with DecSoft App Builder, look in your computer for a PNG image and copy it aside the "MyApp.ab" file with the name: "butterfly.png". Now yes, open "MyApp.ab" with DecSoft App Builder and run the app.

As you can see, every time you click the view (and the app, since we use the scale app option), the butterfly appear in the position that you clicked.

Purchase one or more licenses of our products if they are useful to you!

John Clarke

You are brilliant - that is exactly what I wanted! Thank you so much!

Todo el mundo puede leer el foro de soporte de DecSoft para aprender del mismo, sin embargo, sólo los clientes de DecSoft pueden abrir nuevos hilos. Compre una o más licencias de productos de DecSoft y obtendrá este y otros beneficios.